CODEWITHSUNDEEP
jqueryhtml
Benjio
Benjio

Reputation: 73

JQuery tree li toggle

I have finally managed to create my tree grid. The problem im having is creating a JQuery function to open the month and years separately. Ok so the tree looks like so 

<ul>
    <li class="year"><a> 2013</a> 
        <li class="month">January
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </li>
        <li class="month">February
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </li>
</ul>

So the code i managed to toggle the year element is

$('li:not(".year")').hide();

$('.year').click(
    function(){
        $('li:not(".year")').slideUp();
        $(this).nextUntil('.year').slideDown();
    });

Which when closed is fine but when i toggle it it opens the months as well.

Can someone help me on a function just to open the years then user to click to open each month?

Upvotes: 1

Views: 7043

Answers (2)

Pedro Estrada
Pedro Estrada

Reputation: 2404

Try this way JSFIDDLE

HTML

<ul>
    <li>
        <a class="year" href="#">2013</a>
        <ul>
            <li> 
                <a class="month" href="#">January</a>
                <ul>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                </ul>
            </li>
            <li> 
                <a class="month" href="#">February</a>
                <ul>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JS

$('ul:gt(0) li').hide();

$('.year').click(function () {
    $('.month').parent().slideToggle();
});

$('.month').click(function () {
    $(this).parent().find('ul li').slideToggle();
});

Upvotes: 3

DrCord
DrCord

Reputation: 3955

Try this fiddle: http://jsfiddle.net/F7f8N/

HTML (corrected)

<ul> 
    <li class="year"><a> 2013</a>
        <ul>
            <li class="month">January
                <ul>
                    <li> test </li> 
                    <li> test </li> 
                    <li> test </li> 
                    <li> test </li> 
                    <li> test </li> 
                    <li> test </li> 
                    <li> test </li>
                </ul>
            </li>   
            <li class="month">February
                <ul>
                    <li> test </li> 
                    <li> test </li> 
                    <li> test </li> 
                    <li> test </li> 
                    <li> test </li> 
                    <li> test </li> 
                    <li> test </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

li{
    display: none;
}
li.year{
    display: block;
}

JS

$('li').click(function(e){
    if( $(this).find('>ul').hasClass('active') ){
        $(this).children('ul').removeClass('active').children('li').slideUp();
        e.stopPropagation();
    }
    else{
        $(this).children('ul').addClass('active').children('li').slideDown();
        e.stopPropagation();
    }
});

Upvotes: 1

Related Questions