Ajax Layer JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. Ajax Layer
  4. Accordion with color transition example







var accordion;
var accordionTogglers;
var accordionContents;
window.onload = function() {
  accordionTogglers = document.getElementsByClassName('accToggler');
  
  accordionTogglers.each(function(toggler){
    //remember the original color
    toggler.origColor = toggler.getStyle('background-color');
    //set the effect
    toggler.fx = new Fx.Color(toggler, 'background-color');
  });
  
  accordionContents = document.getElementsByClassName('accContent');
    
  accordion = new Fx.Accordion(accordionTogglers, accordionContents,{
    //when an element is opened change the background color to blue
    onActive: function(toggler){
      toggler.fx.toColor('#6899CE');
    },
    onBackground: function(toggler){
      //change the background color to the original (green) 
      //color when another toggler is pressed
      toggler.setStyle('background-color', toggler.origColor);
    }    
  });
}


*{padding:0px; margin:0px;}
body{font-size:11px; font-family:"Lucida Grande", Arial, sans-serif; color:#6d6d6d;}
.accToggler{
  margin: 3px auto;
  padding: 3px;
  width: 400px;
  background: #acc95f;
  color: #f4f4f4;
  border: 1px solid #fff;
  cursor: pointer;
}
.accContent{
  margin: 0px auto;
  width: 400px;
}
a, a:visited{
font-family:"Lucida Grande", Arial, sans-serif; color:#6d6d6d;
}

Accordion with color transition example - solutoire.com


Accordion with color transition example - solutoire.com

See the 'Javascript used in this example' tab for the options used in this example.


Click me!


  
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eu elit. Sed consequat neque et sapien. In hac habitasse platea dictumst. In hac habitasse platea 
    dictumst. Donec justo dui, aliquam ac, feugiat nec, malesuada ac, enim. Etiam consequat nulla eget metus malesuada tincidunt. Ut ultrices nonummy metus. 
    Pellentesque pharetra neque eu urna. In nec ligula. Curabitur purus ligula, consectetuer id, auctor et, gravida pretium, est. Aenean vitae neque. Integer dolor 
    enim, ultricies semper, ullamcorper at, mollis at, mauris.
  


  Click me!


  
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eu elit. Sed consequat neque et sapien. In hac habitasse platea dictumst. In hac habitasse platea 
    dictumst. Donec justo dui, aliquam ac, feugiat nec, malesuada ac, enim. Etiam consequat nulla eget metus malesuada tincidunt. Ut ultrices nonummy metus. 
    Pellentesque pharetra neque eu urna. In nec ligula. Curabitur purus ligula, consectetuer id, auctor et, gravida pretium, est. Aenean vitae neque. Integer dolor 
    enim, ultricies semper, ullamcorper at, mollis at, mauris.
  


  Javascript used in this example


  
    
    var accordion;
var accordionTogglers;
var accordionContents;
window.onload = function() {
  accordionTogglers = document.getElementsByClassName('accToggler');
  
  accordionTogglers.each(function(toggler){
    //remember the original color
    toggler.origColor = toggler.getStyle('background-color');
    //set the effect
    toggler.fx = new Fx.Color(toggler, 'background-color');
  });
    
  accordionContents = document.getElementsByClassName('accContent');
  accordion = new Fx.Accordion(accordionTogglers, 
    accordionContents,{
    //when an element is opened change the
    //background color to blue
    onActive: function(toggler){
      toggler.fx.toColor('#6899CE');
    },
    onBackground: function(toggler){
      //change the background color to the original (green) 
      //color when another toggler is pressed
      toggler.setStyle('background-color', toggler.origColor);
    }
  });    
}
    
  


  CSS used in this example


  
  
.accToggler{
  margin: 3px auto;
  padding: 3px;
  width: 400px;
  background: #acc95f;
  color: #f4f4f4;
  border: 1px solid #fff;
  cursor: pointer;
}
.accContent{
  margin: 0px auto;
  width: 400px;
}
  


  
  ©2006 solutoire.com