How to have Active mode in JQuery Accordion
Hi All,
I am using an jquery accordian as a menu in my site...it goes on next page when i click on the button but i want to show an that button in active state when it on is on its respective page.
Below mentioned code is i am using for my accordion menu.
$(function() {
$('#accordion > li').hover(
function () {
var $this = $(this);
$this.stop().animate({'width':'340px'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.heading_strength',$this).stop(true,true).fadeOut();
$('.heading_weight',$this).stop(true,true).fadeOut();
$('.heading_energy',$this).stop(true,true).fadeOut();
$('.heading_muscle',$this).stop(true,true).fadeOut();
$('.heading_core',$this).stop(true,true).fadeOut();
$('.heading_flex',$this).stop(true,true).fadeOut();
$('.heading_boxing',$this).stop(true,true).fadeOut();
$('.heading_events',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDown(500);
$('.description',$this).stop(true,true).fadeIn();
},
function () {
var $this = $(this);
$this.stop().animate({'width':'70px'},500);
$('.heading',$this).stop(true,true).fadeIn();
$('.heading_strength',$this).stop(true,true).fadeIn();
$('.heading_weight',$this).stop(true,true).fadeIn();
$('.heading_energy',$this).stop(true,true).fadeIn();
$('.heading_muscle',$this).stop(true,true).fadeIn();
$('.heading_core',$this).stop(true,true).fadeIn();
$('.heading_flex',$this).stop(true,true).fadeIn();
$('.heading_boxing',$this).stop(true,true).fadeIn();
$('.heading_events',$this).stop(true,true).fadeIn();
$('.description',$this).stop(true,true).fadeOut(500);
$('.bgDescription',$this).stop(true,true).slideUp(700);
}
);
});
Please let me know with the solution with this issue.
I have modified this file from htmldrive.net here is the link original link
http://htmldrive.net/items/show/89/Elegant-Accordion-with-jQuery-and-CSS3.html
Regards
Aalap