Nested accordion
-
??
I have a problem. I don’t know how to make nested accordion. I am begginer especially in JS. Here is my code:
HTML:
<div class=”accordion”>
<h3><span class=”accordion_height”>Novembar 2015.</span></h3>
<div class=”pane”>
//This is place where I want to put my nested accordion
</div><h3><span class=”accordion_height”>Decembar 2015.</span></h3>
<div class=”pane”>
//This is place where I want to put my nested accordion
</div><h3><span class=”accordion_height”>Januar 2016.</span></h3>
<div class=”pane”>- List item one
- List item two
- List item three
</div>
<h3><span class=”accordion_height”>Februar 2016.</span></h3>
<div class=”pane”>
//This is place where I want to put my nested accordion
</div><h3><span class=”accordion_height”>Mart 2016.</span></h3>
<div class=”pane”>
//This is place where I want to put my nested accordion
</div><h3><span class=”accordion_height”>April 2016.</span></h3>
<div class=”pane”>
//This is place where I want to put my nested accordion
</div>
</div>JS:
jQuery(document).ready(function ($) {
// Accordion Panels
$(“.accordion div”).hide();
setTimeout(“$(‘.accordion div’).slideToggle(‘slow’);”, 1000);
$(“.accordion h3”).click(function () {
$(this).next(“.pane”).slideToggle(“slow”).siblings(“.pane:visible”).slideUp(“slow”);
$(this).toggleClass(“current”);
$(this).siblings(“h3”).removeClass(“current”);
});
});CSS:
.accordion {
margin:1em 0;
}
.accordion h3 {
background:#199CD8;
color:#fff;
cursor:pointer;
margin:0 0 1px 0;
padding:4px 10px;
}
.accordion h3.current {
background:#C6ED2C;
cursor:default
}
.accordion div.pane {
padding:5px 10px
}
.accordion_height{
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
I’ve tried to insert same accordion in those places I wrote but it can open that. I’ve tried on so many ways and I didn’t make it. I don’t know what I have to change (HMTL or JS or both). I’ve seen so many examples and I pick this and I want to do my first nested accordion this one . ?? Can You help me please? ?? Thx! ??It is working here: –>https://codepen.io/anon/pen/pjXrQB3<–
but not on my template page…
Why?
- The topic ‘Nested accordion’ is closed to new replies.