htmlbuttoncollapsable

How to make an HTML collapsible button default to expanded?

I have an HTML page with multiple collapsible buttons. I'd like one button to be expanded when the page is loaded. Right now all buttons are collapsed by default. How do I change the HTML or CSS so that a particular button (Current Week) is expanded and the rest are collapsed? Here's the relevant code:

<!DOCTYPE html>
<html>
<head>
    <title>
    Prior_Recordings_HTML5
    </title>
</head>
    <link href="CSS/my_site.css" rel="stylesheet" type="text/css" />
<body>
<table class="table_for_collapse">
    <tr>
        <td>
            <button class=collapsible>Current Week&mdash;November 8, 2020</button>
            <div class=collapsible_content>
                <a href="https://my_site_link_1" target="_blank" class="link3"
                    title="Sunday 11/8/2020">
                    Click here for Sunday, 11/8/2020<br />
                </a>
                <a href="https://my_site_link_2" target="_blank" class="link3"
                    title="Monday 11/9/2020">
                    Click here for 11/9/2020<br />
                </a>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <button class=collapsible>Prior Week 1&mdash;November 1, 2020</button>
            <div class=collapsible_content>
                <a href="https://my_site_link_3" target="_blank" class="link3"
                    title="Sunday 11/1/2020">
                    Click here for Sunday, 11/1/2020<br />
                </a>
                <a href="https://my_site_link_4" target="_blank" class="link3"
                    title="Monday 11/2/2020">
                    Click here for 11/2/2020<br />
                </a>
            </div>
        </td>
    </tr>
</table>
<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.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
        } 
      });
    }
</script>
</body>
</html>

And here is the CSS:

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  font-size: 15px;
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: left;
  width: 450px;
  max-width: 1000px; 
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.collapsible_content {
/*
  padding: 0 18px;
*/
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #EEE8AA;
}

Thanks for looking at this.

Solution

  • Maybe I didn't understand something but why don't you just run the code ran in your eventlistener's function in the main thread?

    In the event where you work with dates later on, you could make a separate function for it, like so:

        function collapse_this_week(){
    coll[0].classList.toggle("active");
        var content = coll[0].nextElementSibling;
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
        } 
    }

    You could pass a parameter to the function to determine which button to expand depending on the date when you start working with dates.

    JSFiddle using your code : Here