AccordionTag

Introduction

This tag renders a accordion from a given list or an map.

For setup custom themes for the accordion take look at the head tag.

Samples

Accordion with items

<s:url var="urlajax1" action="ajax1"/>
<s:url var="urlajax4" action="ajax4"/>
<sj:accordion id="accordion" heightStyle="content" animate="true">
	<sj:accordionItem title="Mauris mauris ante">
		<sj:div id="divInAccrodionItem1" href="%{urlajax1}"/>
	</sj:accordionItem>
	<sj:accordionItem title="Sed non urna">
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
	</sj:accordionItem>
	<sj:accordionItem title="Nam enim risus">
		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
	</sj:accordionItem>
	<sj:accordionItem title="Cras dictum" onClickTopics="loadAccordionDiv">
		<sj:div id="divInAccrodionItem4" href="%{urlajax4}" listenTopics="loadAccordionDiv" deferredLoading="true"/>
	</sj:accordionItem>
</sj:accordion>

Fill List in Action

public class AccordionAction {

	private Map<String, String> mylist;

	public String execute() {
		mylist = new HashMap<>();
		mylist.put("Section 1", "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.");
		mylist.put("Section 2", "Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.");
		mylist.put("Section 3", "Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.");
		mylist.put("Section 4", "Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.");

		return SUCCESS;
	}

	public Map<String, String> getMylist() {
		return mylist;
	}
}

Render accordion from list

	<sj:accordion list="mylist"/>

Open the Accordion on mouse over.

	<sj:accordion list="mylist" openOnMouseover="true"/>

Accordion with AJAX content

You can use the attributes paramKeys and paramValues to append parameters to each URL.

<s:url var="urlecho" action="echo"/>
<sj:accordion
	id="accordionremote"
	list="accordion"
	listKey="title"
	listValue="content"
	paramKeys="echo"
	paramValues="content"
	href="%{urlecho}"
	active="false"
	heightStyle="content"
/>

Topics

Topic	Event	Parameter
onBeforeTopics	changestart	event.originalEvent.event, event.originalEvent.ui
onChangeTopics	change	event.originalEvent.event, event.originalEvent.ui

Attributes

Dynamic Attributes Allowed: false
Name	Required	Default	Evaluated	Type	Description
accesskey	false		false	String	Set the html accesskey attribute on rendered html element
active	false		false	String	Selector for the active element. Set to false to display none at start. Needs collapsible: true. Default: 0
animate	false	false	false	String	If and how to animate changing panels. Can be Boolean, Number, String (Escaped with simple ' sign) or JavaScript Object
collapsible	false	false	false	Boolean	Whether all the sections can be closed at once. Allows collapsing the active section by the triggering event. Default: false
cssClass	false		false	String	The css class to use for element
cssErrorClass	false		false	String	The css error class to use for element
cssErrorStyle	false		false	String	The css error style definitions for element to use
cssStyle	false		false	String	The css style definitions for element to use
disabled	false		false	String	Set the html disabled attribute on rendered html element
errorPosition	false		false	String	Define error position of form element (top|bottom)
header	false	h3	false	String	Selector for the header element. Default: h3
heightStyle	false	auto	false	String	Controls the height of the accordion and each panel. Possible values 'auto': All panels will be set to the height of the tallest panel, 'content': Each panel will be only as tall as its content, 'fill': Expand to the available height based on the accordion's parent height.
href	false		false	String	The URL to call to obtain the content. Note: If used with ajax context, the value must be set as an url tag value.
id	false		false	String	HTML id attribute
javascriptTooltip	false	false	false	Boolean	Use JavaScript to generate tooltips
key	false		false	String	Set the key (name, value, label) for this particular component
label	false		false	String	Label expression used for rendering an element specific label
labelSeparator	false	:	false	String	String that will be appended to the label
labelposition	false		false	String	Define label position of form element (top/left)
list	false		false	String	Iterable source to populate from. If the list is a Map (key, value), the Map key will become the option 'value' parameter and the Map value will become the option body.
listKey	false		false	String	Property of list objects to get field value from
listValue	false		false	String	Property of list objects to get field content from
name	false		false	String	The name to set for element
onAfterValidationTopics	false		false	String	A comma delimited list of topics that published after the Ajax validation. event.originalEvent.formvalidate to see if validation passed/failed.
onAlwaysTopics	false		false	String	A comma delimited list of topics that published always
onBeforeTopics	false		false	String	Topics that are published before a load
onBlurTopics	false		false	String	A comma delimited list of topics that published when the element is blured
onChangeTopics	false		false	String	A comma delimited list of topics that published when the element changed
onCompleteTopics	false		false	String	A comma delimited list of topics that published when the element ajax request is completed (will override settings for a target container if provided)
onCreateTopics	false		false	String	A comma delimited list of topics that published when the accordion is created
onDisableTopics	false		false	String	A comma delimited list of topics that published when the element disabled
onEnableTopics	false		false	String	A comma delimited list of topics that published when the element is enabled
onErrorTopics	false		false	String	A comma delimited list of topics that published when the element ajax request returns an error (will override settings for a target container if provided)
onFocusTopics	false		false	String	A comma delimited list of topics that published when the element is focused
onSuccessTopics	false		false	String	A comma delimited list of topics that published when the element ajax request is completed successfully (will override settings for a target container if provided)
onblur	false		false	String	Set the html onblur attribute on rendered html element
onchange	false		false	String	Set the html onchange attribute on rendered html element
onclick	false		false	String	Set the html onclick attribute on rendered html element
ondblclick	false		false	String	Set the html ondblclick attribute on rendered html element
onfocus	false		false	String	Set the html onfocus attribute on rendered html element
onkeydown	false		false	String	Set the html onkeydown attribute on rendered html element
onkeypress	false		false	String	Set the html onkeypress attribute on rendered html element
onkeyup	false		false	String	Set the html onkeyup attribute on rendered html element
onmousedown	false		false	String	Set the html onmousedown attribute on rendered html element
onmousemove	false		false	String	Set the html onmousemove attribute on rendered html element
onmouseout	false		false	String	Set the html onmouseout attribute on rendered html element
onmouseover	false		false	String	Set the html onmouseover attribute on rendered html element
onmouseup	false		false	String	Set the html onmouseup attribute on rendered html element
onselect	false		false	String	Set the html onselect attribute on rendered html element
openOnMouseover	false	false	false	Boolean	open accordion on mouse over event. Default: false
openTemplate	false		false	String	Set template to use for opening the rendered html.
paramKeys	false		false	String	Comma delimited List of parameter names for the href url. e.g. queryParam1,queryParam2
paramValues	false		false	String	Comma delimited List of List Keys for parameter values. e.g. queryValue1,queryValue2
requiredLabel	false	false	false	Boolean	If set to true, the rendered element will indicate that input is required
requiredPosition	false		false	String	Define required position of required form element (left|right)
tabindex	false		false	String	Set the html tabindex attribute on rendered html element
template	false		false	String	The template (other than default) to use for rendering the element
templateDir	false		false	String	The template directory.
title	false		false	String	Set the html title attribute on rendered html element
tooltip	false		false	String	Set the tooltip of this particular component
tooltipConfig	false		false	String	Deprecated. Use individual tooltip configuration attributes instead.
tooltipCssClass	false	StrutsTTClassic	false	String	CSS class applied to JavaScrip tooltips
tooltipDelay	false	Classic	false	String	Delay in milliseconds, before showing JavaScript tooltips
tooltipIconPath	false		false	String	Icon path used for image that will have the tooltip
value	false		false	String	Preset the value of input element.