Show() corresponding child

Show() corresponding child

I finally started to get my hands dirty with a Javascript framework, and decided jQuery is the way to go. I used to solve my questions with some heavy Google search actions, but Google couldn’t come up with a answer on this one ;-)

I’m trying to show the child element when clicking on a div.

Using the following JS

$(document).ready(function(){

   $(".faq_box").click(function () {
      $(".display_none").show("slow");
   });
   
});


And the following code of HTML

<div class="faq_box">
      <h3>Lorem Ipsum Dolar</h3>
      
      <div class="display_none">
      
         Lorem Ipsum Dolar
      
         <ul>
            <li><strong>GLorem Ipsum Dolar</strong><br />
               Lorem Ipsum Dolar
            </li>
            <li><strong>Lorem Ipsum Dolar</strong><br />
               Lorem Ipsum Dolar
            </li>
            <li><strong>VLorem Ipsum Dolar</strong><br />
               Lorem Ipsum Dolar
            </li>
            
         </ul>
      </div><!-- end display_none -->
   </div><!-- end faq_box -->

<h3>Lorem Ipsum Dolar</h3>
      
      <div class="display_none">
      
         Lorem Ipsum Dolar
      
         <ul>
            <li><strong>GLorem Ipsum Dolar</strong><br />
               Lorem Ipsum Dolar
            </li>
            <li><strong>Lorem Ipsum Dolar</strong><br />
               Lorem Ipsum Dolar
            </li>
            <li><strong>VLorem Ipsum Dolar</strong><br />
               Lorem Ipsum Dolar
            </li>
            
         </ul>
      </div><!-- end display_none -->
   </div><!-- end faq_box -->


The class class="display_none" is used to add the display: none; CSS markup.

-----

This codes works perfectly, except that is shows all .display_none divs instead of only the child of the .faq_box div being clicked upon.

I’ve tried all (in my eyes) possible selectors mentioned in the docs, but I can’t seem to get it right. Anyone who could push me in to the right direction?

Have a good one.