MORE/LESS TOGGLE – Add Transition – Shopify/Javascript

I Have created a More/Less toggle button for which I have used https://jadepuma.com/blogs/blog/more-less-toggles-for-shopify-descriptions.

It works, but want to create a transition. When click read more button, it slowly opens the rest of the content. And click read less it slowly shuts.

This is what I am after, when button is toggled, it slowly reveals and closes the content: codepen.io/royketelaar/pen/avWxve

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

   <script>
            $( ".product-description-full" ).hide();
        
          $( document ).ready(function() {
          $('.readmore').click(function (event) {
              event.preventDefault();
              var descriptionFull = document.querySelector('.product-description-full');
              descriptionFull.style.display = 'block';
              var descriptionShort = document.querySelector('.product-description-short');
              descriptionShort.style.display = 'none';
                    });
            $('.readless').click(function (event) {
              event.preventDefault();
              var descriptionFull = document.querySelector('.product-description-full');
              descriptionFull.style.display = 'none';
              var descriptionShort = document.querySelector('.product-description-short');
              descriptionShort.style.display = 'block';
            });  
            });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<h2>This is a read more/less button demo</h2>

<p>This paragraph is above the read more/less button. </p>

<div class="product-description-short lessmore"><a href="#" class="readmore">Read More</a></div> <div class="product-description-full">

<h3>This header is below the read more button</h3>

<p>This paragraph is below the read more button. This is text to fill in space</p>


<div class="lessmore"><a href="#" class="readless">Read Less</a></div> </div>

Answer

$( ".product-description-full" ).hide();
        
          $( document ).ready(function() {
          $('.readmore').click(function (event) {
              event.preventDefault();
              var descriptionFull = document.querySelector('.product-description-full');
              $(descriptionFull).show(500, 'swing');
              var descriptionShort = document.querySelector('.product-description-short');
              $(descriptionShort).hide(500, 'swing');
                    });
            $('.readless').click(function (event) {
              event.preventDefault();
              var descriptionFull = document.querySelector('.product-description-full');
              $(descriptionFull).hide(500, 'swing');
              var descriptionShort = document.querySelector('.product-description-short');
              $(descriptionShort).show(500, 'swing')
            });  
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<h2>This is a read more/less button demo</h2>

<p>This paragraph is above the read more/less button. </p>

<div class="product-description-short lessmore"><a href="#" class="readmore">Read More</a></div> <div class="product-description-full">

<h3>This header is below the read more button</h3>

<p>This paragraph is below the read more button. This is text to fill in space</p>


<div class="lessmore"><a href="#" class="readless">Read Less</a></div> </div>

The Hide/Show Functions

$(element).hide/show(time(optional), easing(optional), callback(optional))

If you ignore all of the arguments except element, the function will do the same thing as what you did. These arguments can support these values:

Argument	Supports(Depends on Browser)
element	variable/element from HTML document
time	number of milliseconds / ‘fast’ / ‘slow’
easing	‘linear’ / ‘swing’
callback	function/action to do after hide/show function finishes

For example, this hide function

$("help-btn").hide(1000, 'linear');

will make a transition to hide the help button for 1 second at a constant speed.

While this show function

$("nav-bar").show(750, 'swing', function(){console.log("Transition Finished");});

will make a transition to show the navigation bar for 3/4 second at a slightly changing and easing speed. After the transition, it will write in the console “Transition Finished”.