Help - Accordions not working

Hey Morgan,

It looks like this might be a Bootstrap accordion, do you have Bootstrap JS and CSS loaded in your document head? Without it, nothing will happen.

Have you checked or tried any of the examples here:

https://getbootstrap.com/docs/4.3/components/collapse/

or

https://www.w3schools.com/bootstrap/bootstrap_collapse.asp for example?

@Morgan King, as Dan said, you need to load Bootstrap JS and CSS in your document head in order to use Bootstrap accordion.

However, you can take a look at this link in case, you have a customized theme that does not have bootstrap by default in it. Adding bootstrap in case of the customized theme might create some overwrites in CSS resulting in UI changes.

Let us know if you face any issue.

Thanks

Thank you!!!! That did the trick.

@Trapta I add the accordion code from w3shcool, but it not works. do you have any ideals？

Sure. 

In script.js, I add the code below:

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

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

In style.css, I add the below code: 

.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;
}

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

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

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

.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;

In the article, I add the below code：

<h2>Animated Accordion</h2>
<p>Click on the buttons to open the collapsible content.</p>

<button class="accordion">Section 1</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>

<button class="accordion">Section 2</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>

<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>

after previewing the article, when I click the accordion, the content didn't display, please help check what am I miss.