[WP Show/Hide] 'Show More / Less' implementation using WP's own more tag button -- needs comments.js to read comments #WP #Jquery #showmore

wp-show-hide.js

      //Checking div for a shorcode and doing work to hide everything after it

      //Set Some naming and labels

      let wrapOptions = {
        moreButtonText:     'Show More',
        lessButtonText:     'Show Less',
        buttonClass:        'readMoreButton',
        wrapperClass:       'wrapAllText',
        wrapperClosedClass: 'wrapAllText__hidden',
        readMoreClass:      'readMoreTag',
        lastChildEle:       'lastElement',
        stopperClass:       'stopper'
      }

      let wo = wrapOptions;

      // Set the target Divs that may contain the triggering tag
      let targetSels = '.extra-info-text, .main-block, .block-text';

      // Loop through each target Div on the page
      $( targetSels ).each(function(){

        // Count the elements inside the div
        let totalEle = $(this).children().length;

        // length is not zero indexed, so set the counter to 1. 
        let eleNum = 1;


        // Interate through each child element to see if it contains the target tag
        $(this).children().each(function(){

          //use the comments JS to make HTML comments available to the DOM (Wordpress uses comments to enable 'more...' behaviour)
          var comments = $( this ).comments();

          if ( comments.html() === 'more' )  { // if the targe tag is present

            $(this).addClass(wo.readMoreClass); // add a class to make it more DOM freindly 

          };

          if (eleNum === totalEle ) { // If we have reached the last child element
            $(this).addClass(wo.lastChildEle); // make that DOM friendly

          }

          eleNum ++; // Up the counter

        });

      });


      /** After the first loop we loop again to make the changes we need:
       * 
       * 1. Check for the 'Read More' class
       * 2. Place a stopper at the end of the child elements
       * 3. Wrap everything after the 'Read More' class and before the stopper in a div that we can show / hide
       * 4. Place a button to toggle the behaviour
       * 
       **/
      $( targetSels ).each(function(){ 

        if($(this).find( '.' + wo.readMoreClass).length > 0) {
          $(this).find( '.' + wo.lastChildEle ).after('<span class="' + wo.stopperClass + '"></span>');

          $(this).find( '.' + wo.readMoreClass ).nextUntil( '.' + wo.stopperClass ).wrapAll('<div class="' + wo.wrapperClass + ' ' + wo.wrapperClosedClass + '">');    
          $(this).find( '.' + wo.stopperClass  ).after('<button class="' + wo.buttonClass + '">' + wo.moreButtonText + '</button>');

        }

      });


	//Toggle Show and Hide on button click

      $(document).on("click", "." + wo.buttonClass , function() {

        let targetWrapper = $(this).siblings('.' + wo.wrapperClass);

        if ( ( targetWrapper ).hasClass( wo.wrapperClosedClass ) ) {
          targetWrapper.slideDown(200).removeClass( wo.wrapperClosedClass );
          $( this ).text(wo.lessButtonText);
        } else {
          targetWrapper.slideUp(200).addClass( wo.wrapperClosedClass );
          $( this ).text(wo.moreButtonText);
        }
 
      });