How to target a div with a same ID

Question

I currently have some ASP.Net code that builds an output and then displays it through a string literal. The idea is that for every Receipt , there is a 'view more' button which toggles extra information that is display: none; to start with. I tried to use the eq() method to attempt to find which one I wanted to toggle because I am doing that inside the ul . My current code is this:

$("#btn-expand").click(function () {
    var ldx = $("#list li .active").index(); // Get the list number so we know what ID to work with
    var idx = $("#expand").next().index(); // Get the next ID index point

    // Check that it isn't going negative
    if (idx == -1 || ldx == -1) {
        // If it is, reset ldx
        ldx = 0;
        idx = 0;
    }

    $("#expand").eq(ldx).toggle(); // Toggle that one
    console.log(ldx);
});

The first button works fine and console.log shows 0 however, all the others do not show anything. A sample of my HTML looks like this:

<ul id="list">
    <li class="active">
        Something <br />
        Something Again <br />
        <span id="btn-expand">[View more]</span>
        <div id="expand">
            Something hidden
        </div>
     </li>
     This <br />
     Shows <br />
     <span id="btn-expand">[View more]</span>
     <div id="expand">
         This is hidden until toggled
     </div>
     <li></li>
</ul>

There is a lot more li elements in the ul but that is how it is structured. I am also using <span class="btn" id="btn-next">Next</span> to loop through each li in the ul so I am really confused why the same method for doing it with the `#expand' won't work.

If anyone could point me in the right direction, I'd be appreciated. Thanks.

 $(document).ready(function() { $("#btn-next").click(function() { var $list = $("#list li"); var idx = $(".active").removeClass("active").next().index(); if (idx == -1) { idx = 0; } $list.eq(idx).addClass("active"); }); $("#btn-prev").click(function() { var $list = $("#list li"); var idx = $(".active").removeClass("active").prev().index(); if (idx == -1) { idx = 0; } $list.eq(idx).addClass("active"); }); $("#btn-expand").click(function() { // Get the list number so we know what ID to work with var ldx = $("#list li .active").index(); // Get the next ID index point var idx = $("#expand").next().index(); // Check that it isn't going negative if (idx == -1 || ldx == -1) { // If it is, reset ldx ldx = 0; idx = 0; } // Toggle that one $("#expand").eq(ldx).toggle(); console.log(ldx); }); }); 

 #list { list-style: none; } .active { display: block; } #btn-expand { cursor: pointer; font-size: 9px; margin-left: 10px; } #expand { display: none; } li { display: none; } .btn { background: none; padding: 10px; border: 1px solid #000; margin-left: 50px; cursor: pointer; } 

 <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <ul id="list"> <li class="active"> Something here <br />Something here again <span id="btn-expand"> [View More] </span> <br /> <br /> <span id="expand"> This is hidden, shh.. </span> </li> <li> You can see this <br />Toggling shouldn't effect me <span id="btn-expand"> [View More] </span> <br /> <br /> <span id="expand"> But toggling should effect me! </span> </li> </ul> <span class="btn" id="btn-prev">Prev</span> - <span class="btn" id="btn-next">Next</span> 

Answer 1

id should be unique in same document, replace the duplicate ones by general class, rg :

<ul id="list">
   <li class="active">
      Something <br />
      Something Again <br />
      <span class="btn-expand">[View more]</span>
      <div class="expand">
         Something hidden
      </div>
   </li>
      This <br />
      Shows <br />
      <span class="btn-expand">[View more]</span>
      <div class="expand">
         This is hidden until toggled
      </div>
   <li>
   </li>
</ul>

Then replace id selector # in you script by class selector . :

$(".btn-expand").click(function() {
    // Get the list number so we know what ID to work with
    var ldx = $("#list li .active").index();
    // Get the next ID index point
    var idx = $(".expand").next().index();
    // Check that it isn't going negative
    if (idx == -1 || ldx == -1) {
      // If it is, reset ldx
      ldx = 0;
      idx = 0;
    }
    // Toggle that one
    $(".expand").eq(ldx).toggle();
    console.log(ldx);
});

You could use just next() instead of all the code in your event :

$(this).next(".expand").toggle();
//OR
$(this).next().toggle();

Hope this helps.

---

 $(".btn-expand").click(function() { $(this).next(".expand").toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="list"> <li class="active"> Something <br /> Something Again <br /> <span class="btn-expand">[View more]</span> <div class="expand"> Something hidden </div> </li> <li> This <br /> Shows <br /> <span class="btn-expand">[View more]</span> <div class="expand"> This is hidden until toggled </div> </li> </ul> 

Answer 2

Change id's to classes and all you need then is:

$(".btn-expand").click(function() {
   $(this).next().toggle();
   $(this).text(function(_, oldText){
       return oldText.indexOf('More') === -1 ? 'View More' :'View Less';
   })
});

Answer 3

 $(document).ready(function() { $("#btn-next").click(function() { var $list = $("#list li"); var idx = $(".active").removeClass("active").next().index(); if (idx == -1) { idx = 0; } $list.eq(idx).addClass("active"); }); $("#btn-prev").click(function() { var $list = $("#list li"); var idx = $(".active").removeClass("active").prev().index(); if (idx == -1) { idx = 0; } $list.eq(idx).addClass("active"); }); $(".btn-expand").click(function() { // Toggle $(this).next().toggle(); }); }); 

 #list { list-style: none; } .active { display: block; } #btn-expand { cursor: pointer; font-size: 9px; margin-left: 10px; } li { display: none; } .btn { background: none; padding: 10px; border: 1px solid #000; margin-left: 50px; cursor: pointer; } .expand-inner { display:inline-block; width:100%; } 

 <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <ul id="list"> <li class="active"> Something here <br />Something here again <span class="btn-expand"> [View More] </span> <span style="display:none;"> <div class="expand-inner">This is hidden, shh..</div> </span> </li> <li> You can see this <br />Toggling shouldn't effect me <span class="btn-expand"> [View More] </span> <span style="display:none;"> <div class="expand-inner">But toggling should effect me!</div> </span> </li> </ul> <span class="btn" id="btn-prev">Prev</span> - <span class="btn" id="btn-next">Next</span>