• BarbaraTackaBa

    (@barbaratackaba)


    ??

    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<&#8211;
    but not on my template page…
    Why?

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