[Resolved] Add a toggle button to show / hide comments

[Sebastien]

Hi,

Is there a simple way to add a “show comments” toggle button on all my blog posts and pages please? Sometimes there are too many comments, and I just want to hide them unless the reader really wants to read them.

And thanks for this amazing theme, I am loving it so far!

Many thanks
sebastien

[David]

Hi there,

the Volume Site has this toggle:

https://gpsites.co/volume/sample-post/

Is that something similar to what you need?

[Sebastien]

Hi,

Thank you for your response. Yes this would work. How can I implement this in my theme please?

[David]

First you need to create a new Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Add this to the Hook Content:

<label class="switch">
  <input type="checkbox" name="c1" onchange="showMe('comment-list', this)"/>
  <span class="slider"><!--toggle--></span>
</label>

<script>
function showMe (it, box) {
  var vis = (box.checked) ? "none" : "block";
  document.getElementsByClassName(it)[0].style.display = vis;
}
</script>

Select the below_comments_title hook.

Set the display rules to Post > All Posts

Then this CSS:

/* Show Hide Comments Toggle */

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    display: none;
}
.slider, .slider:before, .slider:after {
	position: absolute;
}
.slider {
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
    z-index: 1
}

.slider:after {
    content: "SHOW HIDE";
    font-size: 0.4em;
    line-height: 34px;
    margin-left: 0.45em;
    color: #fff;
    letter-spacing: 0.05em;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    transform: translateX(26px);
}

To have the List hidden by default change this line in the HTML:

<input type="checkbox" name="c1" onchange="showMe('comment-list', this)"/>

to:

<input type="checkbox" name="c1" onchange="showMe('comment-list', this)" checked/>

And add this additional CSS:

.comment-list {
    display: none;
}

[Sebastien]

Thank you David.

What hook am I adding this to excactly please? Is it hook after_content or before_comments?

Many thanks
sebastien

[David]

I edited the post above to include the Hook ( oops 🙂 )

[Sebastien]

Thank you, I had to tweak the css a bit but it is working well. How can I have the comments hidden by default please?

[epickenyan]

You can try this plugin too https://wordpress.org/plugins/lazy-load-for-comments/.

[David]

I edit this reply to include how to do set as checked by default:

https://generatepress.com/forums/topic/add-a-toggle-button-to-show-hide-comments/#post-871370

[Sebastien]

This is perfect! Thank you 🙂

[David]

Glad to be of help

[Rogi]

Hi David!

Thank you so much for sharing that hook. It is very useful.

Would it be possible to use this hook with a single button instead of a checkbox?

By clicking the button shows the comments and by clicking the button again hides the comments, and vice versa.

Thank you.

[Tom]

Hi there,

That would require javascript.

However, you can make a checkbox look like a button: http://jsfiddle.net/zAFND/2/

More info on the code here: https://stackoverflow.com/questions/7642277/css-styled-a-checkbox-to-look-like-a-button-is-there-a-hover

[Mallory]

Hi, I’m having troubles implementing this, when I add everything, the words “show comments” are slightly blocked by the toggle switch. Can I have the words just clickable with no toggle?

[Tom]

Hi there,

Can you link us to your website so we can take a look?

Thanks! 🙂

[Author]

Posts