Title: Nested accordion
Last modified: August 30, 2016

---

# Nested accordion

 *  [BarbaraTackaBa](https://wordpress.org/support/users/barbaratackaba/)
 * (@barbaratackaba)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/nested-accordion-1/)
 * 🙂
 * 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: –>[http://codepen.io/anon/pen/pjXrQB3<&#8211](http://codepen.io/anon/pen/pjXrQB3<&#8211);
   
   but not on my template page… Why?

The topic ‘Nested accordion’ is closed to new replies.

## Tags

 * [nested accordion](https://wordpress.org/support/topic-tag/nested-accordion/)

 * 0 replies
 * 1 participant
 * Last reply from: [BarbaraTackaBa](https://wordpress.org/support/users/barbaratackaba/)
 * Last activity: [10 years, 5 months ago](https://wordpress.org/support/topic/nested-accordion-1/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics