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
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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.