How i can set default open collapsible?

BlueSkiLz · Jan 13, 2023

How i can set opened collapsible default and close at click?

CSS:

<!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;
  max-height: 0;
  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 consequat.</p>
</div>

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

for (i = 0; i < coll.length; i++) {
  coll.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>

BigDady · Jan 17, 2023

Do not use the classs attribute for the Listener add an ID to each and use that. keep the class for the style.
Remove the for loop.
Have the three Listeners call the same function and have that function open the "collapsible"s
If you're having problem with that repost your final code.

BlueSkiLz · Jan 17, 2023

Could you please be more specific or even show me how?

BigDady · Jan 18, 2023

Don't know how I could be more specific. It's there, step by step. Just follow that and see what you get
or are you just wanting me to do your work?

Kuncode · Jan 30, 2023

You can modify the JavaScript code as follows:

JavaScript:

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

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

This will close the other collapsible sections when one of them is opened.

Help needed with code	5	Mar 7, 2021
Spliting input at blank line	3	Sep 25, 2007
Grouping messages that have similarities	2	Jun 28, 2023
Lately I'm finding a lot of absolute divs	8	Apr 1, 2005
CSS Layout Issue in IE6 - Example in Book Fails	1	Dec 14, 2007
expand / collapse all with this script	1	Aug 8, 2005
expand/collpase all instances of this script on a page	2	Aug 19, 2005
Position 2 DIVs on Single Line	7	Aug 5, 2008

How i can set default open collapsible?

BlueSkiLz

BigDady

BlueSkiLz

BigDady

Kuncode

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads