javascript - Target problems in JQuery -


i have problem. have similar divs same classes. when click on (toggle#1) .comments-toggle class need div below .toggle-container expand. code stands trigger .toggle-container div below (toggle#1) div expand.

how click on toggle#1 , div below class toggle-container expand , not divs class toggle-container?

*** edited html ****

i need jquery changed, please don't change html solution.

i hope make sense.

html:

<div>   <div class="comments-toggle">toggle #1</div> </div>  <div>    <div class="comments-expanded-container toggle-container">      <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiumdod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation</p>  </div>  </div>   <div>    <div class="comments-toggle">toggle #2</div>  </div>  <div>    <div class="comments-expanded-container toggle-container">   <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiumdod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation</p>   </div>  </div> 

css:

.comments-expanded-container { display: none; }  .expand { display: inline-block; } 

jquery:

 (function () {      $('.comments-toggle').on('click', function(event) {          $('.toggle-container').toggleclass('expand');      }) })(); 

js fiddle: https://jsfiddle.net/jakwakwa/c2ogevff/

*** edited html ****

use $(this).next() inside click listener target next toggle-container - see demo below:

(function() {    $('.comments-toggle').on('click', function(event) {      $(this).next('.toggle-container').toggleclass('expand');    })  })();
.comments-expanded-container {    display: none;  }    .expand {    display: inline-block;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="comments-toggle">toggle #1</div>    <div class="comments-expanded-container toggle-container">    <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiumdod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation</p>  </div>    <div class="comments-toggle">toggle #2</div>    <div class="comments-expanded-container toggle-container">    <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiumdod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation</p>  </div>


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -