Show Only One Hidden Element

Show Only One Hidden Element

I have several divisions with a hidden division within them, like this:

<div class="show_display_none">
      Some text goes here.
      <div class="display_none">
            More text goes here.
      </div>
</div>
<div class="show_display_none">
      Some text goes here.
      <div class="display_none">
            More text goes here.
      </div>
</div>

The style sheet defines the class display_none like this:   .display_none { display: none; }

If a visitor clicks on one of the parent divisions (show_display_none), I want just the one hidden division (display_none) within that particular parent division to be displayed.

I have tried this jQuery script:

            $(document).ready(function() {
                $(".show_display_none").click(function() {
                        $(".display_none").animate({ height: 'show', opacity: 'show' }, 'slow');
                });
            })

With that script, if I click on one of the parent divisions ALL of the hidden divisions are shown. That's not what I want.

I tried several variations of the script using (this), but I just kept getting errors.

I would appreciate any advice!