• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 858
  • Last Modified:

Accordian header doesn't close.

I'm using this code for accordian: http://designmodo.com/jquery-accordion-menu/ 

As attached, you can see a green header that is open. When I click this green colour I expect it close but it doesn't. I've tried to tweak the code in order to close the green aaccordian and open any green header on click or on hover?

This is for iphone app development.

    <script type="text/javascript">
    $(document).ready(function() {
 
        // Store variables
 
        var accordion_head = $('.accordion > li > a'),
            accordion_body = $('.accordion li > .sub-menu');
 
        // Open the first tab on load
 
        accordion_head.first().addClass('active').next().slideDown('normal');
 
        // Click function
 
        accordion_head.on('click', function(event) {
 
            // Disable header links
 
            event.preventDefault();
 
            // Show and hide the tabs on click
            if ($(this).attr('class') != 'active'){
                accordion_body.slideUp('normal');
                $(this).next().stop(true,true).slideToggle('normal');
                accordion_head.removeClass('active');
                $(this).addClass('active');
            }
        }); 
    }); 
</script>

Open in new window


I've tried to comment out
//accordion_head.first().addClass('active').next().slideDown('normal');

Open in new window

and it work to a certain extent?

I'd appreciate if experts can see a solution please?
Screen-Shot-2012-08-19-at-00.55..png
0
Redscrapbook
Asked:
Redscrapbook
  • 8
  • 6
1 Solution
 
Kyle HamiltonData ScientistCommented:
add an else clause to your click function:

<script type="text/javascript">
    $(document).ready(function() {
 
        // Store variables
 
        var accordion_head = $('.accordion > li > a'),
            accordion_body = $('.accordion li > .sub-menu');
 
        // Open the first tab on load
 
        accordion_head.first().addClass('active').next().slideDown('normal');
 
        // Click function
 
        accordion_head.on('click', function(event) {
 
            // Disable header links
 
            event.preventDefault();
 
            // Show and hide the tabs on click
            if ($(this).attr('class') != 'active'){
                accordion_body.slideUp('normal');
                $(this).next().stop(true,true).slideToggle('normal');
                accordion_head.removeClass('active');
                $(this).addClass('active');
            }else{
              $(this).next('.sub-menu').slideUp('normal');
              $(this).removeClass('active');
            }
        }); 
    }); 
</script>

Open in new window

0
 
RedscrapbookAuthor Commented:
Thank you for your reply. It is not closing  like this as attached. I'm expecting to see green colours to close when finish and revert back to cyan colour when idle.
test.png
0
 
Kyle HamiltonData ScientistCommented:
here's the working example:

http://candpgeneration.com/EE/accordion.html

make sure you roll off the tab to see it revert back to the default color.

view source for code
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
RedscrapbookAuthor Commented:
I understand it'll revert to default. I've looked it all and I don't see any extra changes except javascript?

What else did you figgle so I'll know in future?
0
 
Kyle HamiltonData ScientistCommented:
just the else clause in the javascript.

basically, the two lines of javascript do this: if the tab has the class active, then slideup the sub-menu, and remove the class active from the tab, which is what makes it revert back to the default color.
0
 
RedscrapbookAuthor Commented:
Ok. I've compare the two http://candpgeneration.com/EE/accordion.html and the code as below. The only difference is just the else clause in the javascript.

Both behave differently.

This one closes
http://candpgeneration.com/EE/accordion.html

