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>
<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);
}
})
});