Question

I need to make a web page which has a dynamic number of paragraphs, and a corresponding number of info paragraphs.
I have put all the text in the “text” class, and all the info in the “info” class, each with an id increasing by 1 for each set.

Example:

<%
  for (int i =0; i<textOnPage.size(); i++){
%>
  <p class="text" id="text<%=i%>"><%=textOnPage.get(i) %></p>
  <p class="info" id="info<%=i%>"><%=infoToText.get(i) %></p>
<%  
  }
%>

I need to figure out how I in jQuery dynamically can get the id of that

the user clicks on, and toggles the corresponding info paragraph.
Something like this, but just dynamic:

$(document).ready(function(){

$('p.text#text2').click(function () {
   $ ('p.info#info2').slideToggle();
    });
});

Any help will be much appreciated.

Regards Sofus.

Answer 1

Relying on the fact that your info p.info is always directly after the text p.text

$('p.text').click(function() {
  $(this).next().slideToggle();
});

Or you could do something like this as well:

$('p.text').click(function() {
  $("#"+this.id.replace("text", "info")).slideToggle();
});