Help - Accordions not working
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 comments
Dan Ross
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
Trapta Singh
@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
Permanently deleted user
Thank you!!!! That did the trick.
0
AirDroid
@Trapta I add the accordion code from w3shcool, but it not works. do you have any ideals?
0
Brett Bowser
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
AirDroid
Sure.
In script.js, I add the code below:
In style.css, I add the below code:
In the article, I add the below code:
after previewing the article, when I click the accordion, the content didn't display, please help check what am I miss.
0