Collapsible is open when page loads

Question

I installed Disqus as a plugin for a test webpage, which is supposed to go on individual posts. Because of this, I made a collapsible with a button that says "Show comments", so that I can hide the plugin when the page loads, but you can see comments for a post once you click "Show comments". I used the collapsible example from w3schools, which has the collapsible closed by default. For some reason, it doesn't do the same with mine, and whenever I load the page, the collapsible is open. It otherwise works as normal. I've tried a few solutions from other questions similar to mine, which haven't worked, but also, since I'm not good at Javascript I could be doing it all wrong. I'm also wondering if it's because the content of the collapsible is a plugin and that is why it is kept open, but again, I'm not really sure how it works. Here is the webpage:

https://appcom.webaddict.com.au/IT011/studentmasters/Site/explore.html

If you'd like to check the stylesheet too, here: https://appcom.webaddict.com.au/IT011/studentmasters/Site/createstylesheet.css

edit: I found that the class didn't have a period in front of it, so I fixed that, and it has the display set to none but it still doesn't work, so I'm not sure what to do.

I'll see if i can copy and paste the code in.

<button type="button" class="collapsible">Show Comments</button>
            <div class="comments" id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://studentmasters.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

        <script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

and the css for comments looks like this:

.comments {
  display: none;
  overflow: hidden;
}

add css to `.comments` class `display:none;` that will solve your problem, because when you start page will be hidden the div. — Simone Rossaini, Nov 05 '20 at 07:12
links can become invalid in future, please post short summary or code snippets directly to the questions — zhisme, Nov 05 '20 at 08:01

Liam Pillay · Answer 1 · 2020-11-06T02:25:37.117

Add display: none; to <div class="comments" id="disqus_thread" style="display: none;"></div>

I cannot replicate your issue with the code you have provided, the display: none; on your comments class works fine for me.

For the functionality you are after I wouldn't recommend putting display:none; in your comments class in your CSS.

As you are importing someone else's HTML your CSS is likely getting overrided.

The JS code you are using also affects the inline styles, not the class styles.

// Your comments code
(function() {
  var d = document,
    s = d.createElement('script');
  s.src = 'https://studentmasters.disqus.com/embed.js';
  s.setAttribute('data-timestamp', +new Date());
  (d.head || d.body).appendChild(s);
})();

// Your show/hide code
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

.comments {
  overflow: hidden;
}

<button type="button" class="collapsible">Show Comments</button>
<div class="comments" id="disqus_thread" style="display:none;"></div>

Collapsible is open when page loads

1 Answers1