Solved

jquery accordion

Posted on 2010-09-16
31
966 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Is Your Team Achieving Their Full Potential?

74% of employees feel they are not achieving their full potential. With Linux Academy, not only will you strengthen your team's core competencies but also their knowledge of of the newest IT topics.

With new material every week, we'll make sure that you stay ahead of the game.

 
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

The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
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.

691 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