Collapsible WordPress Comment Section

Do you want to know how to make the entire comment section collapsible on your WordPress site?

If you are using a theme provided by SMThemes.com same on this blog site, you can follow the steps below to accomplish it.

Collapsible Comment Section

Install Collapse-O-Matic

First, download and install Collapse-O-Matic plugin. Log-in to your WordPress dashboard. Go to Plugins- Add New then Search Collapse-O-Matic.

After installing and activating the plugin, proceed to the next step below.

Edit Comments.php File

Copy the code below. Go to Appearance – Editor – Comments.php on your WordPress dashboard.

<span class="collapseomatic" id="comments<?php the_ID(); ?>">Open Message Board</span>
<span id="swap-comments<?php the_ID(); ?>" class="collapseomatic" style="display: none;">Close</span>
<div id="target-comments<?php the_ID(); ?>" class="collapseomatic_content">

Add it before <?php if ( have_comments() ) { ?>

Scroll down. Insert </div> at the end of the file then click Update File.

Go to your site and check the comment section. Click ‘Open Message Board’ to expand the comments and form. Click ‘Close’ to hide or collapse it again. Check the comment section below this post to see how it works.

By default, the comment section is collapsed when a visitor lands on a page on your website. It helps in saving space. Plus, it will make your site neat and uncluttered.

Customization

If you want to change the font, size, color etc of the title that triggers the accordion effect, you may add your own CSS styling in Settings - Collapse-O-Matic. Other effect settings like Collapse & Expand Duration and Animation Effect are available on the same page as well.

You can change the title to whatever you want by editing the code provided above.

Disclaimer: This guide is created for SMThemes users. If you are using a different theme, you can follow this but we can’t guarantee that it will work 100%. Feel free to play the code !

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back to top ▴