Solved

jquery accordion

Posted on 2010-09-16
31
918 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
Comment Utility
Sorry, what is the problem? Can you show an image?
0
 
LVL 4

Expert Comment

by:acashok
Comment Utility
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
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
 
LVL 2

Author Comment

by:Panos
Comment Utility
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-
Comment Utility
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
Comment Utility
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
Comment Utility
So you will close this question?
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
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
Comment Utility
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
Comment Utility
mplungjan
i have the error hasClass is not a function
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Should be there

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

unless your jQuery is older than 1.2
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
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
Comment Utility
The error i have is:
this.hasClass is not a function
but it is working
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Ah, open, not on.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 500 total points
Comment Utility
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
Comment Utility
the js error is still there
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
But it works anyway?

Do you have a url?
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
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
Comment Utility
Sorry. I could not reach your server.
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
PLEASE TRY AGAIN
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 500 total points
Comment Utility
ah

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

Author Comment

by:Panos
Comment Utility
Now i have the problem i had in the beginning!
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
The hover function is not working now
0
 
LVL 2

Accepted Solution

by:
Panos earned 0 total points
Comment Utility
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
Comment Utility
Great!
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now