Acordeon com JQuery

<< Click to Display Table of Contents >>

Navigation:  Acordeon >

Acordeon com JQuery

Previous pageReturn to chapter overviewNext page

Página

 

acordeon

Outra página (troquei o css):

 

acordeon2

 

 

Html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>jQuery Accordion Style DIV Menu</title>

<link href="style/format.css" rel="stylesheet" type="text/css" />

<link href="style/text.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>

<script type="text/javascript" src="includes/javascript.js"> </script>

</head>

 

<body>

   <div id="wrapper">

      <div class="accordionButton">Button 1 Content</div>

      <div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div>

      <div class="accordionButton">Button 2 Content</div>

      <div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div>

      <div class="accordionButton">Button 3 Content</div>

      <div class="accordionContent">Content 1<br />Short Example</div>

      <div class="accordionButton">Button 4 Content</div>

      <div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div>

   </div>

</body>

</html>

 

format.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: 800px;

   margin-left: auto;

   margin-right: auto;

   }

 

.accordionButton {   

   width: 800px;

   float: left;

   _float: none;  /* Float works in all browsers but IE6 */

   background: #003366;

   border-bottom: 1px solid #FFFFFF;

   cursor: pointer;

   }

   

.accordionContent {   

   width: 800px;

   float: left;

   _float: none; /* Float works in all browsers but IE6 */

   background: #95B1CE;

   }

   

/***********************************************************************************************************************

 EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS

************************************************************************************************************************/

 

.on {

   background: #990000;

   }

   

.over {

   background: #CCCCCC;

   }

 

javascript.js

 

/***********************************************************************************************************************

DOCUMENT: includes/javascript.js

DEVELOPED BY: Ryan Stemkoski

COMPANY: Zipline Interactive

EMAIL: ryan@gozipline.com

PHONE: 509-321-2849

DATE: 3/26/2009

UPDATED: 3/25/2010

DESCRIPTION: This is the JavaScript required to create the accordion style menu.  Requires jQuery library

NOTE: Because of a bug in jQuery with IE8 we had to add an IE stylesheet hack to get the system to work in all browsers. I hate hacks but had no choice :(.

************************************************************************************************************************/

$(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('normal');

       } 

        

    });

     

   

   /*** 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 ***/

   

   

   /********************************************************************************************************************

   CLOSES ALL S ON PAGE LOAD

   ********************************************************************************************************************/   

   $('.accordionContent').hide();

 

});