Multiple flyouts using jQuery

Question

I want to create multiple flyouts in a single HTML page using jQuery. Please have a look at the code below.

<div>123
    <p style="display:none">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
    </p>
</div>
<div>ABC
    <p style="display:none">
        <a href="#">a</a>
        <a href="#">b</a>
        <a href="#">c</a>
    </p>
</div>

For now, there are only two divs that have different content. I want, when the div is clicked, p tag (nested inside it) to show/hide.

My knowlwdge of jquery is very limited and to achieve it my jquery code is like this.

<script>
$(document).ready(function(){
  $("div").click(function(){
    $(this p).toggle();
  });
}); 
</script>

Which, of course is not working. Also there may be more than two divs on the same page and would have similar flyout.

What should I do to achieve this?

Any help would be greatly appreciated.

Thanking you in anticipation.

Regards Parvez A.

Answer 1

HTML Tweaked:

<div class="toggle_this">123
    <p style="display:none">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
    </p>
</div>
<div class="toggle_this">ABC
    <p style="display:none">
        <a href="#">a</a>
        <a href="#">b</a>
        <a href="#">c</a>
    </p>
</div>

Javascript:

$(document).ready(function(){

    $(".toggle_this").click(function(){
        console.log('divs been hit');
    $(this).children().toggle();
  });

}); 

Please refer the working code in the link: http://jsfiddle.net/UaCLn/5/