javascript accordion

mirabelle33 · 02-28-2013, 11:19 PM

Hello there

I need your help with this as I'm a total ignorant when it comes to javascript... I'm an amateur at web coding (HTML, CSS).

I'm using a javascript accordion menu (http://www.stemkoski.com/stupid-simp...ccordion-menu/) and it works pretty well. Here's the deal:

My menu has a few sections, each containing several links to my pages. When I open a link, its section automatically closes (I'm not happy with that). How can I change the code to make the section stay open, so that the user can visit any link of the same section without having to unfold the menu all over again each time?

Here's the code:

The header:

Code:

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bienvenue sur le site de l'OVB</title>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen">
<link rel="icon" type="image/ico" href="Images/favicon.ico">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="javascript.js"> </script>
</head>

The menu (simplified):

Code:

            <div id="wrapper">
                <div class="accordionButton">HISTORICAL SHOES</div>
                <div class="accordionContent">
                	<ul>
                    	<li><a href="">Development of Footwear</a></li>
                        <li><a href="">Turned shoes</a></li>
                        <li><a href="">Pattens, clogs and Wooden Soled Shoes</a></li>
                        <li><a href="">Medieval European Long Toed Shoes</a></li>
                    </ul>
    			</div>
                <div class="accordionButton">TOOLS AND TECHNIQUES</div>
                <div class="accordionContent">
                    <ul>
                    	<li><a href="">Medieval Shoemaker's Tools</a></li>
                        <li><a href="">St. Hugh's  Bones (Post Medieval Shoemaker's Tools)</a></li>
                    	<li><a href="">Lasts</a></li>
                    	<li><a href="">Thread</a></li>  
                    </ul>
                </div>
            </div>

The javascript file:

Code:

$(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();

});

Thank you very much!!!