CODEWITHSUNDEEP
javascripthtmlcss
Irma
Irma

Reputation: 49

Expand all at once

I am trying to have an Expand All button on my website. I have two levels of expanding and collapsing links and would like to have an option to Expand All when someone wants to see everything without clicking. I think I know what I need to do - loop through all accordions and set them to display. Could you give me some tips.

This is the code. Please help. 

function ExpandAll() {
  var acc = document.getElementsByClassName("accordionMain");
  var i;

  for (i = 0; i < acc.length; i++) {
    var panel = this.Children
    panel.style.display = "block";

  }

}

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  }
}
button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}

div.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
}
<!DOCTYPE html>

<head>
</head>

<body>

  <h2>Accordion</h2>
  <button onclick="ExpandAll();">Expand All</button>
  <button class="accordion">Section 2</button>
  <div class="panel">
    <button class="accordion">Section 1</button>
    <div class="panel">
      <p>
        content
      </p>
    </div>
  </div>

  <button class="accordion">Section 3</button>
  <div class="panel">
    <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>
</body>

</html>

Upvotes: 2

Views: 743

Answers (2)

Thomas Rokicki
Thomas Rokicki

Reputation: 634

ExpandAll() should be expandAll() (May not matter but it bothered me) Make sure to change it for the onclick for your button as well.

<button onclick="expandAll();">Expand All</button>

Then change your code to not look for acordionMain but for the panel. The getElementsByClassName(X) returns and array. So you can just iterate through that array and set the style to display: "block" via JS. The code is below. 

<script>
        function expandAll ()
        {
            var elements = document.getElementsByClassName("panel");

            for (var i = 0; i < elements.length; i++) {
                var panel = elements[i];
                panel.style["display"] = "block";

                }

        }
    </script>

EDIT:

Here is a Fiddle: https://jsfiddle.net/CraftingGamerTom/f6y96c2e/

Upvotes: 1

MaxZoom
MaxZoom

Reputation: 7763

You can ask document to give you all .panel elements to show as below

function ExpandAll() {
  var pannels = document.querySelectorAll('.panel');
 
  for (panel of pannels)
    panel.style.display = "block";
}
button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}

div.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
}
<h2>Accordion</h2>
<button onclick="ExpandAll();">Expand All</button>
<button class="accordion">Section 2</button>
<div class="panel">
  <button class="accordion">Section 1</button>
  <div class="panel">
    <p>
      content
    </p>
  </div>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <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>

Upvotes: 2

Related Questions