Product:

Wonder Tabs

Tutorial:

This tutorial will guide you how to add a read more button to the WordPress tab content created by the Wonder Tabs plugin.

The Read More tag inserted into a WordPress post or page is specially handled by WordPress, it will not work in the tab content. To create a Read More button, we will need to add the button by ourselves and use JavaScript to show the extra content.

The created demo is as follows. In the first tab, you can click the Read More button to show the hidden content, and click the Read Less button to hide it. The second tab only has a Read More button.

There are two steps in this tutorial:

• Step 1 - Add read more and read less buttons, wrap the read more content in a div class
• Step 2 - Add Custom CSS and JavaScript to enable the read more function

Step 1 - Add read more and read less buttons, wrap the read more content in a div class

In this step, you can add the following code to the tab content to create a Read More button and a Read Less button. If you don't want the Read Less button, you can remove the line.

<button class="wonder-readmore">Read More</button>
<button class="wonder-readless">Read Less</button> 

You also need to wrap the content that you want to hide into a div with class name wonder-readmore-content:

<div class="wonder-readmore-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Step 2 - Add Custom CSS and JavaScript to enable the read more function

In the tab editor, go to the step 3 Options tab, Advanced Options, add the following code to the Custom CSS input box. The code will hide the Read Less button and the read more content by default.

.wonder-readmore-content {
display: none;
}

.wonder-readless {
display: none;
}

In the Advanced Options, add the following code to the Custom JavaScript input box. The code will activate the Read More and Read Less buttons.

(function($){
  $(document).ready(function() {
    $(".wonder-readmore").click(function() {
      $(this).hide();
      var parentPanel = $(this).closest(".wonderplugintabs-panel");
      parentPanel.find(".wonder-readless").show();
      parentPanel.find(".wonder-readmore-content").show();
    });

    $(".wonder-readless").click(function() {
      $(this).hide();
      var parentPanel = $(this).closest(".wonderplugintabs-panel");
      parentPanel.find(".wonder-readmore").show();
      parentPanel.find(".wonder-readmore-content").hide();
    });
  });
})(jQuery);