2
votes

Comment changer l'affichage par défaut dans cet exemple de sections réductibles de réduit à développé

J'ai utilisé l'exemple suivant pour créer plusieurs sections qui se réduisent et se développent dans un formulaire de saisie.

https://www.w3schools.com/howto/tryit.asp ? filename = tryhow_js_collapsible_symbol

Cependant, dans cet exemple, toutes les sections sont réduites par défaut, alors que je préférerais que lors du chargement du formulaire toutes les sections soient développées et que l'utilisateur puisse alors choisir de réduire ce dont il n'a pas besoin.

Quelqu'un peut-il me dire comment le code de cet exemple devrait être modifié pour charger par défaut toutes les sections développées au lieu de réduites?

Merci d'avance

javascript html css

0 commentaires

3 Réponses :

1
votes

1- Les étendre: dans la règle .content , supprimez la déclaration max-height , afin qu'elles commencent toutes développées.
2- Inversez l'instruction if comme ceci:

    if (content.style.maxHeight === '0px'){
      content.style.maxHeight = content.scrollHeight + "px";
    } else {
      content.style.maxHeight = '0px';
    }

Les styles doivent également être gérés.

2 commentaires

Merci beaucoup Moaaz. Pourrais-je s'il vous plaît vous demander d'expliquer également ce que vous entendez par styles doivent également être gérés? Je vous remercie.

Ok, je pense que vous faites référence à l'inversion du signe + et -. Correct?

1
votes

Le code du bas fonctionnera pour vous en fait, il vous suffit de supprimer max-height = 0 du contenu en CSS et d'ajouter le changement content.style.maxHeight = content.scrollHeight + "px "; à content.style.maxHeight = 0 +" px "; donc lorsque vous cliquez sur les onglets, il se réduit et s'ouvre par défaut J'espère que cela aide

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

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

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

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

.content {
  padding: 0 18px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Animated Collapsibles</h2>

<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conseqasdddddddddddddddddasdasdadasdasdasdasddddddddddddddduat.</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.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = 0 + "px";
    } 
  });
}
</script>

</body>
</html>

0 commentaires

2
votes

vous devez modifier max-height:150px
vous devez ajouter la classe active à tous les éléments réductibles ou modifier la propriété content de active: after et collpasible: after code> et
vous devez changer javascript comme ci-dessous

<h2>Animated Collapsibles</h2>

<p>A Collapsible:</p>
<button class="collapsible active">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<p>Collapsible Set:</p>
<button class="collapsible active">Open Section 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible active">Open Section 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible active">Open Section 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button onclick="hide()">Collapse all</button>

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

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

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

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

.content {
  padding: 0 18px;
  max-height: 150px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

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

var myClasses = document.querySelectorAll('.content')

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() { 
  debugger;
    var myClasses = document.querySelectorAll('.content'),
    		newClass = document.querySelectorAll('.collapsible'),
        j = 0,
        l = myClasses.length;

    for (j; j < l; j++) {
      	myClasses[j].style.maxHeight = 0 + "px";
        newClass[j].classList.remove("active");
    }  
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    }
    else{
      content.style.maxHeight = 0 + "px";
    }
  });  
}

Tout réduire

<h2>Animated Collapsibles</h2>

<p>A Collapsible:</p>
<button class="collapsible active">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<p>Collapsible Set:</p>
<button class="collapsible active">Open Section 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible active">Open Section 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible active">Open Section 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button onclick="hide()">Collapse all</button>

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

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

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

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

.content {
  padding: 0 18px;
  max-height: 150px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

function hide() {
    var myClasses = document.querySelectorAll('.content'),
        i = 0,
        l = myClasses.length;

    for (i; i < l; i++) {
    	if(myClasses[i].style.display === 'none'){
        myClasses[i].style.display = 'block';
      }
      else{
      	myClasses[i].style.display = 'none';
      }
    }
}

One Collapse

<h2>Animated Collapsibles</h2>

<p>A Collapsible:</p>
<button class="collapsible active">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<p>Collapsible Set:</p>
<button class="collapsible active">Open Section 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible active">Open Section 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible active">Open Section 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

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

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

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

.content {
  padding: 0 18px;
  max-height: 150px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

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

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

Par défaut, une extension

5 commentaires

Merci beaucoup Hiren, j'ai ça fonctionne maintenant! Encore une question, serait-il possible d'ajouter une option Développer / Réduire tout? Merci d'avance.

Merci Hiren, avez-vous des chances d'obtenir de l'aide pour ajouter l'option Développer / Réduire tout? Une autre fonctionnalité que je serais également intéressée à considérer est la possibilité de réduire automatiquement la dernière section ouverte lors du développement d'une nouvelle section. Fondamentalement, cette logique conserverait toujours ouverte une seule section.

@AdriCist mis à jour pour tout réduire, une autre option que j'essaye

Marche parfaitement! Merci beaucoup Hiren, votre aide est grandement appréciée!

@AdriCist Welcome Mate