CODEWITHSUNDEEP
jquerynestedaccordion
Geeky Gaj
Geeky Gaj

Reputation: 69

Nested Accordion opens and closes immidiately

I have the following fiddle: http://jsfiddle.net/bgejtbyk/2/

When the second title opens, there are 2 sub titles under it. When i try to open any one of those two sub, they open and quickly the main accordion closes.

What am i doing wrong? Cheers.

$( "#accordion" ).accordion({
heightStyle: "content",
collapsible: true,
active: 'none',
});
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--Accordian-->
<div id="accordion" style="margin-top:20px;">
<!--Title--> 
	<h3 style="border-top:solid 1px #71a232; border-bottom:solid 1px #71a232"><p class="dropdownTitleText" style="color:#f7941d;">Agri Business Division</p></h3>
<!--Title-->
<!--Content-->        
     	<div class="accordion-content">
                TEXT TEXT TEXT
    	</div>
<!--Content--> 
<!--Title--> 
	<h3 style="border-top:solid 1px #71a232; border-bottom:solid 1px #71a232"><p class="dropdownTitleText" style="color:#4f9bd1;">Consumer Business Division</p></h3>
<!--Title-->
<!--Content--> 
<div>
<div id="accordion">
	<h3 style="border-top:solid 1px #71a232; border-bottom:solid 1px #71a232"><p class="dropdownTitleText" style="color:#4f9bd1;">SUB1</p></h3>       
     	<div class="accordion-content">
			SUB1 TEXT
    	</div>
        
	<h3 style="border-top:solid 1px #71a232; border-bottom:solid 1px #71a232"><p class="dropdownTitleText" style="color:#4f9bd1;">SUB2</p></h3>       
     	<div class="accordion-content">
			SUB2 TEXT
    	</div>
</div>
</div>
<!--Content--> 
</div>
<!--Accordian-->

Upvotes: 0

Views: 137

Answers (1)

Vadim Landa
Vadim Landa

Reputation: 2834

Updated your fiddle. The problem is that you have two elements with the same ID, so changing "id" to "class" will fix the issue:

<div class="accordion" style="margin-top:20px;"><!--First element-->
<div class="accordion"><!--Second element--></div>

$(".accordion").accordion({
    heightStyle: "content",
    collapsible: true,
    active: 'none',
});

Upvotes: 2

Related Questions