I have been trying to make a script that would open a div onClick, but also close the other div if it's open (The page has 2 divs you're suppose to be able to switch between).

Here's my script (I found):

/

$(document).ready(function () {
    var expanded = false;
    var collapsed = true;
    $(".expanderHead").click(function () {
        if (expanded == true) {
            expanded = false;
            collapsed = true;
        } else {
            expanded = true;
            collapsed = false;
        }

        if (expanded == true) {
            $(".expanderSign").html("-");
            $(".expanderContent").slideToggle();
        }

        if (collapsed == true) {
            $(".expanderSign").html("+");
            $(".expanderContent").slideToggle();
        }
    });
});

Here's what I've tried:

/

$(document).ready(function () {
    var expanded = false;
    var collapsed = true;
    $(".infoexpanderHead1").click(function () {
        if (expanded == true) {
            expanded = false;
            collapsed = true;
        } else {
            expanded = true;
            collapsed = false;
        }

        if (expanded == true) {
            $(".infoexpanderSign1").html("-");
            $(".infoexpanderContent1").slideToggle();
            $(".infoexpanderContent2").slideToggle();
        }

        if (collapsed == true) {
            $(".infoexpanderSign1").html("+");
            $(".infoexpanderContent1").slideToggle();
            $(".infoexpanderContent1").slideToggle();
        }
    });

    $(document).ready(function () {
        var expanded = true;
        var collapsed = true;
        $(".infoexpanderHead2").click(function () {
            if (expanded == true) {
                expanded = false;
                collapsed = true;
            } else {
                expanded = true;
                collapsed = false;
            }

            if (expanded == true) {
                $(".infoexpanderSign2").html("-");
                $(".infoexpanderContent2").slideToggle();

            }

            if (collapsed == true) {
                $(".infoexpanderSign2").html("+");
                $(".infoexpanderContent2").slideToggle();
            }
        });
    });

There should be different content in each infoexpandercontent. If 'Content 1' is expanded, collapse 'Content 2' is the idea, but I'm very new to jQuery and Javascript, I've done mostly HTML/CSS.

Also, could it be possible to add a CSS class to the 'expanded' span? I mean like there would appear a border-bottom on the span, which's content is expanded.

I want it to have a smooth transition, not just change the content roughly.

Ask me if I was too unclear!

Thank you, Any help is appreciated!

I have been trying to make a script that would open a div onClick, but also close the other div if it's open (The page has 2 divs you're suppose to be able to switch between).

Here's my script (I found):

http://jsfiddle/J9vdr/1/

$(document).ready(function () {
    var expanded = false;
    var collapsed = true;
    $(".expanderHead").click(function () {
        if (expanded == true) {
            expanded = false;
            collapsed = true;
        } else {
            expanded = true;
            collapsed = false;
        }

        if (expanded == true) {
            $(".expanderSign").html("-");
            $(".expanderContent").slideToggle();
        }

        if (collapsed == true) {
            $(".expanderSign").html("+");
            $(".expanderContent").slideToggle();
        }
    });
});

Here's what I've tried:

http://jsfiddle/YqEVZ/2/

$(document).ready(function () {
    var expanded = false;
    var collapsed = true;
    $(".infoexpanderHead1").click(function () {
        if (expanded == true) {
            expanded = false;
            collapsed = true;
        } else {
            expanded = true;
            collapsed = false;
        }

        if (expanded == true) {
            $(".infoexpanderSign1").html("-");
            $(".infoexpanderContent1").slideToggle();
            $(".infoexpanderContent2").slideToggle();
        }

        if (collapsed == true) {
            $(".infoexpanderSign1").html("+");
            $(".infoexpanderContent1").slideToggle();
            $(".infoexpanderContent1").slideToggle();
        }
    });

    $(document).ready(function () {
        var expanded = true;
        var collapsed = true;
        $(".infoexpanderHead2").click(function () {
            if (expanded == true) {
                expanded = false;
                collapsed = true;
            } else {
                expanded = true;
                collapsed = false;
            }

            if (expanded == true) {
                $(".infoexpanderSign2").html("-");
                $(".infoexpanderContent2").slideToggle();

            }

            if (collapsed == true) {
                $(".infoexpanderSign2").html("+");
                $(".infoexpanderContent2").slideToggle();
            }
        });
    });

There should be different content in each infoexpandercontent. If 'Content 1' is expanded, collapse 'Content 2' is the idea, but I'm very new to jQuery and Javascript, I've done mostly HTML/CSS.

Also, could it be possible to add a CSS class to the 'expanded' span? I mean like there would appear a border-bottom on the span, which's content is expanded.

I want it to have a smooth transition, not just change the content roughly.

Ask me if I was too unclear!

Thank you, Any help is appreciated!

• javascript
• jquery
• html
• css

• 1 You got "Unexpected end of input" error, so check your html dom element! – Ringo Commented Dec 19, 2013 at 9:26
• please check this http://jsfiddle/hungerpain/eK8X5/7/ – Bhavesh Parekh Commented Dec 19, 2013 at 9:27
• It's not entirely clear what you're after, is this what you're after? jsfiddle/J9vdr/1 If it is, I'll take the time to actually explain.. – Korijn Commented Dec 19, 2013 at 9:31

2 Answers 2

If you can make one of them visible by default, you can skim eeeeeverything down to these lines:

$(document).ready(function () {
    $(".infoexpanderHead1, .infoexpanderHead2").click(function () {
        $(".infoexpanderContent1,.infoexpanderContent2").slideToggle();
        $(".infoexpanderSign1, .infoexpanerSign2").each(function() {
            $(this).html($(this).html() == '-' ? '+' : '-');
        });
    });
});

jsfiddle

Now, what I see is a bit faulty in your code is that you use classes that are unmon between 2 "grouped" sets of elements. You can make this much more dynamic if you update your layout like so:

<div class="infoExpander expanded">
    <div class="head"><span class="sign">-</span>Lorem ipsum</div>
    <div class="content">Lorem ipsum<br />Lorem ipsum</div>
</div>
<div class="infoExpander">
    <div class="head"><span class="sign">+</span>Lorem ipsum</div>
    <div class="content">Lorem ipsum<br />Lorem ipsum</div>
</div>

And your JS like so:

$(document).ready(function () {
$(".infoExpander .head").click(function () {
    $('.content').not($(this).nextAll('.content')).slideUp().prevAll('.head').find('.sign').html('+');
    $(this).nextAll('.content').slideDown(function() {
      $(this).closest('.infoExpander').addClass('expanded').find('.sign').html('-');
    });
});
});

Here's a jsfiddle to see it in action.

Make sure your content is inside the parent. I created a little demo: http://jsfiddle/F8Ean/

Remove the "1" or "2" in the classname, because the classname should be the same. Try using id's for unique names and classes for shared names. Select all .infoexpanderHead elements, and bind a click event to toggle the visibility of the .infoexpanderContent inside itself.

The siblings() refers to all the same classes of the clicked element on the same level (.infoexpanderHead)

$('.infoexpanderHead').click(function(){
    $(this).siblings().find('.infoexpanderContent').slideUp();
    $(this).find('.infoexpanderContent').slideDown();
});

When used like this you can add as many blocks as you like, this code will handle all elements.