jQuery show/hide only works on first selector

Question

I'm trying to make a show hide function for my table. The problem is that the jQuery only seems to work for the first selector and no others.

Can anyone help me with this problem?

jQuery :

jQuery("document").ready(function($) {
    $("#paragraph-div").hide();

    $("#toggle-div").click(function() {
        if ($("#paragraph-div").is(":visible")) {
           $("#paragraph-div").hide();
            $("#toggle-div").val("Less Info");
        } else {
            $("#paragraph-div").show();
        }
    });
});

HTML :

<table>
    <tr>
        <td>data</td>
    </tr>
    <tr>
        <td>
            <a id="toggle-div">More Info</a>
            <div id="paragraph-div">
                <p>Hidden text - Toggle more info to show.</p>
            </div>
        </td>
    </tr>
    <tr>
        <td>data</td>
    </tr>
    <tr>
        <td>
            <a id="toggle-div">More Info</a>
            <div id="paragraph-div">
                <p>Hidden text - Toggle more info to show.</p>
            </div>
        </td>
    </tr>
    <tr>
        <td>data</td>
    </tr>
    <tr>
        <td>
            <a id="toggle-div">More Info</a>
            <div id="paragraph-div">
                <p>Hidden text - Toggle more info to show.</p>
            </div>
        </td>
    </tr>
</table>

Answer 1

Working fiddle

id should be unique in same document, replace the duplicate once by general class, eg :

<a class="toggle-div">
<div class="paragraph-div">

Instead of :

<a id="toggle-div">
<div id="paragraph-div">

Then use class selector . in your js instead of id selector :

$(".toggle-div")
$(".paragraph-div")

Instead of :

$("#toggle-div")
$("#paragraph-div")

NOTES :

• You could use $(this) inside event instead of ".toggle-div"
• You should use $(this).next(".paragraph-div") to select the related paragraph with clicked link.
• The div tag haven't a val() method you should use text() instead.

Hope this helps.

---

Snippet

 jQuery("document").ready(function($) { $(".paragraph-div").hide(); $(".toggle-div").click(function() { if ($(this).next(".paragraph-div").is(":visible")) { $(this).next(".paragraph-div").hide(); $(this).text("More Info"); } else { $(this).next(".paragraph-div").show(); $(this).text("Less Info"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>data</td> </tr> <tr> <td><a class="toggle-div">More Info</a><div class="paragraph-div"><p>Hidden text - Toggle more info to show.</p></div></td> </tr> <tr> <td>data</td> </tr> <tr> <td><a class="toggle-div">More Info</a><div class="paragraph-div"><p>Hidden text - Toggle more info to show.</p></div></td> </tr> <tr> <td>data</td> </tr> <tr> <td><a class="toggle-div">More Info</a><div class="paragraph-div"><p>Hidden text - Toggle more info to show.</p></div></td> </tr> </table> 

Answer 2

I think you're looking for something like this :

 jQuery("document").ready(function($) { $(".paragraph-div").hide(); $(".toggle-div").click(function() { var $this = $(this); var $paragraph = $this.next('.paragraph-div'); if ($paragraph.is(":visible")) { $paragraph.hide(); $this.html("More Info"); } else { $paragraph.show(); $this.html("Less Info"); } }); }); 

 <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script> <table> <tr> <td>data</td> </tr> <tr> <td> <a class="toggle-div">More Info</a> <div class="paragraph-div"> <p>Hidden text - Toggle more info to show.</p> </div> </td> </tr> <tr> <td>data</td> </tr> <tr> <td> <a class="toggle-div">More Info</a> <div class="paragraph-div"> <p>Hidden text - Toggle more info to show.</p> </div> </td> </tr> <tr> <td>data</td> </tr> <tr> <td> <a class="toggle-div">More Info</a> <div class="paragraph-div"> <p>Hidden text - Toggle more info to show.</p> </div> </td> </tr> </table> 

(see also this Fiddle )