I am trying to create jquery slidetoggle effect on an unordered list. it toggles on but then immediately slides back up. I am unable to figure out if it is my css or if it is my jquery. BTW i am unable to get this working with my jsfiddle for some reason so the jsfiddle is only a view of my css, html and jquery. Here is the jquery I am using:
function accordionLoad() {
$(".accordion-header").removeClass("expanded");
$(".accordion-content").hide();
$(".accordion-header").bind("click", function(){
$(this).toggleClass("expanded");
$(this).next(".accordion-content").slideToggle();
})
$(".expand-all").bind("click",function(){
$(this).siblings(".accordion").find(".accordion-content").slideDown();
$(this).siblings(".accordion").find(".accordion-header").addClass("expanded");
})
$(".collapse-all").bind("click",function(){
$(this).siblings(".accordion").find(".accordion-content").slideUp();
$(this).siblings(".accordion").find(".accordion-header").removeClass("expanded");
})
}
$(document).ready(function(){
accordionLoad();
});
and the html..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<meta name="Microsoft Theme" content="HDRDefault 1011, default" />
</head>
<body>
<div class="container">
<div class="expand-all">Expand All</div><div class="collapse-all">Collapse All</div>
<UL class="accordion">
<LI class="accordion-item">
<DIV class="accordion-header">Question2</DIV>
<DIV class="accordion-content">
<DIV class="Externa">Answer2..Answer2..Answer2..Answer2..Answer2..Answer2..Answer2..</DIV>
</DIV>
</LI>
<LI class="accordion-item">
<DIV class="accordion-header">Question12</DIV>
<DIV class="accordion-content">
<DIV class="Externa">Answer12..Answer12..Answer12..Answer12..Answer12..Answer12..Answer12..</DIV>
</DIV>
</LI>
</UL>
</div>
</body>
</html>
Here is the jsfiddle: http://jsfiddle.net/9CNeX/8/
See this example...
$('.accordion-header').on('click', function(e){
$(this).next().slideToggle();
});
Greetings.
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.