JQuery Click the first one item and the other same class toggle

Question

I want to click the first one item("title1"), and toggle the content next to the other same class.

Can anyone tell me what I should do? Thank you very much.

(My English isn't very good, please don't mind.)

It's my html:

<ul>
  <li class="title1"></li>
  <li class="content"></li>
</ul>
<ul>
  <li class="title1"></li>
  <li class="content"></li>
</ul>
 <ul>
  <li class="title1"><</li>
  <li class="content"></li>
</ul>

js:

 $(".title1").eq(0).click(function() {
     $(".title1").not(':eq(0)').next(".content").toggle();
 });

Answer 1

I think you want something like this:

 $(".content").toggle(); $(".title1").click(function() { $(this).next().toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="title1">title1</li> <li class="content">content</li> </ul> <ul> <li class="title1">title2</li> <li class="content">content</li> </ul> <ul> <li class="title1">title3</li> <li class="content">content</li> </ul>

When your li elements contains multiple class names then it is best way:

 $(".content").toggle(); $("li").click(function(){ $(this).attr("class").split(" ").map((c)=>{ // separate each class name /title\\d+/.test(c) ? $("."+c).next().toggle() : {}; //check for class names like title1,title(n) if exist then expand next content }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="title1 b">title1</li> <li class="content">content</li> </ul> <ul> <li class="title1">title1</li> <li class="content">content</li> </ul> <ul> <li class="title1 e">title1</li> <li class="content">content</li> </ul> <ul> <li class="title2">title2</li> <li class="content">content</li> </ul> <ul> <li class="title2">title2</li> <li class="content otherclassname">content</li> </ul>

Answer 2

You can achieve it in this way.

 $(".title1, .title2").click(function() { var className = $(this).attr("class"); $("." + className).next().toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="title1">title1</li> <li class="content">content</li> </ul> <ul> <li class="title2">title2</li> <li class="content">content</li> </ul> <ul> <li class="title2">title2</li> <li class="content">content</li> </ul>