Prevent active accordion item from closing on click-CodePudding

i'm working on a design for a site, but i'm super new to any kind of coding, so there's a lot that i don't know the answer to (and haven't been able to find yet).

currently, i'd like to know if it's possible, with the code i currently have, to prevent the active accordion item/panel from closing when the header is clicked.

here's the relevant part of my current code:

var acc = document.getElementsByClassName("accordionHeader");
var panel = document.getElementsByClassName('accPanel');

for (var i = 0; i < acc.length; i  ) {
  acc[i].onclick = function() {
    var setClasses = !this.classList.contains('open');
    setClass(acc, 'open', 'remove');
    setClass(panel, 'open', 'remove');
    if (setClasses) {
      this.classList.toggle("open");
      this.nextElementSibling.classList.toggle("open");
    }
  }
}

function setClass(els, className, fnName) {
  for (var i = 0; i < els.length; i  ) {
    els[i].classList[fnName](className);
  }
}
document.getElementById("defaultOpen").click();

.accordionHeader {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.accPanel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.open {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <title>polka time</title>
</head>

<body>
  <div>
    <button  id="defaultOpen">section 1</button>
    <div >
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>

    <button >section 2</button>
    <div >
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>
    <button >section 3</button>
    <div >
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>
  </div>

  <script src="character page js.js" type="text/javascript"></script>
</body>

</html>

if at all possible i'd like to not change too much about the code, since i only just got it working (more or less). i'm sure my code's a total mess though since i've mainly been copying off tutorials the whole time.

also if there's a good way to get the accordion to animate that would be a bonus.

CodePudding user response：

You can add another isOpen statecheck to the function like in the snippet below so that you don't remove the open class when the element is opened.

Full code below.

// change
setClass(acc, 'open', 'remove');
setClass(panel, 'open', 'remove');

// to
var isOpen = !!this.classList.contains('open');
if (!isOpen){
    setClass(acc, 'open', 'remove');
    setClass(panel, 'open', 'remove');
}

var acc = document.getElementsByClassName("accordionHeader");
var panel = document.getElementsByClassName('accPanel');

for (var i = 0; i < acc.length; i  ) {
  acc[i].onclick = function() {
    var setClasses = !this.classList.contains('open');
    var isOpen = !!this.classList.contains('open');
    if (!isOpen){
        setClass(acc, 'open', 'remove');
        setClass(panel, 'open', 'remove');
    }

    if (setClasses) {
      this.classList.toggle("open");
      this.nextElementSibling.classList.toggle("open");
    }
  }
}

function setClass(els, className, fnName) {
  for (var i = 0; i < els.length; i  ) {
    els[i].classList[fnName](className);
  }
}
document.getElementById("defaultOpen").click();

.accordionHeader {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.accPanel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.open {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <title>polka time</title>
</head>

<body>
  <div>
    <button  id="defaultOpen">section 1</button>
    <div >
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>

    <button >section 2</button>
    <div >
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>
    <button >section 3</button>
    <div >
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>
  </div>

  <script src="character page js.js" type="text/javascript"></script>
</body>

</html>

CodePudding user response：

This solution will prevent the active header from closing when a new header is clicked.

var acc = document.getElementsByClassName("accordionHeader");
var panel = document.getElementsByClassName('accPanel');

for (var i = 0; i < acc.length; i  ) {
  acc[i].onclick = function() {
    var setClasses = !this.classList.contains('open');
    var thisPanel = this.nextElementSibling;

    setClass(this, 'open', 'remove');
    setClass(thisPanel, 'open', 'remove');

    if (setClasses) {
      this.classList.toggle("open");
      this.nextElementSibling.classList.toggle("open");
    }

  }

}

function setClass(el, className, fnName) {
  el.classList[fnName](className);
}
document.getElementById("defaultOpen").click();

.accordionHeader {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.accPanel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.open {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <title>polka time</title>
</head>

<body>
  <div>
    <button  id="defaultOpen">section 1</button>
    <div >
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>

    <button >section 2</button>
    <div >
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>
    <button >section 3</button>
    <div >
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>
  </div>

  <script src="character page js.js" type="text/javascript"></script>
</body>

</html>