Close All Other DIVs and Positioning of hidden DIV

Question

I have created a simple 2 step accordion: http://jsfiddle.net/oampz/WkuMg/1/

What i would like to know is, have i used the correct jQuery to ensure that when a heading DIV is clicked, the following content DIV is expanded AND all other content DIVs close.

jQuery:

$(".heading").click(function () {
  var $this = $(this);
  $this.next(".content").slideToggle();
  $this.parent().siblings().children().next().slideUp();
  return false;
});

Also, looking at the fiddle above, you can see i have tried to position the content DIV's to the right of the heading DIVs and at the top. I have used some CSS for this:

CSS:

.content {
    display: none;
}
.heading {
    font-weight: bold;
    padding: 15px 0 15px 20px;
    background: GREY;    
    width: 30%;
}
.content {
    width: 100%;
    margin-left: 35%;
    position: absolute;
    top: -2px;
    width: 60%;
}

Specifically the use of absolute and top: -2px;

Thanks

Answer 1

Your code works and makes sense, you may improve by putting some delay in the apparition of the new content, for a nicer transition http://jsfiddle.net/WkuMg/2/

setTimeout(function(){
    $this.next(".content").slideToggle();
}, 200);

You also can work with classes, so you do not have to sort your HTML this way and pack all headers in one part, all content on the other.

Answer 2

Yeah You did good. But it would be better. Add a class to container and check the container class and do a slide function. if statement will use for remove same slide repeat again.

    $(document).ready(function(){
        $(".heading").click(function () {
            if ($(this).next(".content").hasClass("folded")){
                $(".content").slideUp();
                 $(".unfolded").toggleClass("folded").toggleClass("unfolded");
               $(this).next(".content").toggleClass("folded").toggleClass("unfolded").slideDown();
            }
            return false;
        });
    });

Here the fiddle

Updated fiddle