Why is my accordion not showing the sub tabs when it is clicked on?CSS Layout with Pixel And PercentsUse jQuery to hide a DIV when the user clicks outside of itHTML/CSS positioning for Menus “float: bottom”Change Pure CSS3 Accordion Style for expanded and contracted statesHow to make an inline-block element fill the remainder of the line?Make body 100% height of browser windowCannot display HTML stringContent div Not 100% height and widthActive state on Bootstrap Acccordion clickRemove “whitespace” between 2 div element under one another
Capturing the entire webpage with WebExecute's CaptureImage
99 coins into the sacks
What will Doctor Strange protect now?
GLM: Modelling proportional data - account for variation in total sample size
Why is it wrong to *implement* myself a known, published, widely believed to be secure crypto algorithm?
Mindfulness of Watching Youtube
Visualize multiple string segments
Flooding vs Unknown Unicast Flooding
Identity of a supposed anonymous referee revealed through "Description" of the report
Is your maximum jump distance halved by grappling?
Why doesn't increasing the temperature of something like wood or paper set them on fire?
The unknown and unexplained in science fiction
How to avoid making self and former employee look bad when reporting on fixing former employee's work?
Fuzzy vector logos from InDesign to Acrobat PDF
What is the oldest instrument ever?
Is there an idiom that means "revealing a secret unintentionally"?
Why did Missandei say this?
What's the difference between "ricochet" and "bounce"?
Learning how to read schematics, questions about fractional voltage in schematic
How to explain intravenous drug abuse to a 6-year-old?
Expl3 and recent xparse on overleaf: No expl3 loader detected
Company stopped my paying salary. What are my options?
How could a civilization detect tachyons?
How to deal with relatively technically incompetent coworker?
Why is my accordion not showing the sub tabs when it is clicked on?
CSS Layout with Pixel And PercentsUse jQuery to hide a DIV when the user clicks outside of itHTML/CSS positioning for Menus “float: bottom”Change Pure CSS3 Accordion Style for expanded and contracted statesHow to make an inline-block element fill the remainder of the line?Make body 100% height of browser windowCannot display HTML stringContent div Not 100% height and widthActive state on Bootstrap Acccordion clickRemove “whitespace” between 2 div element under one another
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
1
I am trying to create a FAQ accordion but unfortunately when one of the tabs open there is just a space, and nothing shows up. Here is my html, CSS, and JavaScript that I am working with. Any help would be greatly appreciated.
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++)
acc[i].onclick = function()
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses)
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
function setClass(els, className, fnName)
for (var i = 0; i < els.length; i++)
els[i].classList[fnName](className);
.master-accordion
color: #141452;
width: 100%;
height: 80%;
padding: 0 0 0 8em;
position: relative;
z-index: 99;
align-items: center;
opacity: .9;
.accordion
color: #141452;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 90%;
opacity: .95;
text-align: left;
border: 1px solid black;
transition: 0.4s;
font-family: 'Roboto', sans-serif;
z-index: 99;
.panel
background-color: white;
display: none;
overflow: hidden;
width: 90%;
max-height: 0;
transition: max-height 0.2s ease-out;
position: relative;
z-index: 99;
font: 16px;
background-color: white;
padding: 10px 0 0 0;
.active,
.accordion:hover
background-color: #141452;
color: white;
.accordion::after
content: '2795';
font-size: 15px;
float: right;
margin-left: 5px;
.active::after
content: '2796'
.accordion.active
margin-bottom: 20px;
<div class="master-accordion">
<button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
<div class="panel">
If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
</div>
<button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
<div class="panel">
No, unfortunately not at this time
</div>
<button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
<div class="panel">
Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
</div>
</div>When i click on the button they will open but when they do there is a dead space, most likely due to my margin that i placed on it. The over all function of my JavaScript works but I am unable to see the text which leads me to believe this is a CSS problem.
javascript html css accordion
edited Mar 23 at 7:25
Akshay
11.4k32862
asked Mar 23 at 7:15
Davis 101stDavis 101st
83
add a comment |
1
I am trying to create a FAQ accordion but unfortunately when one of the tabs open there is just a space, and nothing shows up. Here is my html, CSS, and JavaScript that I am working with. Any help would be greatly appreciated.
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++)
acc[i].onclick = function()
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses)
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
function setClass(els, className, fnName)
for (var i = 0; i < els.length; i++)
els[i].classList[fnName](className);
.master-accordion
color: #141452;
width: 100%;
height: 80%;
padding: 0 0 0 8em;
position: relative;
z-index: 99;
align-items: center;
opacity: .9;
.accordion
color: #141452;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 90%;
opacity: .95;
text-align: left;
border: 1px solid black;
transition: 0.4s;
font-family: 'Roboto', sans-serif;
z-index: 99;
.panel
background-color: white;
display: none;
overflow: hidden;
width: 90%;
max-height: 0;
transition: max-height 0.2s ease-out;
position: relative;
z-index: 99;
font: 16px;
background-color: white;
padding: 10px 0 0 0;
.active,
.accordion:hover
background-color: #141452;
color: white;
.accordion::after
content: '2795';
font-size: 15px;
float: right;
margin-left: 5px;
.active::after
content: '2796'
.accordion.active
margin-bottom: 20px;
<div class="master-accordion">
<button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
<div class="panel">
If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
</div>
<button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
<div class="panel">
No, unfortunately not at this time
</div>
<button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
<div class="panel">
Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
</div>
</div>When i click on the button they will open but when they do there is a dead space, most likely due to my margin that i placed on it. The over all function of my JavaScript works but I am unable to see the text which leads me to believe this is a CSS problem.
javascript html css accordion
edited Mar 23 at 7:25
Akshay
11.4k32862
asked Mar 23 at 7:15
Davis 101stDavis 101st
83
add a comment |
1
1
1
I am trying to create a FAQ accordion but unfortunately when one of the tabs open there is just a space, and nothing shows up. Here is my html, CSS, and JavaScript that I am working with. Any help would be greatly appreciated.
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++)
acc[i].onclick = function()
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses)
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
function setClass(els, className, fnName)
for (var i = 0; i < els.length; i++)
els[i].classList[fnName](className);
.master-accordion
color: #141452;
width: 100%;
height: 80%;
padding: 0 0 0 8em;
position: relative;
z-index: 99;
align-items: center;
opacity: .9;
.accordion
color: #141452;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 90%;
opacity: .95;
text-align: left;
border: 1px solid black;
transition: 0.4s;
font-family: 'Roboto', sans-serif;
z-index: 99;
.panel
background-color: white;
display: none;
overflow: hidden;
width: 90%;
max-height: 0;
transition: max-height 0.2s ease-out;
position: relative;
z-index: 99;
font: 16px;
background-color: white;
padding: 10px 0 0 0;
.active,
.accordion:hover
background-color: #141452;
color: white;
.accordion::after
content: '2795';
font-size: 15px;
float: right;
margin-left: 5px;
.active::after
content: '2796'
.accordion.active
margin-bottom: 20px;
<div class="master-accordion">
<button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
<div class="panel">
If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
</div>
<button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
<div class="panel">
No, unfortunately not at this time
</div>
<button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
<div class="panel">
Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
</div>
</div>When i click on the button they will open but when they do there is a dead space, most likely due to my margin that i placed on it. The over all function of my JavaScript works but I am unable to see the text which leads me to believe this is a CSS problem.
javascript html css accordion
edited Mar 23 at 7:25
Akshay
11.4k32862
asked Mar 23 at 7:15
Davis 101stDavis 101st
83
I am trying to create a FAQ accordion but unfortunately when one of the tabs open there is just a space, and nothing shows up. Here is my html, CSS, and JavaScript that I am working with. Any help would be greatly appreciated.
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++)
acc[i].onclick = function()
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses)
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
function setClass(els, className, fnName)
for (var i = 0; i < els.length; i++)
els[i].classList[fnName](className);
.master-accordion
color: #141452;
width: 100%;
height: 80%;
padding: 0 0 0 8em;
position: relative;
z-index: 99;
align-items: center;
opacity: .9;
.accordion
color: #141452;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 90%;
opacity: .95;
text-align: left;
border: 1px solid black;
transition: 0.4s;
font-family: 'Roboto', sans-serif;
z-index: 99;
.panel
background-color: white;
display: none;
overflow: hidden;
width: 90%;
max-height: 0;
transition: max-height 0.2s ease-out;
position: relative;
z-index: 99;
font: 16px;
background-color: white;
padding: 10px 0 0 0;
.active,
.accordion:hover
background-color: #141452;
color: white;
.accordion::after
content: '2795';
font-size: 15px;
float: right;
margin-left: 5px;
.active::after
content: '2796'
.accordion.active
margin-bottom: 20px;
<div class="master-accordion">
<button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
<div class="panel">
If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
</div>
<button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
<div class="panel">
No, unfortunately not at this time
</div>
<button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
<div class="panel">
Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
</div>
</div>When i click on the button they will open but when they do there is a dead space, most likely due to my margin that i placed on it. The over all function of my JavaScript works but I am unable to see the text which leads me to believe this is a CSS problem.
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++)
acc[i].onclick = function()
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses)
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
function setClass(els, className, fnName)
for (var i = 0; i < els.length; i++)
els[i].classList[fnName](className);
.master-accordion
color: #141452;
width: 100%;
height: 80%;
padding: 0 0 0 8em;
position: relative;
z-index: 99;
align-items: center;
opacity: .9;
.accordion
color: #141452;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 90%;
opacity: .95;
text-align: left;
border: 1px solid black;
transition: 0.4s;
font-family: 'Roboto', sans-serif;
z-index: 99;
.panel
background-color: white;
display: none;
overflow: hidden;
width: 90%;
max-height: 0;
transition: max-height 0.2s ease-out;
position: relative;
z-index: 99;
font: 16px;
background-color: white;
padding: 10px 0 0 0;
.active,
.accordion:hover
background-color: #141452;
color: white;
.accordion::after
content: '2795';
font-size: 15px;
float: right;
margin-left: 5px;
.active::after
content: '2796'
.accordion.active
margin-bottom: 20px;
<div class="master-accordion">
<button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
<div class="panel">
If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
</div>
<button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
<div class="panel">
No, unfortunately not at this time
</div>
<button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
<div class="panel">
Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
</div>
</div>var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++)
acc[i].onclick = function()
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses)
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
function setClass(els, className, fnName)
for (var i = 0; i < els.length; i++)
els[i].classList[fnName](className);
.master-accordion
color: #141452;
width: 100%;
height: 80%;
padding: 0 0 0 8em;
position: relative;
z-index: 99;
align-items: center;
opacity: .9;
.accordion
color: #141452;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 90%;
opacity: .95;
text-align: left;
border: 1px solid black;
transition: 0.4s;
font-family: 'Roboto', sans-serif;
z-index: 99;
.panel
background-color: white;
display: none;
overflow: hidden;
width: 90%;
max-height: 0;
transition: max-height 0.2s ease-out;
position: relative;
z-index: 99;
font: 16px;
background-color: white;
padding: 10px 0 0 0;
.active,
.accordion:hover
background-color: #141452;
color: white;
.accordion::after
content: '2795';
font-size: 15px;
float: right;
margin-left: 5px;
.active::after
content: '2796'
.accordion.active
margin-bottom: 20px;
<div class="master-accordion">
<button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
<div class="panel">
If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
</div>
<button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
<div class="panel">
No, unfortunately not at this time
</div>
<button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
<div class="panel">
Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
</div>
</div>javascript html css accordion
javascript html css accordion
edited Mar 23 at 7:25
Akshay
11.4k32862
asked Mar 23 at 7:15
Davis 101stDavis 101st
83
edited Mar 23 at 7:25
Akshay
11.4k32862
asked Mar 23 at 7:15
Davis 101stDavis 101st
83
edited Mar 23 at 7:25
Akshay
11.4k32862
edited Mar 23 at 7:25
Akshay
11.4k32862
edited Mar 23 at 7:25
Akshay
11.4k32862
11.4k32862
asked Mar 23 at 7:15
Davis 101stDavis 101st
83
asked Mar 23 at 7:15
Davis 101stDavis 101st
83
asked Mar 23 at 7:15
Davis 101stDavis 101st
83
83
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
You have not set any properties for the show class. I removed the display:none and set max-height:150px for the show class.
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++)
acc[i].onclick = function()
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses)
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
function setClass(els, className, fnName)
for (var i = 0; i < els.length; i++)
els[i].classList[fnName](className);
.master-accordion
color: #141452;
width: 100%;
height: 80%;
padding: 0 0 0 8em;
position: relative;
z-index: 99;
align-items: center;
opacity: .9;
.accordion
color: #141452;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 90%;
opacity: .95;
text-align: left;
border: 1px solid black;
transition: 0.4s;
font-family: 'Roboto', sans-serif;
z-index: 99;
.panel
background-color: white;
overflow: hidden;
width: 90%;
max-height: 0;
transition: max-height 0.2s ease-out;
position: relative;
z-index: 99;
font: 16px;
background-color: white;
padding: 10px 0 0 0;
.panel.show
max-height: 150px;
.active,
.accordion:hover
background-color: #141452;
color: white;
.accordion::after
content: '2795';
font-size: 15px;
float: right;
margin-left: 5px;
.active::after
content: '2796'
.accordion.active
margin-bottom: 20px;
<div class="master-accordion">
<button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
<div class="panel">
If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
</div>
<button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
<div class="panel">
No, unfortunately not at this time
</div>
<button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
<div class="panel">
Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
</div>
</div>answered Mar 23 at 7:28
AkshayAkshay
11.4k32862
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55311517%2fwhy-is-my-accordion-not-showing-the-sub-tabs-when-it-is-clicked-on%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You have not set any properties for the show class. I removed the display:none and set max-height:150px for the show class.
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++)
acc[i].onclick = function()
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses)
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
function setClass(els, className, fnName)
for (var i = 0; i < els.length; i++)
els[i].classList[fnName](className);
.master-accordion
color: #141452;
width: 100%;
height: 80%;
padding: 0 0 0 8em;
position: relative;
z-index: 99;
align-items: center;
opacity: .9;
.accordion
color: #141452;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 90%;
opacity: .95;
text-align: left;
border: 1px solid black;
transition: 0.4s;
font-family: 'Roboto', sans-serif;
z-index: 99;
.panel
background-color: white;
overflow: hidden;
width: 90%;
max-height: 0;
transition: max-height 0.2s ease-out;
position: relative;
z-index: 99;
font: 16px;
background-color: white;
padding: 10px 0 0 0;
.panel.show
max-height: 150px;
.active,
.accordion:hover
background-color: #141452;
color: white;
.accordion::after
content: '2795';
font-size: 15px;
float: right;
margin-left: 5px;
.active::after
content: '2796'
.accordion.active
margin-bottom: 20px;
<div class="master-accordion">
<button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
<div class="panel">
If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
</div>
<button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
<div class="panel">
No, unfortunately not at this time
</div>
<button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
<div class="panel">
Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
</div>
</div>answered Mar 23 at 7:28
AkshayAkshay
11.4k32862
add a comment |
0
You have not set any properties for the show class. I removed the display:none and set max-height:150px for the show class.
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++)
acc[i].onclick = function()
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses)
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
function setClass(els, className, fnName)
for (var i = 0; i < els.length; i++)
els[i].classList[fnName](className);
.master-accordion
color: #141452;
width: 100%;
height: 80%;
padding: 0 0 0 8em;
position: relative;
z-index: 99;
align-items: center;
opacity: .9;
.accordion
color: #141452;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 90%;
opacity: .95;
text-align: left;
border: 1px solid black;
transition: 0.4s;
font-family: 'Roboto', sans-serif;
z-index: 99;
.panel
background-color: white;
overflow: hidden;
width: 90%;
max-height: 0;
transition: max-height 0.2s ease-out;
position: relative;
z-index: 99;
font: 16px;
background-color: white;
padding: 10px 0 0 0;
.panel.show
max-height: 150px;
.active,
.accordion:hover
background-color: #141452;
color: white;
.accordion::after
content: '2795';
font-size: 15px;
float: right;
margin-left: 5px;
.active::after
content: '2796'
.accordion.active
margin-bottom: 20px;
<div class="master-accordion">
<button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
<div class="panel">
If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
</div>
<button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
<div class="panel">
No, unfortunately not at this time
</div>
<button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
<div class="panel">
Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
</div>
</div>answered Mar 23 at 7:28
AkshayAkshay
11.4k32862
add a comment |
0
0
0
You have not set any properties for the show class. I removed the display:none and set max-height:150px for the show class.
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++)
acc[i].onclick = function()
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses)
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
function setClass(els, className, fnName)
for (var i = 0; i < els.length; i++)
els[i].classList[fnName](className);
.master-accordion
color: #141452;
width: 100%;
height: 80%;
padding: 0 0 0 8em;
position: relative;
z-index: 99;
align-items: center;
opacity: .9;
.accordion
color: #141452;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 90%;
opacity: .95;
text-align: left;
border: 1px solid black;
transition: 0.4s;
font-family: 'Roboto', sans-serif;
z-index: 99;
.panel
background-color: white;
overflow: hidden;
width: 90%;
max-height: 0;
transition: max-height 0.2s ease-out;
position: relative;
z-index: 99;
font: 16px;
background-color: white;
padding: 10px 0 0 0;
.panel.show
max-height: 150px;
.active,
.accordion:hover
background-color: #141452;
color: white;
.accordion::after
content: '2795';
font-size: 15px;
float: right;
margin-left: 5px;
.active::after
content: '2796'
.accordion.active
margin-bottom: 20px;
<div class="master-accordion">
<button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
<div class="panel">
If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
</div>
<button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
<div class="panel">
No, unfortunately not at this time
</div>
<button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
<div class="panel">
Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
</div>
</div>answered Mar 23 at 7:28
AkshayAkshay
11.4k32862
You have not set any properties for the show class. I removed the display:none and set max-height:150px for the show class.
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++)
acc[i].onclick = function()
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses)
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
function setClass(els, className, fnName)
for (var i = 0; i < els.length; i++)
els[i].classList[fnName](className);
.master-accordion
color: #141452;
width: 100%;
height: 80%;
padding: 0 0 0 8em;
position: relative;
z-index: 99;
align-items: center;
opacity: .9;
.accordion
color: #141452;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 90%;
opacity: .95;
text-align: left;
border: 1px solid black;
transition: 0.4s;
font-family: 'Roboto', sans-serif;
z-index: 99;
.panel
background-color: white;
overflow: hidden;
width: 90%;
max-height: 0;
transition: max-height 0.2s ease-out;
position: relative;
z-index: 99;
font: 16px;
background-color: white;
padding: 10px 0 0 0;
.panel.show
max-height: 150px;
.active,
.accordion:hover
background-color: #141452;
color: white;
.accordion::after
content: '2795';
font-size: 15px;
float: right;
margin-left: 5px;
.active::after
content: '2796'
.accordion.active
margin-bottom: 20px;
<div class="master-accordion">
<button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
<div class="panel">
If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
</div>
<button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
<div class="panel">
No, unfortunately not at this time
</div>
<button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
<div class="panel">
Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
</div>
</div>var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++)
acc[i].onclick = function()
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses)
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
function setClass(els, className, fnName)
for (var i = 0; i < els.length; i++)
els[i].classList[fnName](className);
.master-accordion
color: #141452;
width: 100%;
height: 80%;
padding: 0 0 0 8em;
position: relative;
z-index: 99;
align-items: center;
opacity: .9;
.accordion
color: #141452;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 90%;
opacity: .95;
text-align: left;
border: 1px solid black;
transition: 0.4s;
font-family: 'Roboto', sans-serif;
z-index: 99;
.panel
background-color: white;
overflow: hidden;
width: 90%;
max-height: 0;
transition: max-height 0.2s ease-out;
position: relative;
z-index: 99;
font: 16px;
background-color: white;
padding: 10px 0 0 0;
.panel.show
max-height: 150px;
.active,
.accordion:hover
background-color: #141452;
color: white;
.accordion::after
content: '2795';
font-size: 15px;
float: right;
margin-left: 5px;
.active::after
content: '2796'
.accordion.active
margin-bottom: 20px;
<div class="master-accordion">
<button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
<div class="panel">
If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
</div>
<button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
<div class="panel">
No, unfortunately not at this time
</div>
<button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
<div class="panel">
Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
</div>
</div>var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++)
acc[i].onclick = function()
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses)
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
function setClass(els, className, fnName)
for (var i = 0; i < els.length; i++)
els[i].classList[fnName](className);
.master-accordion
color: #141452;
width: 100%;
height: 80%;
padding: 0 0 0 8em;
position: relative;
z-index: 99;
align-items: center;
opacity: .9;
.accordion
color: #141452;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 90%;
opacity: .95;
text-align: left;
border: 1px solid black;
transition: 0.4s;
font-family: 'Roboto', sans-serif;
z-index: 99;
.panel
background-color: white;
overflow: hidden;
width: 90%;
max-height: 0;
transition: max-height 0.2s ease-out;
position: relative;
z-index: 99;
font: 16px;
background-color: white;
padding: 10px 0 0 0;
.panel.show
max-height: 150px;
.active,
.accordion:hover
background-color: #141452;
color: white;
.accordion::after
content: '2795';
font-size: 15px;
float: right;
margin-left: 5px;
.active::after
content: '2796'
.accordion.active
margin-bottom: 20px;
<div class="master-accordion">
<button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
<div class="panel">
If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
</div>
<button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
<div class="panel">
No, unfortunately not at this time
</div>
<button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
<div class="panel">
Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
</div>
</div>answered Mar 23 at 7:28
AkshayAkshay
11.4k32862
answered Mar 23 at 7:28
AkshayAkshay
11.4k32862
answered Mar 23 at 7:28
AkshayAkshay
11.4k32862
answered Mar 23 at 7:28
AkshayAkshay
11.4k32862
11.4k32862
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55311517%2fwhy-is-my-accordion-not-showing-the-sub-tabs-when-it-is-clicked-on%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
