Question

JQUERY:

$("li h2").click(function() {
    $(this).toggleClass("active").siblings().removeClass("active");
    $(this).next("div").slideToggle("fast").siblings("div").slideUp("fast");
});

HTML:

<ul>
    <li>
        <h2>headingA</h2>
        <div>contentA</div>
        <h2>headingB</h2>
        <div>contentB</div>
    </li>
</ul>

NOTES:
Bascially I’d want: when click on h2 show the div next to it and hide all others, not only show/hide toggle as well.
thanks!

Answer 1

Well, here’s your solution. Literally. I didn’t make any change to your code, except to add a little CSS coloring.

EDIT: I modified it to run after the DOM loads.

CSS

.active {
    background: yellow;
}

div {
    background: orange;
}

HTML

<ul>
    <li>
        <h2>headingA</h2>
        <div>contentA</div>
        <h2>headingB</h2>
        <div>contentB</div>
        <h2>headingC</h2>
        <div>contentC</div>
    </li>
</ul>​

jQuery

   // Remember to wrap your code to run after the DOM is loaded.
$(function() {
    $("li div").hide();
    $("li div:first").show(); 
    $("li h2:first").addClass("active");

    $("li h2").click(function() {
        $(this).toggleClass("active").siblings().removeClass("active");
        $(this).next("div").slideToggle("fast").siblings("div").slideUp("fast");
    });​
});