"
Team:KIT-Kyoto/Notebook-week11
From 2010.igem.org
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
