How do i reference different paragraphs? Options

[tosh]

I'm using jquery to hide/show text

CODE

$(document).ready(function(){
    $("p").hide()
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});

CODE

<p>test1</p>
<button id="hide" style="position:absolute; top:7.7%; right:45%;  width:5%;">History: Show</button>
<button id="show" style="position:absolute; top:5%; right:45%;  width:5%;">Hide</button>

I want to have a different <p> such as "<p>test2<p>" where I can have two different buttons to hide and show. How do i reference the p separately? If my question isn't phrased properly let me know and i'll try again

[Christian J]

You mean you want a separate set of show/hide buttons for each P element? You might give each P a unique ID and reference that in the script, but that's a bit verbose if there are many sets. Instead you might use CLASS instead of ID like this:

CODE

$(document).ready(function(){
    $(".toggle p").hide()
    $(".toggle .hide").click(function(){
        $(this).siblings("p").hide();
    });
    $(".toggle .show").click(function(){
        $(this).siblings("p").show();
    });
});

<div class="toggle">
<p>test1</p>
<button class="show">History: Show</button>
<button class="hide">Hide</button>
</div>

<div class="toggle">
<p>test2</p>
<button class="show">History: Show</button>
<button class="hide">Hide</button>
</div>

The above should toggle P elements that are siblings of the BUTTON elements.

BTW I advice against using CSS percent positioning for the buttons, since that will give unexpected results in browsers windows of different sizes.