Add “Read-More” Toggle Using jQuery

A friend of mine was editing her Shopify files to try and add a “View Product Details” button, that would toggle the specific products description. She asked for my help on how this could be achieved and I decided to share it for everyone to view!

The HTML

<div id="desc">
    <p class="clk">View Product Details</p>
    <div class="prod-details">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis.</span>
    </div>
</div>
<div id="desc">
    <p class="clk">View Product Details</p>
    <div class="prod-details">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis.</span>
    </div>
</div>

The JavaScript

$(function() {
    $('.prod-details').hide();
    $('.clk').click(function() {
      $(this).siblings('.prod-details').toggle();
    });
});

Now whenever you click on “View Product Details”, it will toggle its siblings with the class “prod-details”. A simple read-more toggle!