Okay
  Public Ticket #194341
Show/Hide Comments (toggle)
Closed

Comments

  • Erik started the conversation

    Hello,

    I would like to add a toggle to show/hide the comment section (comments + comment form) on every article of my blog. Do you know a trick ?

    It could be great as an option in Salient for bloggers.

    I worked out this :

    <    a class="nectar-button medium accent-color has-icon" href="#" data-color-override=« false" style="cursor:pointer" onclick="jQuery('#comments').toggle();">Commentaires<    /span> <   i class="icon-comments"><  /i><  /a>

    But I have two problems with it :

    1) It hides only the words "X Comment(s)" and not comments themselves (and furthermore the comment form).

    2) It's "showing" by default and not hiding (what I want to do).

    Cheers,

  •  8,939
    Tahir replied

    Hey Erik!

    Most people do not use the default comments so such functionality is not needed. You can use Disqus commenting system which works great. 

    Cheers


    ThemeNectar Support Team 

  • Erik replied

    I installed Disqus, but I still want to hide the comment section by default. The Next Web (powered by Wordpress) does it (hide Disqus) on this article for example. The objective is that only people who want to discuss open the comment section, others can access footer, related articles, ... without being disturbed by comments.

    Do you know how can I do this with Salient ? Thank you.

    Best Regards,

  • Erik replied

    Hi,

    I closed my issue. My goal was : create a button at the end of blog posts that acts as a toggle to reveal the comments section (comments + Comment Form). In the meantime I installed Disqus so I wanted to hide all the disqus thread.

    First : in the Disqus Plugin, in file "disqus-comment-system/comments.php", on line 7, I changed : <div id="disqus_thread"> by <div id="disqus_thread" style="display:none;">

    Second : In salient file single.php, under the line <div class="comments-section">, I added : <a class="nectar-button medium accent-color has-icon" href="#" data-color-override="false" style="cursor:pointer" onclick="jQuery('#disqus_thread').toggle();"><span><?php comments_number( 'Soyez le premier à commenter', 'Un Commentaire', '% commentaires' ); ?></span> <i class="icon-comments"></i></a>

    It is in French but you can easily translate it. Be cautious when updating ... I am no pro so I edited files directly. If you know how to improve, you welcome.