HTML collapsible closed by default-CodePudding

I am currently working on a website and am currently up to adding collapsibles. I am having some difficulty with collapsibles as shown:

body {
    align-self: center;
}

h1, p , body > ul, ol{
    text-align: center;
    align-self: center;
    background-color: rgba(255, 255, 255, 0.6);
    width: 40%;
    margin: 20px 29%;
    padding: 5px 3%;
}

h1 {
    font-family: 'Press Start 2P';
    font-size: 40px;
}

p, ul, ol {
    font-family: "Turret Road";
    font-size: 20px;
}

.collapsible {
  background-color: #eee;
  color: #000;
  cursor: pointer;
  padding: 8px;
  width: 90%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
        margin: 10px 5%;
}

.active, .collapsible:hover {
  background-color: rgba(255, 255, 255, 1);
}

<body>
    <button type="button" ><h1>Basic Rundown</h1></button>
    <div >
        <p>Vaporfest is inspired by internet music genres like vaporwave, future funk and eccojams.</p>
        <p>At Vaporfest, several artists will be performing music that will take you back to a better time.</p>
    </div>
    <button type="button" ><h1>What to bring</h1></button>
    <div >
    <ol>
        <li>Enough clothes for 5 days</li>
        <li>Recording equipment (if you want)</li>
        <li>Basic toiletries</li>
        <li>Anything else you think is neccesary</li>
    </ol></div>
    <button type="button" ><h1>Security measures</h1></button>
    <div >
    <p>Attendees will be tested for COVID every day.</p>
    <p>You have to be older than 18 to attend. </p>
    </div>
    <button type="button" ><h1>Rules about camping</h1></button>
    <div >
    <ol>
        <li>Be respectful at all times.</li>
    </ol></div>
    <button type="button" ><h1>Prohibited items</h1></button>
    <div >
    <ol>
        <li>Cutlery or hard plates</li>
        <li>Metal blades</li>
        <li>Gas tanks, gas cylinders, jerry cans</li>
        <li>Glass</li>
        <li>BBQ sets</li>
        <li>Unperscribed stimulants</li>
    </ol></div>
    <button type="button" ><h1>Getting there</h1></button>
    <div >
    <p>The festival site is roughly 1 hour away from Kansai International Airport.</p>
    </div>
<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>
</body>

When the page loads, the collapsibles are open by default, which isn't desired. I want it to be closed by default.

How do I make the collapsibles closed by default when the page is loaded?

CodePudding user response：

Try using JavaScript and Jquery

<body onl oad=“$("#myModal").modal('hide');”>

CodePudding user response：

add this CSS:

.content {
  display: none;
}