Jquery collapse expand effect

Question

Need a bit of guidance with my collapse/expand effect. My code is as follows.

<div class="buttons">
<a class="km-collapse-forms expand-all" href="#">Expand All</a>
<a class="km-collapse-forms collapse-all hide" href="#">Collapse All</a>                    
</div>


$args = array(...);

$comments_query = new WP_Comment_Query;
$comments       = $comments_query->query( $args );  

foreach ($comments as $comment) { 

<a class="respond-to-messages expand-form" href="#<?php echo $comment->comment_ID; ?>">Respond to message</a>
<a class="respond-to-messages collapse-form hide" href="#<?php echo $comment->comment_ID; ?>">Hide form</a>

<div id="comment-<?php echo $comment->comment_ID; ?>" class="comment-respond-form post-id-<?php echo $comment->comment_post_ID; ?> hide">
    <table>
        <tr>
            <form id="custom-comments-form" action="" method="post">

                //form fields

                <button class="uk-button" type="submit">Send</button>
            </form>
        </tr>
    </table>
    </div> 

}

Jquery:

jQuery(function ($) {   
    $(document).ready(function(){

        $(".km-collapse-forms.expand-all").show();      

        $('.km-collapse-forms.expand-all').on('click',function(){   

            // Expand/Collapse All
            $( ".km-collapse-forms.expand-all" ).addClass( "hide" );
            $( ".km-collapse-forms.collapse-all" ).removeClass( "hide" );

            // Change text respond/hide form
            $( ".respond-to-messages.expand-form" ).addClass( "hide" );
            $( ".respond-to-messages.collapse-form" ).removeClass( "hide" );

            $(".comment-respond-form").slideDown("slow");

        });     

        $('.km-collapse-forms.collapse-all').on('click',function(){ 

            $( ".km-collapse-forms.collapse-all" ).addClass( "hide" );
            $( ".km-collapse-forms.expand-all" ).removeClass( "hide" );

            $( ".respond-to-messages.collapse-form" ).addClass( "hide" );
            $( ".respond-to-messages.expand-form" ).removeClass( "hide" );

            $(".comment-respond-form").slideUp("slow"); 

        }); 



        // respond/hide form text :: single comment
        // This is where I'm having trouble with
        $('.respond-to-messages.expand-form').on('click',function(){

            $(this).next( ".respond-to-messages.collapse-form" ).removeClass( "hide" );
            $(this).next( ".respond-to-messages.expand-form" ).addClass( "hide" );

            $(this).next(".comment-respond-form").removeClass("hide");
            $(this).next(".comment-respond-form").slideDown("slow");

        });


        $('.respond-to-messages.collapse-form').on('click',function(){      
            $(this).next( ".respond-to-messages.collapse-form, .comment-respond-form" ).addClass( "hide" );
            $(this).next( ".respond-to-messages.expand-form" ).removeClass( "hide" );

            $(this).prev(".comment-respond-form").addClass("hide");
            $(this).next(".comment-respond-form").slideUp("slow");

        });



    });
}); 

The expand/collapse all work as intended but each individual Respond to comment/hide form doesn't while I would like that to work as well.

Any help is much appreciated.

Answer 1

Your code was a bit messy. I tried to quickly clean it up but there is some much to do to make it better. Take a look at Javascript "best practices".

Tips :

• Lots of unnecessary HTML elements
• Use functions
• Cache jQuery selectors
• Consider a javascript design pattern

Working solution: jsFiddle

JS:

jQuery(function ($) {   
    $(document).ready(function () {

        var $listElem = $('.accordion-elem');
        function showAll() {
            $listElem.each(function () {
            $(this).removeClass('hiddenElements');
            $(this).find('.respond-to-messages').text('Hide form');
            $(this).find('.comment-respond-form').slideDown("slow");
          });
        }

         function hideAll() {
            $listElem.each(function () {
            $(this).addClass('hiddenElements');
            $(this).find('.respond-to-messages').text('Respond to message');
            $(this).find('.comment-respond-form').slideUp("slow");
          });
        }

        $('.all-button').on('click',function () { 
                console.log("trigger");
            if ($(this).hasClass('expanded')) {
                hideAll();
              $(this).removeClass('expanded');
              $(this).text('Expand All');
            } else {
                showAll();
              $(this).addClass('expanded');
              $(this).text('Collapse All');
            }
        });

        $('.respond-to-messages').on('click', function () {
            var $targetLi = $(this).closest('li');
            if($targetLi.hasClass('hiddenElements')) {
            //Show
            $targetLi.removeClass('hiddenElements');
            $targetLi.find('.respond-to-messages').text('Hide form');
            $targetLi.find('.comment-respond-form').slideDown("slow");
          } else {
            //hide
            $targetLi.addClass('hiddenElements');
            $targetLi.find('.respond-to-messages').text('Respond to message');
            $targetLi.find('.comment-respond-form').slideUp("slow");
          }
        });


    });
}); 

HTML:

<div class="buttons">
  <a class="all-button expanded" href="#">Collapse All</a>              
</div>

<ul>
<li class="accordion-elem"> Lorem ipsum<br /><br />
  <a class="respond-to-messages" href="#">Hide form</a>
  <div id="comment-5" class="comment-respond-form">
 <table>
        <tr>
            <form id="custom-comments-form" action="" method="post">
                <textarea class="fes-cmt-body" name="newcomment_body" cols="50" rows="8"></textarea>
                <button class="uk-button" type="submit">Send</button>
            </form>
        </tr>
        </table></div>
    </li>

    <li class="accordion-elem"> Lorem ipsum<br /><br />
      <a class="respond-to-messages" href="#">Hide form</a>
      <div id="comment-6" class="comment-respond-form">
      <table>
        <tr>
            <form id="custom-comments-form" action="" method="post">
                <textarea class="fes-cmt-body" name="newcomment_body" cols="50" rows="8"></textarea>
                <button class="uk-button" type="submit">Send</button>
            </form>
        </tr>
        </table></div>
    </li>
    <li class="accordion-elem"> Lorem ipsum<br /><br />
      <a class="respond-to-messages" href="#">Hide form</a>
      <div id="comment-7" class="comment-respond-form">
       <table>
        <tr>
            <form id="custom-comments-form" action="" method="post">
                <textarea class="fes-cmt-body" name="newcomment_body" cols="50" rows="8"></textarea>
                <button class="uk-button" type="submit">Send</button>
            </form>
        </tr>
        </table></div>
    </li>
</ul>