Recent searches


No recent searches

Help - Accordions not working

Answered


Posted Oct 16, 2019

I am trying to do collapsable headers in my guide but for some reason it won't work - anyone got any ideas?

 

HTML:

<div id="accordion" class="panel-group">

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title"><a href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">Subhead</a></h4>

</div>

</div>

<div id="collapseOne" class="panel-collapse collapse">

<div class="panel-body">

<p>Text goes here</p>

</div>

</div>

</div>

 

CSS:

.collapse {
display: none;
}

.collapse.in {
display: block;
}

.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
transition: height 0.35s ease;
}


.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}

.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 30px;
color: #af282f;
font-weight: bold;
}

.panel-title > a {
color: inherit;
Text-decoration: none;
}

.panel-title2 {
margin-top: 0;
margin-bottom: 0;
font-size: 20px;
color: #222223;
font-weight: bold;
}

.panel-title2 > a {
color: inherit;
Text-decoration: none;
}

.panel-title3 {
margin-top: 0;
margin-bottom: 0;
font-size: 15px;
color: #222223;
font-weight: bold;
}

.panel-title3 > a {
color: inherit;
Text-decoration: none;
}

.panel {
margin-bottom: 20px;
padding: 0 0 20px 0;
background-color: #ffffff;
border-radius: 4px;
}

.panel-body {
padding: 0 0 20px 20px;

}

.panel-body:before,
.panel-body:after {
display: table;
content: " ";
}

.panel-body:after {
clear: both;
}

.panel-body:before,
.panel-body:after {
display: table;
content: " ";
}

.panel-body:after {
clear: both;
}

.panel-group .panel {
margin-bottom: 0;
overflow: hidden;
}

.panel-default > .panel-heading {
color: #333333;
background-color: #f5f5f5;
}

.panel-description {
margin: -25px;
padding: 0;
}


0

6

6 comments

image avatar

Dan Ross

Community Moderator

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?

0


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

@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

0


Thank you!!!! That did the trick.

0


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

0


image avatar

Brett Bowser

Zendesk Community Manager

Hey AirDroid,

Trapta may be able to point you in the right direction if you provide the code you're using. Any chance you could share that?

0


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.

 

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post