Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This disclosure element is wrapped in a DIV tag, so the H2 above this paragraph (and this paragraph) can co-exist in the effect structure.
This works because the effect only “wires” the H2 tags that are direct children of #item1. The intermediate DIV means that the DIV itself is the peer of the header, and the H2 inside it is “insulated” from the machinations of the effect.
This page demonstrates an accordion effect with disclosure triangles. The base element #item1 contains a mix of H2 headers and other elements, and each header is made responsible for every item following directly after it, up to but not including the next header.
This approach allows a mixture of item types in the same “group”.
Finally, whenever a header is “open”, the classname open is added to it. This allows the visual style of the open section to change.
<script type="text/javascript">
var heads = $$('#item1 > h2');
heads.each(function(head){
head['elms'] = [];
head.nextSiblings().each(function(elm){
if(!elm.match('h2')){
head.elms.push(elm.hide());
}else{
throw $break;
}
});
head.observe('click', function(evt){
evt.stop();
// uncomment next line to only show one item open at a time
// heads.invoke('removeClassName', 'open').each(function(elm){ elm.elms.invoke('hide')});
this.elms.invoke('toggle');
this.toggleClassName('open')
});
});
// show the third one open when the page loads
heads[2].addClassName('open').elms.invoke('show');
</script>The rest of the effect is done in CSS, using generated content to make the disclosure triangles out of Unicode arrow characters. In addition to changing the character shown when the header has the classname open applied to it, you could alter the color, font style, opacity — almost everything is up for grabs.
#item1 h2 {
cursor: pointer;
background-color: #eee;
padding-left: 24px;
position: relative;
}
#item1 p {
padding-left: 24px;
padding-right: 24px;
}
#item1 h2:after {
content: '▸';
position: absolute;
left: 6px;
top: 0px;
opacity: 0.5;
font-size: 20px;
}
#item1 h2.open:after {
content: '▾';
}