Nested accordion

Question

:)

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">
                <ul>
                    <li>List item one</li>
                    <li>List item two</li>
                    <li>List item three</li>
                </ul>
            </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? :o Thx! :)

p.s. I am working in WP

hi barbara check this http://codepen.io/anon/pen/pjXrQB , i put your code in codepen and it is working fine — Virendra Yadav, Nov 26 '15 at 13:44
O no! i copy in my content-page.php in WP and it doesn't work! :( It can't show those nested accordion. Why? — Barbara, Nov 26 '15 at 19:25
check for javascript error , may be possible that other JS or CSS overriding your functionality in WP — Virendra Yadav, Nov 27 '15 at 09:57
Hi! I found this in Console: Uncaught TypeError: $ is not a function. How can I change it? — Barbara, Nov 27 '15 at 10:15
it may work for you see this http://stackoverflow.com/questions/12343714/typeerror-is-not-a-function-when-calling-jquery-function — Virendra Yadav, Nov 27 '15 at 10:24

score 0 · Answer 1 · answered Nov 27 '15 at 11:14

I made it finally!! Thank you!! 
I did this: 

var j = jQuery.noConflict();
jQuery(document).ready(function(j){
    //  Accordion Panels
    j(".accordion div").hide();
    setTimeout("j('.accordion div').slideToggle('slow');", 1000);
    j(".accordion h3").click(function () {
        j(this).next(".pane").slideToggle("slow").siblings(".pane:visible").slideUp("slow");
        j(this).toggleClass("current");
        j(this).siblings("h3").removeClass("current");
    });
});

Instead of $ I put only letter j

I have just one problem. After refresing it is open. But I want it to be closed.

//j(this).next(".pane").slideToggle("slow").siblings(".pane:visible").slideUp("slow"); I have just commented this row and it is working properly... — Barbara, Nov 28 '15 at 15:14

Nested accordion

1 Answers1