Solved

jquery accordion

Posted on 2010-09-16
31
946 Views
Last Modified: 2013-11-19
Hello experts.
I use this tutorial:http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/.
For the headers i use background images (for closed-hover-and active.
The problem i have is if  one accordion item is opened and i "hover" on his header (with background the active image) it shows the hover image.That what i need is to stop the hover function for the active headers.
Any help?
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('slow');
		 } 
		  
	 });
	    
	
	/*** 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 ***/
	
	//z
	/********************************************************************************************************************
	CLOSES ALL S ON PAGE LOAD
	********************************************************************************************************************/	
	$('.accordionContent').hide();
	
	/**************************************************************************************************************
	OPEN THE ACTIVE ITEM 
	*************************************************************************************************************/
	$('.open').trigger('click');

});

css:
/***********************************************************************************************************************
DOCUMENT: style/format.css
DEVELOPED BY: Ryan Stemkoski
COMPANY: Zipline Interactive
EMAIL: ryan@gozipline.com
PHONE: 509-321-2849
DATE: 2/26/2009
DESCRIPTION: This document contains the structural formatting files for the accordion style menu.
************************************************************************************************************************/
#wrapper {
	width: 152px;
	margin-left: auto;
	margin-right: auto;
	}

.accordionButton {
	width: 152px;
	float: left;
	_float: none;
	cursor: pointer;
	background-image: url(lpanel-header.gif);
	height: 31px;
	}
.accordionButtonSelected {
	width: 152px;
	float: left;
	_float: none;
	cursor: pointer;
	background-image: url(lpanel-header_active.gif);
	height: 31px;
	}
.accordionButton span { padding-left:20px; padding-top:4px; color:#fff;}
.accordionContent {
	width: 152px;
	height:100px;
	float: left;
	_float: none;
	background-image:url(ha-footer.png);
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: bottom;
	}
	
/***********************************************************************************************************************
 EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS
************************************************************************************************************************/

.on {
	background-image: url(lpanel-header_active.gif);
	background-repeat: no-repeat;
	}
	
.over {
	background-image: url(lpanel-header_hover.gif);
	background-repeat: no-repeat;
	}
html:
<div id="wrapper">
		<div class="accordionButton"><span>Button 1 Content</span></div>
		<div class="accordionContent">Content 1</div>
		<div class="accordionButton"><span>Button 2 Content</span></div>
		<div class="accordionContent">Content 2</div>
		<div class="accordionButton open"><span>Button 3 Content</span></div>
		<div class="accordionContent">Content 3</div>
		<div class="accordionButton"><span>Button 4 Content</span></div>
		<div class="accordionContent">Content 4</div>
	</div>

Open in new window

0
Comment
Question by:Panos
  • 15
  • 11
  • +1
31 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33691130
Sorry, what is the problem? Can you show an image?
0
 
LVL 4

Expert Comment

by:acashok
ID: 33691230
0
 
LVL 2

Author Comment

by:Panos
ID: 33692107
Sorry.
I will try to explain again.
The accordion is working.The problem is that if i rollover the header with the opened content it is changing to over class.i want to keep the on class.
accordion.gif
rolloverheader.gif
0
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
LVL 2

Author Comment

by:Panos
ID: 33692119
And the right css is:
#wrapper {
      width: 152px;
      margin-left: auto;
      margin-right: auto;
      }

.accordionButton {
      width: 152px;
      float: left;
      _float: none;
      cursor: pointer;
      background-image: url(lpanel-header.gif);
      height: 31px;
      }
