?
Solved

jquery accordion

Posted on 2010-09-16
31
Medium Priority
?
977 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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 2000 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 2000 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 2000 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
Suggested Courses

765 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