Accordion

An accordion component integrates nicely in tapestry.

You have to pass the title and content panes as parameters to the accordion component. There is currently a limitation of fifty panels. Only panels which have both a title and content parameter block are displayed, however the indexes do not need to be sequential (hence the need for a limit).
Parameter "exclude" allows to skip rendering of specified tab indicated by it's index. Negative "exclude" value will remove last N tabs;
The currently selected pane is remembered between requests.

  • For the Accordion component this is done via a cookie that is identified by the component's id. This implies that accordion components with the same id on different pages will share this cookie. If this is not wanted than each accordion component should get a unique id, even if they are on different page, or use MemAccordion.

<span t:type="equanda/Accordion" t:id="accordion">
<t:parameter name="title1">First title</t:parameter>
<t:parameter name="content1">
<p>This is the content for the first pane</p>
<p>With some more text</p>
</t:parameter>
<t:parameter name="title2">Another title pane</t:parameter>
<t:parameter name="content2">
<p>With even more content</p>
</t:parameter>
<t:parameter name="title3">Latin text</t:parameter>
<t:parameter name="content3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero ipsum, volutpat nec, posuere vitae, pulvinar ut, quam. Morbi fringilla pulvinar nisi. Cras luctus leo sed orci. In id mi eget nunc blandit nonummy. Morbi at lacus. Ut sed elit. Donec libero. Sed feugiat tempor erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Nam lorem mi, accumsan id, commodo sit amet, interdum sit amet, augue.</p>
<p>Cras massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum accumsan neque vitae odio. Phasellus luctus arcu quis nibh. Maecenas leo. Ut aliquam hendrerit odio. Vestibulum luctus diam nec enim. Nam mi. Etiam eros turpis, ultrices et, ullamcorper nec, posuere sed, nisi. Integer placerat risus sit amet purus. Nulla elit purus, consequat sed, blandit in, feugiat bibendum, quam. In hac habitasse platea dictumst. Ut vel lorem. Ut pharetra leo. Sed sit amet felis. Nunc sed eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elit metus, euismod sed, laoreet a, aliquam a, enim.</p>
</t:parameter>
</span>

The component automatically handles the hiding of all (except one) panel at the start, and making sure the correct pane is selected when the title is clicked on.

How the accordion is displayed is handled using CSS. The classes which are used depend on the accordion component id. This also assures it will work when there are several accordion components on a page (just assure they have a different id).


.accordion_tit {
background-color: lightgray;
color: black;
height: 15px;
font-weight: normal;
padding-left: 5px;
padding-top: 3px;
padding-bottom: 3px;
cursor: pointer;
}

.accordion_tit a:link,
.accordion_tit a:visited,
.accordion_tit a:active,
.accordion_tit a:hover {
color: black;
text-decoration: none;
}

.accordion_atit {
font-weight: bold;
}

.accordion_ct {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 2px;
background-color: beige;
overflow: auto;
height: 200px;
}
  • 1. Accordion