Creating an accordian that slides up instead of down
I'm trying to create an accordion style information on my page. When I click on one of the titles it slides down which is correct but now I need one of those titles to slide up instead of down. Here is the code that I use to make the titles slide down.
- $(".additional-nav-info1").click(function(){
if($(".additional-nav-info-inner1").css("display") == "block"){
$(this).removeClass("active");
$(this).addClass("inactive");
$(".additional-nav-info-inner1").stop().slideToggle(250);
} else {
$(this).removeClass("inactive");
$(this).addClass("active");
$(".additional-nav-info-inner1").stop().slideToggle(250);
}
});
$(".additional-nav-info-inner1 a").hover(function(){
$(this).find("img").eq(0).fadeOut(250);
$(this).find("img").eq(1).fadeIn(250);
}, function(){
$(this).find("img").eq(0).fadeIn(250);
$(this).find("img").eq(1).fadeOut(250);
});
$(".additional-nav-info2").click(function(){
if($(".additional-nav-info-inner2").css("display") == "block"){
$(this).removeClass("active");
$(this).addClass("inactive");
$(".additional-nav-info-inner2").stop().slideToggle(250);
} else {
$(this).removeClass("inactive");
$(this).addClass("active");
$(".additional-nav-info-inner2").stop().slideToggle(250);
}
});
$(".additional-nav-info-inner2 a").hover(function(){
$(this).find("img").eq(0).fadeOut(250);
$(this).find("img").eq(1).fadeIn(250);
}, function(){
$(this).find("img").eq(0).fadeIn(250);
$(this).find("img").eq(1).fadeOut(250);
});