Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 995
  • Last Modified:

jquery accordion

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
Panos
Asked:
Panos
  • 15
  • 11
  • +1
4 Solutions
 
Michel PlungjanIT ExpertCommented:
Sorry, what is the problem? Can you show an image?
0
 
acashokCommented:
0
 
PanosAuthor Commented:
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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
PanosAuthor Commented:
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
 
darren-w-Commented:
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
 
PanosAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
So you will close this question?
0
 
PanosAuthor Commented:
No i will not close the question.
If i get a solution for this plugin i will use this one.
0
 
Michel PlungjanIT ExpertCommented:
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
 
PanosAuthor Commented:
mplungjan
i have the error hasClass is not a function
0
 
Michel PlungjanIT ExpertCommented:
Should be there

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

unless your jQuery is older than 1.2
0
 
PanosAuthor Commented:
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
 
PanosAuthor Commented:
The error i have is:
this.hasClass is not a function
but it is working
0
 
Michel PlungjanIT ExpertCommented:
Ah, open, not on.
0
 
Michel PlungjanIT ExpertCommented:
So better?

$('.accordionButton').mouseover(function() {
  if (!this.hasClass('over')) $(this).addClass('over');
  //ON MOUSEOUT REMOVE THE OVER CLASS
  }).mouseout(function() {
    $(this).removeClass('over');                                                            
});
0
 
PanosAuthor Commented:
the js error is still there
0
 
Michel PlungjanIT ExpertCommented:
But it works anyway?

Do you have a url?
0
 
PanosAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
Sorry. I could not reach your server.
0
 
PanosAuthor Commented:
PLEASE TRY AGAIN
0
 
Michel PlungjanIT ExpertCommented:
ah

if (!$(this).hasClass('over'))
0
 
PanosAuthor Commented:
Now i have the problem i had in the beginning!
0
 
PanosAuthor Commented:
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
 
PanosAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
I see it does not take effect until after I move off when I click

perhaps

if (!$(this).hasClass('over') && !$(this).hasClass('on') )
0
 
PanosAuthor Commented:
The hover function is not working now
0
 
PanosAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
Great!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 15
  • 11
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now