Switching a class of a child

Question

I am trying to switch the object class of the ul object using the following code. When I click on one of the parents, several child ul classes turn the class on and off, not just the child of the selected object. Here is the jsfiddle code and example. Any help would be greatly appreciated.

JsFiddle example

CSS

.hidden {
    display:none;
}

jquery

$(document).ready(function () {
$(".proDocs").click(function() {
 $(this).children( "ul" ).toggleClass( "hidden" );
});
});

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>

Answer 1

.proDocs, , , bubbling, , .

, stopPropagation(), :

$(document).ready(function() {
  $(".proDocs").click(function(e) {
    e.stopPropagation();
    $(this).children("ul").toggleClass("hidden");
  });
});

---

_{: return false preventDefault()   ,}

Answer 2

, .

html

<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>

javascript

$(document).ready(function () {
    $(".proDocs").click(function() {
        $(this).children( "ul:first-child" ).toggleClass( "hidden" );
      return false;
    });
});

,

.