CODEWITHSUNDEEP
javascriptcssaccordion
nsic
nsic

Reputation: 153

Accordion within Accordion

I am trying to embedded accordion within another accordion however it's not working, the embedded accordion will expand only to the size of the first expand accordion, I will need to add extra space in order to show the content, any help is greatly appreciated!

CSS

button.accordion {
background-color: #73560b;
border: 2px solid #ffc600;
border-radius: 0px 10px 0px 10px;
box-shadow: 7px 7px 5px #cccccc;
color: #fff;
cursor: pointer;
padding: 10px 15px 10px 15px;
margin: 4px 0px 7px 0px;
width: 100%;
font-size: 18px;
transition: 0.4s;
outline: none;
text-align: left;
}
button.accordion.active, button.accordion:hover {
background-color: #926c0e;
}

button.accordion:after {
content: '\002B';
color: #ffc600;
font-weight: bold;
float: right;
}

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

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

HTML

<button class="accordion">Background</button>
<div class="panel">
content
<button class="accordion">item 1</button>
<div class="panel">
content
</div>
</div>

JavaScript

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

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

Upvotes: 2

Views: 2177

Answers (1)

Jok3r
Jok3r

Reputation: 496

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

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}
button.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;
}

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

div.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Accordion</h2>



<button class="accordion">Section 2</button>
<div class="panel">
  <button class="accordion">Section 1</button>
<div class="panel">
<p>
content
 </p>
</div>
</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>


</body>
</html>

try this

Upvotes: 2

Related Questions