Toggling class of child object

Question

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.

jsFiddle example

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>

Your HTML is not correct. It contains too many closes. Also any parent is also proDocs, which will be triggered by a child click. — Niels, Apr 10 '17 at 15:49
Yep, the problem is Niels comment. the class proDocs has inside a class proDocs, so the script take the first and the second proDocs and try to do that the script does. — Roy Bogado, Apr 10 '17 at 15:52
If you indent the code properly, you won't so easy run into such issues — Asons, Apr 10 '17 at 15:55

score 4 · Accepted Answer · edited May 23 '17 at 10:30

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");
  });
});

New Demo

_{Note: You can also use return false or preventDefault()
is your choice and each one has its own particularities}

score 1 · Answer 2 · answered Apr 10 '17 at 16:15

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.

Toggling class of child object

2 Answers2

New Demo