There is a simple list

<ol id="commentlist"> <li class="comment byuser"> Comment 1 <ul class="children"> <li>Subcomment 1.1</li> <li>Subcomment 1.2</li> <li>Subcomment 1.3</li> </ul> </li> <li class="comment byuser"> Comment 2 <ul class="children"> <li>Subcomment 2.1</li> <li>Subcomment 2.2</li> </ul> </li> </ol>

And the code that adds the "More comments" link if there is a .children inside li.

 $(document).ready(function() { $('.comment .children').parent('.comment') .after('<a rel="nofollow" class="toggleCom" href="#" class="comment-reply-link">Еще комментарии</a>'); //По клику на любую ссылку раскрываются все .children, а необходимо только для конкретной кнопки $(".toggleCom").on("click", function(e){ $(".children").slideToggle(); }); });

Can you please tell me how to make the link on the link hide and open the .children list?

Updated the question.

  • 3
    Possible duplicate question: Expanding and collapsing the form jQuery - Arsen
  • added to onclick $ (". children", this) .toggle (); - does not work - dexploizer
  • $ (this) .find ('. children'). toggle () - lazyproger
  • $ (this) .find ('. children'). toggle () - does not work. The class children is not inside this link, it is located along with the link in the class comment - dexploizer

1 answer 1

Damn, while I explained to you - I myself decided how to do it)) Here is the answer

$ (". toggleCom"). on ("click", function (e) {$ (this). parent ('. comment'). find ('. children'). slideToggle ();});