accordion menu vraagje
ik heb een vraagje over een accordion menu.
het gaat om de volgende site:
http://cantebegeleiding.nl/test/
als je bijvoorbeeld klikt op 'trainingen > the rebel' dan schuift er een menuutje uit. Het scriptje hiervoor ziet er zo uit:
<div class="accordionButton">the rebel</div>
<div class="accordionContent">inhoud, doelstellingen, info</div>
als je het menuutje uitgeschuifd laat, en je gaat naar een ander onderdeel uit het hoofdmenu, bijvoorbeeld home, en je klikt daarna weer op trainingen dan is hij nog steeds uitgeschuifd. Wat ik dus wil is dat alle accordioncontent weer wordt ingeklapt als er op de linkjes in het hoofdmenu wordt geklikt.. heeft iemand enig idee hoe ik dit simpel kan oplossen?
het javascript ziet er als volgt uit:
//////////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$('.accordionButton').mouseover(function() {
$(this).addClass('over');
//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass('over');
});
/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
/********************************************************************************************************************
CLOSES ALL S ON PAGE LOAD
********************************************************************************************************************/
$('.accordionContent').hide();
});
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
alvast bedankt!
Onderaan voeg je dit toe:
Code (php)
1
2
3
4
2
3
4
// When ever we click on a main link (does not have accordion functionality), we close all slides
$('.eight').click(function(e) {
$('.accordionContent').css('display', 'none');
});
$('.eight').click(function(e) {
$('.accordionContent').css('display', 'none');
});
Doe dat wel boven die laatste
});
(binnen
$(document).ready(function(){ ... });
dus)
Gewijzigd op 18/03/2011 13:36:49 door Kris Peeters