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
Post a Comment