This one doesn't close as below.
<!DOCTYPE html>
<html>
  <head>
  <title></title>
  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
	<meta charset="utf-8">

	
	<!-- Accordian Start. http://designmodo.com/jquery-accordion-menu/ -->
	<link rel="stylesheet" href="css/accordionmenu.css" type="text/css" media="screen" />

    <meta name="robots" content="noindex,follow" />
    
    <!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript">

		$(document).ready(function() {

			// Store variables
			
			var accordion_head = $('.accordion > li > a'),
				accordion_body = $('.accordion li > .sub-menu');

			// Open the first tab on load

			accordion_head.first().addClass('active').next().slideDown('normal');

			// Click function

			accordion_head.on('click', function(event) {

				// Disable header links
				
				event.preventDefault();

				// Show and hide the tabs on click

				if ($(this).attr('class') != 'active'){
					accordion_body.slideUp('normal');
					$(this).next().stop(true,true).slideDown('normal');
					accordion_head.removeClass('active');
					$(this).addClass('active');
				}
			});


		});

	</script>



    <!-- Accordian End  Source: http://designmodo.com/jquery-accordion-menu/#ixzz23prBCGSD -->
    
	<!-- iPad/iPhone specific css below, add after your main css >
	<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />		
	<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />		
	-->
	<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
	<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
    <script type="text/javascript">


	// If you want to prevent dragging, uncomment this section
	/*
	function preventBehavior(e) 
	{ 
      e.preventDefault(); 
    };
	document.addEventListener("touchmove", preventBehavior, false);
	*/
	
	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	/*
	function handleOpenURL(url)
	{
		// TODO: do something with the url passed in.
	}
	*/
	
	function onBodyLoad()
	{		
		document.addEventListener("deviceready", onDeviceReady, false);
	}
	
	/* When this function is called, PhoneGap has been initialized and is ready to roll */
	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	function onDeviceReady()
	{
		// do your thing!
		navigator.notification.alert("PhoneGap is working")
	}
    
    </script>

	
	
	
	<link rel="apple-touch-icon" href="images/appicon.png" type="" />
	
	<meta name="apple-mobile-web-app-capable" content="yes" />
	
	<link rel="apple-touch-startup-image" href="images/splash.png" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />

	<link rel="stylesheet" href="css/yellow.css" />
	<link rel="stylesheet" href="css/structure.css" />
	
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile.js"></script>

	<script src="js/myscript.js"></script>
	<link rel="stylesheet" href="css/mystyles.css" />
	

    
    
  </head>
  <body onload="onBodyLoad()">
  <!-- Page: home / background blue dots --><!-- Page: home / background blue dots -->
  <!-- Page: home / background blue dots --><!-- Page: home / background blue dots -->
    <div id="home" data-role="page" data-title="View Source: Home">
			
	<!-- Page: Accordian Start --><!-- Page: Accordian Start --><!-- Page: Accordian Start -->
	<!-- Page: Accordian Start --><!-- Page: Accordian Start --><!-- Page: Accordian Start -->
	<div id="wrapper-250"><!-- Change width -->
		<ul class="accordion">		
			<li id="one" class="files">
				<a href="#one">My Files<span>495</span></a>
				<ul class="sub-menu">					
					<li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>					
					<li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>
					<li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>
					<li><a href="#"><em>04</em>Dropbox<span>1</span></a></li>
					<li><a href="#"><em>05</em>Skydrive<span>10</span></a></li>
				</ul>
			</li>			
			<li id="two" class="mail">
				<a href="#two">Mail<span>26</span></a>
				<ul class="sub-menu">					
					<li><a href="#"><em>01</em>Hotmail<span>9</span></a></li>					
					<li><a href="#"><em>02</em>Yahoo<span>14</span></a></li>
				</ul>
			</li>		
			<li id="three" class="cloud">
				<a href="#three">Cloud<span>58</span></a>
				<ul class="sub-menu">
					<li><a href="#"><em>01</em>Connect<span>12</span></a></li>					
					<li><a href="#"><em>02</em>Profiles<span>19</span></a></li>
					<li><a href="#"><em>03</em>Options<span>27</span></a></li>
					<li><a href="#"><em>04</em>Connect<span>12</span></a></li>				
					<li><a href="#"><em>05</em>Profiles<span>19</span></a></li>
					<li><a href="#"><em>06</em>Options<span>27</span></a></li>
				</ul>
			</li>			
			<li id="four" class="sign">
				<a href="#four">Sign Out</a>
				<ul class="sub-menu">					
					<li><a href="#"><em>01</em>Log Out</a></li>					
					<li><a href="#"><em>02</em>Delete Account</a></li>
					<li><a href="#"><em>03</em>Freeze Account</a></li>
				</ul>
			</li>		
		</ul>		
	</div>
	<!-- Page: Accordian End --><!-- Page: Accordian End --><!-- Page: Accordian End -->
	<!-- Page: Accordian End --><!-- Page: Accordian End --><!-- Page: Accordian End -->
	




	<!-- Page: Accordian End 
	<h1>Hey, it's PhoneGap!</h1><h2>Alma Bermingham</h2>
	<p>Don't know how to get started? Check out <em><a target="_blank" href="http://www.phonegap.com/start#ios-x4">PhoneGap Start</a></em><br />
	<ol>
		<li>Check your console log for any white-list rejection errors.</li>
		<li>Add your allowed <strong>hosts</strong> in PhoneGap.plist/ExternalHosts (wildcards OK, don't enter the URL scheme)</li>
	</ol> -->
	
	
	  <!-- Page: home / background blue dots --><!-- Page: home / background blue dots -->
      <!-- Page: home / background blue dots --><!-- Page: home / background blue dots -->
	</div><!-- page -->
  </body>
</html>

Open in new window

0
 
RedscrapbookAuthor Commented:
Took off two lines of JS as above:
				}else{
                                        $(this).next('.sub-menu').slideUp('normal');
                                        $(this).removeClass('active');
                                        }
			});


		});

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
those two lines are what you need for it to close.

