Help with Collapse and Expand Accordion at same time using JQuery (demo)
- by Evan
I'm stuck on an Expand/Collapse accordion using JQuery.
After the initial headline is clicked and it expands, if you click to another headline it will collapse the former headline completely FIRST then it will expand the headline you clicked. This collapse first then expand second technique is very distracting and what should happen is as the headline is expanding it should collapse the initial headline. What am I missing?
You can experience a demo here: http://media.apus.edu/it/evan-testing/accordion.htm
Below is all my work
Javascript
<script src="http://www.apus.edu/bin/l/y/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<!--
$(document).ready(function()
{
$(".accordian>li.expanded").removeClass("expanded");
$(".accordian>li h2").addClass("jse").click(function() {
var doOpen = !$(this).parent().hasClass('expanded');
var openContainers = $(".accordian>li.expanded").length>0;
var targetNode = this;
if(openContainers) {
$(".accordian>li.expanded h2")
.parent()
.removeClass('expanded')
.end()
.nextAll()
.slideUp(100,function(){
if($(".accordian>li.expanded").length==0) performOpen(doOpen,targetNode);
});
}
else {
performOpen(doOpen,targetNode);
}
// if containers are open, proceed on callback
// else proceed immediately
}).nextAll().slideUp(100);
});
function performOpen(doOpen,whichNode) {
if(doOpen) {
$('html,body').animate({scrollTop: $(whichNode).offset().top}, 1000); //target code
$(whichNode).nextAll().slideDown(100).parent().addClass('expanded');
}
}
//-->
</script>
CSS
<style>
.accordian {
list-style : none;
padding : 0px;
margin : 0px;
font-size : 12px;
}
.accordian li {
list-style : none;
padding : 0px;
margin : 0px;
}
.accordian li a:hover {
text-decoration : underline;
}
.accordian li h2 {
cursor : auto;
text-decoration : none;
padding : 0px 0px 4px 22px;
}
.accordian li h2.jse {
background-image : url(http://www.apus.edu/bin/m/p/toggle_arrow.gif);
background-position : 4px -35px;
background-repeat : no-repeat;
}
.accordian li h2:hover {
cursor : pointer;
text-decoration : underline;
}
.accordian li li {
margin-bottom : 5px;
margin-left : 0px;
margin-top : 0px;
padding : 0px;
}
.accordian li p {
display : block;
padding-top : 0px;
padding-bottom : 15px;
padding-left : 10px;
margin-left : 30px;
margin-top : 0px;
}
.accordian li ul {
margin-bottom : 30px;
margin-top : 0px;
padding-top : 0px;
padding-left : 0px;
margin-left : 0px;
}
.accordian li.expanded h2.jse {
background-position : 4px -5px;
}
.accordianContainer {
margin-top : 0px;
padding-top : 0px;
}
.accordianContainer h2 {
padding : 3px;
}
.accordian_nolist {
list-style : none;
}
</style>
HTML
<table height="120"><tr><td> </td></tr></table>
<div class="accordianContainer">
<ul class="accordian">
<li><h2>Title 1 Goes here - Example</h2>
<ul><li>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
</li></ul>
</li>
</ul>
</div>
<div class="accordianContainer">
<ul class="accordian">
<li><h2>Title 2 Goes here - Example</h2>
<ul><li>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
</li></ul>
</li>
</ul>
</div>
<div class="accordianContainer">
<ul class="accordian">
<li><h2>Title 3 Goes here - Example</h2>
<ul><li>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
</li></ul>
</li>
</ul>
</div>
<div class="accordianContainer">
<ul class="accordian">
<li><h2>Title 4 Goes here - Example</h2>
<ul><li>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
</li></ul>
</li>
</ul>
</div>
<div class="accordianContainer">
<ul class="accordian">
<li><h2>Title 5 Goes here - Example</h2>
<ul><li>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
this is where content goes<BR>this is where content goes<BR>this is where content goes<BR>
</li></ul>
</li>
</ul>
</div>
