Anaya P
Reputation: 43
Jquery accordion collapsed on page load
I am trying to create an expandable accordion using jquery. I am not able to figure out that how am I supposed to prevent it from expanding on page load. I have no idea of jquery,and any help will be greatly appreciated.
<ul>
<li class="expandable root">
<label for=" Oraganization" class="active"> Oraganization</label>
<span class="pull-right oraganization active expand-icon glyphicon glyphicon-minus"></span>
<ul id="accordion">
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Manager-1">
<label for="Manager-1"> Manager-1</label>
<ul id="accordion">
<li>
<input type="checkbox" id="Sub-Manager-1">
<label for="Sub-Manager-1"> Sub-Manager-1</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Sub-Manager-2">
<label for="Sub-Manager-2"> Sub-Manager-2</label>
<ul class="accordion">
<li>
<input type="checkbox" id="Associate-1">
<label for="Associate-1"> Associate-1</label>
</li>
<li>
<input type="checkbox" id="Associate-2">
<label for="Associate-2"> Associate-2</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Associate-5">
<label for="Associate-5"> Associate-5</label>
<ul class="accordion">
<li>
<input type="checkbox" id="Sub-associate-1">
<label for="Sub-associate-1"> Sub-associate-1</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-2">
<label for="Sub-associate-2"> Sub-associate-2</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-3">
<label for="Sub-associate-3"> Sub-associate-3</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-4">
<label for="Sub-associate-4"> Sub-associate-4</label>
</li>
</ul>
</li>
</ul>
</li>
</li>
</ul>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-2">
<label for="Manager-2"> Manager-2</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-3">
<label for="Manager-3"> Manager-3</label>
</li>
</ul>
</li>
</ul>
JS File:
$(document).ready(function(){
$('.expand-icon').click(function(){
var elem = $(this);
if(elem.hasClass('active')) {
elem.removeClass('active');
var subElem = elem.siblings('ul');
var nestedElem =elem.siblings('ul').find('ul');
if(nestedElem.length == 0) {
subElem.slideUp('fast');
}
else {
nestedElem.slideUp('fast',function(){
subElem.slideUp('fast');
});
}
$.when(elem.removeClass('glyphicon-minus')).then(function(){
elem.addClass('glyphicon-plus');
});
}
else {
elem.addClass('active');
elem.siblings('ul').slideDown('fast',function(){
elem.siblings('ul').find('ul').slideDown('fast');
});
$.when(elem.removeClass('glyphicon-plus')).then(function(){
elem.addClass('glyphicon-minus');
});
}
});
$('.expandable :checkbox').on('change', function() {
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function () {
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
});
$(this).parents('ul').siblings(':checkbox').prop('checked', sibs);
});
});
You an find the bootply at this link: http://www.bootply.com/1W8bSTnmx6
Upvotes: 1
Views: 142
Answers (2)
Sravan
Reputation: 18647
you are just displaying all the accordions when the page gets loaded since there is no hiding any where.
According to your code Since only the first Accordion contains the data, it is getting displayed else every expandable div will get displayed.
The solution for this is to add a hide class to the class accordion so that it does not display at the beginning, the at the time of click function, you can remove that class and it gets displayed.
$(document).ready(function(){
$('.expand-icon').click(function(){
$('ul').removeClass('hide')
var elem = $(this);
if(elem.hasClass('active')) {
elem.removeClass('active');
var subElem = elem.siblings('ul');
var nestedElem =elem.siblings('ul').find('ul');
if(nestedElem.length == 0) {
subElem.slideUp('fast');
}
else {
nestedElem.slideUp('fast',function(){
subElem.slideUp('fast');
});
}
$.when(elem.removeClass('glyphicon-minus')).then(function(){
elem.addClass('glyphicon-plus');
});
}
else {
elem.addClass('active');
elem.siblings('ul').slideDown('fast',function(){
elem.siblings('ul').find('ul').slideDown('fast');
});
$.when(elem.removeClass('glyphicon-plus')).then(function(){
elem.addClass('glyphicon-minus');
});
}
});
$('.expandable :checkbox').on('change', function() {
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function () {
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
});
$(this).parents('ul').siblings(':checkbox').prop('checked', sibs);
});
$('.organization').click(function(){
$('.accordion')[0].click()
})
});<ul>
<li class="expandable ">
<label for=" Oraganization" class="active"> Oraganization</label>
<span class=" organization active expand-icon glyphicon glyphicon-minus"></span>
<ul id="">
<li class="expandable">
<span class="expand-icon glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-1">
<label for="Manager-1"> Manager-1</label>
<ul class="accordion hide">
<li>
<input type="checkbox" id="Sub-Manager-1">
<label for="Sub-Manager-1"> Sub-Manager-1</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Sub-Manager-2">
<label for="Sub-Manager-2"> Sub-Manager-2</label>
<ul class="accordion">
<li>
<input type="checkbox" id="Associate-1">
<label for="Associate-1"> Associate-1</label>
</li>
<li>
<input type="checkbox" id="Associate-2">
<label for="Associate-2"> Associate-2</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Associate-5">
<label for="Associate-5"> Associate-5</label>
<ul class="accordion">
<li>
<input type="checkbox" id="Sub-associate-1">
<label for="Sub-associate-1"> Sub-associate-1</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-2">
<label for="Sub-associate-2"> Sub-associate-2</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-3">
<label for="Sub-associate-3"> Sub-associate-3</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-4">
<label for="Sub-associate-4"> Sub-associate-4</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-2">
<label for="Manager-2"> Manager-2</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-3">
<label for="Manager-3"> Manager-3</label>
</li>
</ul>
</li>
</ul>Here is the bootply, Bootply link for it
Upvotes: 0
Thanga
Reputation: 8091
This is because you have this first accordian open when loading it. To fix it, do a click operation on this at the time of load with $($('#accordion .expand-icon')[0]).click();. Check the working example here http://www.bootply.com/vGoKbvfKtl
Upvotes: 1
Related Questions
- Is there an "exists" function for jQuery?
- How do I refresh a page using JavaScript?
- How do I check if an element is hidden in jQuery?
- $(document).ready equivalent without jQuery
- How do I check whether a checkbox is checked in jQuery?
- Scroll to an element with jQuery
- Setting "checked" for a checkbox with jQuery
- How can I upload files asynchronously with jQuery?
- How can I know which radio button is selected via jQuery?
- Adding a table row in jQuery