this should be your script:

<script type="text/javascript">

		$(document).ready(function() {

			// Store variables
			
			var accordion_head = $('.accordion > li > a'),
				accordion_body = $('.accordion li > .sub-menu');

			// Open the first tab on load

			accordion_head.first().addClass('active').next().slideDown('normal');

			// Click function

			accordion_head.on('click', function(event) {

				// Disable header links
				
				event.preventDefault();

				// Show and hide the tabs on click

				if ($(this).attr('class') != 'active'){
					accordion_body.slideUp('normal');
					$(this).next().stop(true,true).slideDown('normal');
					accordion_head.removeClass('active');
					$(this).addClass('active');
				}else{
                                        $(this).next('.sub-menu').slideUp('normal');
                                        $(this).removeClass('active');
                                        }
			});


		});

	</script>

Open in new window


On your page you have two references to jquery, which is what is causing problems. Remove the second call to jquery - right above the jquery.mobile.js

<script src="js/jquery.js"></script>  << remove line 115
<script src="js/jquery.mobile.js"></script>
0
 
Kyle HamiltonData ScientistCommented:
couple other notes:

Don't use this syntax (it has the potential to clash with <body onload=...>):
$(document).ready(function(){ ... });

Use this instead:

$(function(){ ... });

You should try to consolidate your scripts and css files. The extra http requests will hold up your page from loading.
0
 
RedscrapbookAuthor Commented:
I've attached screen grabs and how it behaves. When you view the page for the first time and you'll see a first heading is open and then it will close by clicking the green. The third screen grab, its all dark grey as it supposed to be. I don't see that function behavior on the scripts.

Is it possible to have scripts that is all closed when view for the first time?

<script type="text/javascript">

		$(document).ready(function() {

			// Store variables
			
			var accordion_head = $('.accordion > li > a'),
				accordion_body = $('.accordion li > .sub-menu');

			// Open the first tab on load

			accordion_head.first().addClass('active').next().slideDown('normal');

			// Click function

			accordion_head.on('click', function(event) {

				// Disable header links
				
				event.preventDefault();

				// Show and hide the tabs on click

				if ($(this).attr('class') != 'active'){
					accordion_body.slideUp('normal');
					$(this).next().stop(true,true).slideDown('normal');
					accordion_head.removeClass('active');
					$(this).addClass('active');
				}else{
                                        $(this).next('.sub-menu').slideUp('normal');
                                        $(this).removeClass('active');
                                        }
			});


		});

	</script>

Open in new window

Screen-Shot-2012-08-19-at-17.34..png
Screen-Shot-2012-08-19-at-17.34..png
Screen-Shot-2012-08-19-at-17.34..png
0
 
Kyle HamiltonData ScientistCommented:
comment out the line that activates the first tab on load:

<script type="text/javascript">

		$(document).ready(function() {

			// Store variables
			
			var accordion_head = $('.accordion > li > a'),
				accordion_body = $('.accordion li > .sub-menu');

			// Open the first tab on load

			// accordion_head.first().addClass('active').next().slideDown('normal');

			// Click function

			accordion_head.on('click', function(event) {

				// Disable header links
				
				event.preventDefault();

				// Show and hide the tabs on click

				if ($(this).attr('class') != 'active'){
					accordion_body.slideUp('normal');
					$(this).next().stop(true,true).slideDown('normal');
					accordion_head.removeClass('active');
					$(this).addClass('active');
				}else{
                                        $(this).next('.sub-menu').slideUp('normal');
                                        $(this).removeClass('active');
                                        }
			});


		});

	</script>

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
The green will be visible as long as your mouse is over an item. That's a hover in the css, not the js.
0
 
RedscrapbookAuthor Commented:
Thank you Kozaiwaniec. It does the job on a test Accordian. And thank you for earlier comments as well. Well worth 500 points. I'll give more if there are more stars.
0
 
Kyle HamiltonData ScientistCommented:
:)) anytime.

make sure you remove that second call to jquery - save yourself a lot of headache!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now