I am trying to toggle the class of a selected object's child "ul" object, using the following code. When I click on one of the parents, multiple child "ul" classes toggle the class on and off instead of just the child of the selected object. Here is the code and a jsfiddle example. Any help would be greatly appreciated.
the CSS
.hidden {
display:none;
}
the jquery
$(document).ready(function () {
$(".proDocs").click(function() {
$(this).children( "ul" ).toggleClass( "hidden" );
});
});
the HTML
<div>
<ol type="A">
<li class="proDocs">
Procedures
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
<ol type="a">
<li class="proDocs">
Performance
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
<ol type="I">
<li class="proDocs">
Validation Documents
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
<ol type="i">
<li class="proDocs">
Evaluation
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
</li>
<li class="proDocs">
Reports
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
</li>
<li class="proDocs">
Certification
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
</li>
<li class="proDocs">
Training
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
</li>
</ol>
</li>
<li class="proDocs">
Other Documents
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
Since you have multiple nested elements with the class .proDocs what you see here is called bubbling when you click on a inner item it fires the function and after the function again for the upper container since have the same class.
To prevent this behavior you can use stopPropagation(), now your code:
$(document).ready(function() {
$(".proDocs").click(function(e) {
e.stopPropagation();
$(this).children("ul").toggleClass("hidden");
});
});
Note: You can also use return false or preventDefault() is your choice and each one has its own particularities
Thanks for your question
look the following soloution wish this help you
change your html and the formation
<div>
<ol type="A">
<li class="proDocs">
Procedures
<ul class="hidden">
<li>Upload Pictures</li>
<ol type="a">
<li class="proDocs">
Performance
<ul class="hidden">
<li>Upload Pictures</li>
<ol type="I">
<li class="proDocs">
Validation Documents
<ul class="hidden">
<li>Upload Pictures</li>
<ol type="i">
<li class="proDocs">
Evaluation
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
</li>
<li class="proDocs">
Reports
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
</li>
<li class="proDocs">
Certification
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
</li>
<li class="proDocs">
Training
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
</li>
</ol>
</ul>
</li>
<li class="proDocs">
Other Documents
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
</li>
</ol>
</ul>
</li>
</ol>
</ul>
</li>
</ol>
</div>
and then make change the following code with your javascript code
$(document).ready(function () {
$(".proDocs").click(function() {
$(this).children( "ul:first-child" ).toggleClass( "hidden" );
return false;
});
});
wish this help you
fell free to ask me any question.