CSS to always show comments (Tudor template)

In the Tudor template, comments on pages are hidden and you have to click the "Leave a comment/ Show X comments" link to show the comment field and the comments. I am looking to make it so that those are displayed by default without the need to click on that link.

Anybody have any experience doing this either on Tudor, or even any other templates that do the same thing with comments, they could throw my way?

tia

Go to Settings / Advanced / Code Injection and copy-paste this in the Footer section:

<script>
document.getElementsByClassName("blog-item-comments-toggle")[0].click();
</script>

I am trying to do the same on the 'Charlotte' template. I tried to use the same code bit it didn't seem to do anything. Any suggestions?

Thanks in advance.

Worked for me using the Ready template, thank you!

use your page inspector tool and look at the class name for the text that displays/hides the comments. If it's not .blog-item-comments-toggle then update that class name in the JS code supplied by tazmeah

For those that want a slightly cleaner approach you should check for the existence of the element first. Otherwise you will get JS errors on pages that don't have a comment section. I think the best way would be to figure this out in CSS instead of JS but in the meantime this is a cleaner approach.

<script>
 var commentSection = document.getElementsByClassName("blog-item-comments-toggle");
 if (commentSection.length){
   commentSection[0].click();
 }
</script>

If anyone's figured out how to do this on CSS, would be amazing! thanks! :)

Thank you - works great!

On 2/1/2018 at 4:28 AM, fangirlinterrupted said:

If anyone's figured out how to do this on CSS, would be amazing! thanks! 🙂

Is it possible to show the comments box in CSS? Would be great! 

I'm also using the Tudor template: https://www.plaatsmaker.be/artikels-blog/hoe-makers-groeien

Thanks in advance!

On 11/2/2020 at 3:56 PM, Raflehaen said:

Is it possible to show the comments box in CSS? Would be great! 

I'm also using the Tudor template: https://www.plaatsmaker.be/artikels-blog/hoe-makers-groeien

Thanks in advance!

Add to Home > design > Custom CSS

#blogItemCommentsContent {
    opacity: 1 !important;
    height: auto !important;
}
label.blog-item-comments-toggle {
    display: none;
}
div#blogItemCommentsContent {
    pointer-events: auto;
}

5 hours ago, tuanphan said:

Add to Home > design > Custom CSS

#blogItemCommentsContent {
    opacity: 1 !important;
    height: auto !important;
}
label.blog-item-comments-toggle {
    display: none;
}

 

Thanks @tuanphan! You made my day!

5 hours ago, tuanphan said:

Add to Home > design > Custom CSS

#blogItemCommentsContent {
    opacity: 1 !important;
    height: auto !important;
}
label.blog-item-comments-toggle {
    display: none;
}

 

As said, thank you very much!

I was happy to see the comment box as a default, but it's not possible to comment anymore.

Do you think we can do something about this?

Tnx!

On 11/2/2020 at 11:54 AM, tuanphan said:

Add to Home > design > Custom CSS

#blogItemCommentsContent {
    opacity: 1 !important;
    height: auto !important;
}
label.blog-item-comments-toggle {
    display: none;
}

 

I've tried this code and it does display the comment box however it is not possible to type into it so commenting is technically disabled. Any suggestions?

On 3/23/2021 at 9:55 PM, Zineta said:

I've tried this code and it does display the comment box however it is not possible to type into it so commenting is technically disabled. Any suggestions?

Can you share link to a blog post? We can check it again easier

On 3/25/2021 at 8:06 AM, tuanphan said:

Can you share link to a blog post? We can check it again easier

I have removed the code since the comments didn't work. 

https://www.wearecravingadventure.com/blog/new-zealand/milford-sound

On 3/27/2021 at 8:31 PM, Zineta said:

I have removed the code since the comments didn't work. 

https://www.wearecravingadventure.com/blog/new-zealand/milford-sound

Hi. Use this new code

#blogItemCommentsContent {
    opacity: 1 !important;
    height: auto !important;
}
label.blog-item-comments-toggle {
    display: none;
}
div#blogItemCommentsContent {
    pointer-events: auto;
}

How can I do this in Avenue template? nothing here seems to work

21 hours ago, charbar said:

How can I do this in Avenue template? nothing here seems to work

Can you share link to a blog post on your site? WE can check easier

The new code works great, thank you @tuanphan