Prevent active accordion item from closing on click

Question

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 class="accordionHeader" id="defaultOpen">section 1</button> <div class="accPanel"> 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 class="accordionHeader">section 2</button> <div class="accPanel"> 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 class="accordionHeader">section 3</button> <div class="accPanel"> 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.

Answer 1

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 class="accordionHeader" id="defaultOpen">section 1</button> <div class="accPanel"> 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 class="accordionHeader">section 2</button> <div class="accPanel"> 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 class="accordionHeader">section 3</button> <div class="accPanel"> 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>

Answer 2

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 class="accordionHeader" id="defaultOpen">section 1</button> <div class="accPanel"> 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 class="accordionHeader">section 2</button> <div class="accPanel"> 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 class="accordionHeader">section 3</button> <div class="accPanel"> 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>

Prevent active accordion item from closing on click

Question

2 answers

solution1
0 ACCPTED 2021-12-28 00:16:26

solution2
-1 2021-12-28 00:23:34

Prevent active accordion item from closing on click

Question

2 answers

solution1 0 ACCPTED 2021-12-28 00:16:26

solution2 -1 2021-12-28 00:23:34

solution1
0 ACCPTED 2021-12-28 00:16:26

solution2
-1 2021-12-28 00:23:34