CODEWITHSUNDEEP
jqueryslidedown
davidz
davidz

Reputation: 277

Making lists slide down when clicking on links

what I want to achieve is pretty straightforward but for some reason I can't get it to work! What I want to do is When you click on one of the links to a specific genre I want the correspond list of song titles to display, preferably slide down. Any help would be appreciated. Here's my html so far:

<p><a class="rock" href="">ROCK</a> / <a class="blues" href="">BLUES</a></p>

                    <section class="container">
                    <div class="leftcolumn">
                        <ul class="rock">
                            <li>AUTOHAZE</li>
                            <li>BASSHOLES</li>
                            <li>BEAT ANGELS</li>
                            <li>BONFIRE MADIGAN </li>
                            <li>BOOM</li>       
                        </ul>

                        <ul class="blues">
                            <li>20 MILES    </li>
                            <li>AARON MOORE </li>
                            <li>ALBERT AMMONS   </li>
                            <li>ARON BURTON </li>
                            <li>ARTHUR CRUDUP   </li>
                        </ul>
                    </div>
                    </section>

Upvotes: 2

Views: 812

Answers (3)

Kaizen Programmer
Kaizen Programmer

Reputation: 3818

HTML

<p><a class="toggleBtn" data-id="rock" href="#">ROCK</a> / <a class="toggleBtn"
    data-id="blues" href="#">BLUES</a>
</p>
<section class="container">
    <div class="leftcolumn">
        <ul id="rock" class="toggleContainer">
            <li>AUTOHAZE</li>
            <li>BASSHOLES</li>
            <li>BEAT ANGELS</li>
            <li>BONFIRE MADIGAN</li>
            <li>BOOM</li>
        </ul>
        <ul id="blues" class="toggleContainer">
            <li>20 MILES</li>
            <li>AARON MOORE</li>
            <li>ALBERT AMMONS</li>
            <li>ARON BURTON</li>
            <li>ARTHUR CRUDUP</li>
        </ul>
    </div>
</section>

CSS

.toggleContainer {display:none;}

JQUERY

$(function () {
    $(".toggleBtn").click(function () {
        $(".toggleContainer").hide();
        $("#" + $(this).attr("data-id")).slideDown();
    });
});

DEMO - JSFiddle

Upvotes: 0

jubair
jubair

Reputation: 597

<p><a class="rock" href="#">ROCK</a> / <a class="blues" href="#">BLUES</a></p>

                    <section class="container">
                    <div class="leftcolumn">
                        <ul class="rock" >
                            <li>AUTOHAZE</li>
                            <li>BASSHOLES</li>
                            <li>BEAT ANGELS</li>
                            <li>BONFIRE MADIGAN </li>
                            <li>BOOM</li>       
                        </ul>

                        <ul class="blues">
                            <li>20 MILES    </li>
                            <li>AARON MOORE </li>
                            <li>ALBERT AMMONS   </li>
                            <li>ARON BURTON </li>
                            <li>ARTHUR CRUDUP   </li>
                        </ul>
                    </div>
                    </section>

Add following css:

ul {

    display:none;

}

the jquery:

$(function () {
    $('a').bind('click',function () {
        var Class = $(this).attr('class');

        var ulName = 'ul.' + Class;
        var Display=$(ulName).css('display');
        var Dis = $(ulName).css('display');

        $(ulName).siblings().hide();
        if (Dis == "block" || Dis == "undefined") {
            $(ulName).slideUp();
        }
        else {
            $(ulName).slideDown().show(1);
        }

    })
});

DEMO IS HERE

Upvotes: 1

jubair
jubair

Reputation: 597

<p><a class="rock" href="#">ROCK</a> / <a class="blues" href="#">BLUES</a></p>

                    <section class="container">
                    <div class="leftcolumn">
                        <ul class="rock" >
                            <li>AUTOHAZE</li>
                            <li>BASSHOLES</li>
                            <li>BEAT ANGELS</li>
                            <li>BONFIRE MADIGAN </li>
                            <li>BOOM</li>       
                        </ul>

                        <ul class="blues">
                            <li>20 MILES    </li>
                            <li>AARON MOORE </li>
                            <li>ALBERT AMMONS   </li>
                            <li>ARON BURTON </li>
                            <li>ARTHUR CRUDUP   </li>
                        </ul>
                    </div>
                    </section>

jquery:

$(function () {
    $('a').click(function () {
        var Class = $(this).attr('class');

        var ulName = 'ul.' + Class;
        $(ulName).hide();
        $(ulName).slideDown();
    });
});

I've tested it and work nice. Demo is here

Upvotes: 0

Related Questions