.accordionButton span { padding-left:20px; padding-top:4px; color:#fff;}
.accordionContent {
      width: 152px;
      height:100px;
      float: left;
      _float: none;
      background-image:url(ha-footer.png);
      background-color: #fff;
      background-repeat: no-repeat;
      background-position: bottom;
      }
      
/***********************************************************************************************************************
 EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS
************************************************************************************************************************/

.on {
      background-image: url(lpanel-header_active.gif);
      background-repeat: no-repeat;
      }
      
.over {
      background-image: url(lpanel-header_hover.gif);
      background-repeat: no-repeat;
      }
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 33692128
Hi,

Use the jquery UI accordion  http://jqueryui.com/demos/accordion/

Once included the syntax for the accordina menu is:

<script type="text/javascript">
      $(function() {
            $("#accordion").accordion();
      });
      </script>
html:

<div id="accordion">
      <h3><a href="#">Section 1</a></h3>
      <div>
            <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
      </div>
      <h3><a href="#">Section 2</a></h3>
      <div>
            <p>
            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
            purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
            velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
            suscipit faucibus urna.
            </p>
      </div>
</div>

All styling can be done via the theme roller...
0
 
LVL 2

Author Comment

by:Panos
ID: 33692230
Hi darren-w
I 'm using this plugin but i have the problem with the rounded corners in IE.The script (hack) for the IE is not working fine for me .The accordion appears first with corners and than with rounded corners and i don't like it.So i decided to tetst this plug-in and use images.
I have opened another question where i'm using jquery ui.You can take alook there too.http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26477182.html
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33692307
So you will close this question?
0
 
LVL 2

Author Comment

by:Panos
ID: 33692433
No i will not close the question.
If i get a solution for this plugin i will use this one.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33693128
So we need to change

$('.accordionButton').mouseover(function() {             
$(this).addClass('over');                    
//ON MOUSEOUT REMOVE THE OVER CLASS
      }).mouseout(function() {             $(this).removeClass('over');                                                                   });

to something like

$('.accordionButton').mouseover(function() {
  if (this.hasClass('on') == false) $(this).addClass('over');
  //ON MOUSEOUT REMOVE THE OVER CLASS
  }).mouseout(function() {
    $(this).removeClass('over');										
});

Open in new window

0
 
LVL 2

Author Comment

by:Panos
ID: 33699218
mplungjan
i have the error hasClass is not a function
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33699314
Should be there

http://api.jquery.com/hasClass/

unless your jQuery is older than 1.2
0
 
LVL 2

Author Comment

by:Panos
ID: 33699524
You are right.
I was testing this with the one that was opened on page load that has the class "open".
I need a correction for this case too.
0
 
LVL 2

Author Comment

by:Panos
ID: 33699573
The error i have is:
this.hasClass is not a function
but it is working
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33699579
Ah, open, not on.
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 500 total points
ID: 33699592
So better?

$('.accordionButton').mouseover(function() {
  if (!this.hasClass('over')) $(this).addClass('over');
  //ON MOUSEOUT REMOVE THE OVER CLASS
  }).mouseout(function() {
    $(this).removeClass('over');                                                            
});
0
 
LVL 2

Author Comment

by:Panos
ID: 33700007
the js error is still there
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33700194
But it works anyway?

Do you have a url?
0
 
LVL 2

Author Comment

by:Panos
ID: 33700314
i will open my router so that you can check this.
Please inform me if you have made your tests to close it again:
http://carbay.selfip.com/test/accordion/1/jquery-accordion-menu-update/example.htm
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33700967
Sorry. I could not reach your server.
0
 
LVL 2

Author Comment

by:Panos
ID: 33701307
PLEASE TRY AGAIN
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 500 total points
ID: 33701352
ah

if (!$(this).hasClass('over'))
0
 
LVL 2

Author Comment

by:Panos
ID: 33701411
Now i have the problem i had in the beginning!
0
 
LVL 2

Author Comment

by:Panos
ID: 33701425
I have this now:
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
      $('.accordionButton').mouseover(function() {
 if (!$(this).hasClass('on')) $(this).addClass('over');
 //ON MOUSEOUT REMOVE THE OVER CLASS
 }).mouseout(function() {
   $(this).removeClass('over');                                                            
});

check the function
0
 
LVL 2

Author Comment

by:Panos
ID: 33701551
If i click on the header,the content opens but the hover image does not change to the on image.It does it only on mouseout.(
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 500 total points
ID: 33701570
I see it does not take effect until after I move off when I click

perhaps

if (!$(this).hasClass('over') && !$(this).hasClass('on') )
0
 
LVL 2

Author Comment

by:Panos
ID: 33701605
The hover function is not working now
0
 
LVL 2

Accepted Solution

by:
Panos earned 0 total points
ID: 33726875
Hi again mplungjan
finally i found the solution adding a line in the click function.
The working code is:
$(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');
                  $(this).removeClass('over');
                  //OPEN THE SLIDE
                  $(this).next().slideToggle('slow');
             }
             
       });
          
      
      /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
      
      //ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
      $('.accordionButton').mouseover(function() {
       if (!$(this).hasClass('on')) $(this).addClass('over');
       //ON MOUSEOUT REMOVE THE OVER CLASS
       }).mouseout(function() {
    $(this).removeClass('over');                                                            
});
      
      /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
      
      //z
      /********************************************************************************************************************
      CLOSES ALL S ON PAGE LOAD
      ********************************************************************************************************************/      
      $('.accordionContent').hide();
      
      /**************************************************************************************************************
      OPEN THE ACTIVE ITEM
      *************************************************************************************************************/
      $('.open').trigger('click');

});


the css:
#wrapper {
      width: 152px;
      margin-left: auto;
      margin-right: auto;
      }

.accordionButton {
      width: 152px;
      float: left;
      _float: none;
      cursor: pointer;
      background-image: url(lpanel-header.gif);
      height: 31px;
      }
.accordionButton span { padding-left:20px; padding-top:4px; color:#fff;}
.accordionContent {
      width: 152px;
      height:100px;
      float: left;
      _float: none;
      background-image:url(ha-footer.png);
      background-color: #fff;
      background-repeat: no-repeat;
      background-position: bottom;
      }
      
/***********************************************************************************************************************
 EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS
************************************************************************************************************************/

.on {
      background-image: url(lpanel-header_active.gif);
      background-repeat: no-repeat;
      }
      
.over {
      background-image: url(lpanel-header_hover.gif);
      background-repeat: no-repeat;
      }

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33726995
Great!
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question