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 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.


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 !

Join the Conversation

1 Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Hello,

    Perfect! Just what I wanted to implement in the comments section. Thank you! :)

    I was wondering is it possible to have auto-scroll effect somehow on this to focus on the expanded comments or rather on the Leave a Reply section?

    I was playing around, but could not make it work. Hope you have a way. :)