J'ai une page HTML avec plusieurs boutons réductibles. J'aimerais qu'un bouton soit développé lorsque la page est chargée. À l'heure actuelle, tous les boutons sont réduits par défaut. Comment modifier le code HTML ou CSS pour qu'un bouton particulier (Semaine en cours) soit développé et que le reste soit réduit ? Voici le code correspondant :

<!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>

Et voici le 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;
}

Merci d'avoir regarder ceci.

0
user3138025 10 nov. 2020 à 18:58

1 réponse

Meilleure réponse

Peut-être que je n'ai pas compris quelque chose, mais pourquoi n'exécutez-vous pas simplement le code exécuté dans la fonction de votre écouteur d'événement dans le fil principal ?

Dans le cas où vous travaillez avec des dates plus tard, vous pouvez créer une fonction distincte pour cela, comme ceci :

    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";
        } 
    }

Vous pouvez passer un paramètre à la fonction pour déterminer quel bouton développer en fonction de la date à laquelle vous commencez à travailler avec des dates.

JSFiddle en utilisant votre code : Ici

1
Shiverz 10 nov. 2020 à 16:16