#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    4
    Rep Power
    0

    Question How can I keep the section of this accordion open?


    Hello there

    I'm an amateur at web coding (HTML/CSS) but a complete ignorant when it comes to javascript. I'm able to install stuff with simple instructions, but I have no idea how to change the code... that's why I need your help!

    Here's the deal: I'm using an accordion menu (it's called the "Stupid Simple jQuery Accoridon Menu", it seems I'm not allowed to post the URL) and it works pretty well. My menu contains a few sections, each including 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 keep the section open while browsing the links it contains, so that the user doesn't have to unfold the menu all aver again each time?

    Do you think I should use another accordion that already offers this kind of option?

    Thank you very much for your help!!

    Anne

    Here's the code:

    Code:
    header:
    <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>  
                        	<li><a href="">A History of Bristle Use</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();
    
    });
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,175
    Rep Power
    184
    Well, the way you got your links set-up, at the moment... once you click the link; the linked page will open in the parent document (meaning it will open up in the same page). So you need to create a new page by either using window.open (JavaScript way) or using target="_blank" (HTML way); for your links.
    Code:
    <li><a href="footerwear.html" target="_blank">Development of Footwear</a></li>
    This way the menu does not close and your page opens as well. Although, if your wanting something along the lines of a navigational breadcrumb, in your accordion menu; that's a different story. If you want that; you are going to have to set-up some validation, for your jQuery; to set the accordion menu's accordionContent class div (based on jQuery's eq() api - hierarchical element placement, from top to bottom); to be set to be open on document load; based on specific pre-set validation criteria .
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    4
    Rep Power
    0
    Thank you very much for answering!

    What i'd like to do looks like what you describe in your second paragraph. I want the link to open in the same page. Here's a screenshot (forget the design):

    http:/

    /i.imgur.com/PF0At7z.png

    (seems I can't put a whole URL, sorry)

    For example, I want to open the links "development of footwear", "turned shoes", etc. without the "historical shoes" section closing.

    I forgot to mention that I'm using php includes to insert the menu, header and footer, I don't know if it changes anything. Juste in case, the code of a page:

    PHP Code:
    <?php include("header.php"); ?>         
    <?php include("menu.php"); ?>           

    <h2>Development of Footwear</h2>          

    <p><i>Please note that the following document is a work in progress.</i><p>          

    <p>It is doubtful that we will ever know when the first shoes were worn, or what those first shoes were like. As with all to many things, those records, if they were ever kept, have been lost to us. The traditions among shoemakers and historians have held that until relatively recently, shoes were probably just bag-like wrappings of fur or skins in the colder regions and that they remained like that until relatively recently. At least one source1 has described a cave painting (c.8000 BCE) showing "foot bags", presumably of leather, while another has shown images of shoes from Spanish cave paintings (??? BCE) that are interpreted to show furred boots. </p>           

    <?php include("footer.php"); ?>
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,175
    Rep Power
    184
    Well, then here is a basic example of validating a hash; to display a specific accordion sub-menu (using a JavaScript switch() statement and the jQuery eq() API):
    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
    <script>
    $(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();
    
    // validate hash to open corresponding accordion sub-menu
    
    var getHash = window.location.hash.split("#")[1];
    
     switch (getHash)
      {
       case "history":
        $('.accordionContent').eq('0').show();
        break;
       case "tools":
        $('.accordionContent').eq('1').show();
        break;
      }
    
    
    });
    </script>
    
                <div id="wrapper">
                    <div class="accordionButton">HISTORICAL SHOES</div>
                    <div class="accordionContent">
                    	<ul>
                        	<li><a href="?page=1#history">Development of Footwear</a></li>
                            <li><a href="?page=2#history">Turned shoes</a></li>
                            <li><a href="?page=3#history">Pattens, clogs and Wooden Soled Shoes</a></li>
                            <li><a href="?page=4#history">Medieval European Long Toed Shoes</a></li>
                        </ul>
        		</div>
                    <div class="accordionButton">TOOLS AND TECHNIQUES</div>
                    <div class="accordionContent">
                        <ul>
                        	<li><a href="?page=5#tools">Medieval Shoemaker's Tools</a></li>
                            <li><a href="?page=6#tools">St. Hugh's  Bones (Post Medieval Shoemaker's Tools)</a></li>
                        	<li><a href="?page=7#tools">Lasts</a></li>
                        	<li><a href="?page=8#tools">Thread</a></li>  
                        	<li><a href="?page=9#tools">A History of Bristle Use</a></li>
                        </ul>
                    </div>
                </div>
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    4
    Rep Power
    0
    Thank you for your help! I'll try this as soon as I get a moment.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    4
    Rep Power
    0
    Hey Web_loone08,

    I've tried it out and it works fine. Thank you again for your help! It's very nice of you to take time to solve such small matters.

    Anne

IMN logo majestic logo threadwatch logo seochat tools logo