J2.5

Difference between revisions of "Creating Mootools accordion or simple slider/toggler"

From Joomla! Documentation

m (Fix: added closing ' that was missing)
(Remove review tag. Add note this isn't recommended)
 
Line 1: Line 1:
 
{{version/tutor|2.5|platform=11.1|target=from}}
 
{{version/tutor|2.5|platform=11.1|target=from}}
{{review}}
+
 
 +
{{note| This demonstration proves a simple example. For more using a more Joomla Native method you are recommended to use the JHtmlSliders API for this. API Docs are available [https://api.joomla.org/cms-2.5/classes/JHtmlSliders.html here] and there are various examples on the forums and the Joomla Stack Exchange}}
 +
 
 
Simple example to create a simple accordion. Can also be used to make a simple slide-toggler (just use 1 link).
 
Simple example to create a simple accordion. Can also be used to make a simple slide-toggler (just use 1 link).
 
In this example all the accordions (slider) are closed by default.
 
In this example all the accordions (slider) are closed by default.

Latest revision as of 04:22, 1 April 2020

The "J2.5" namespace is a namespace scheduled to be archived. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

This demonstration proves a simple example. For more using a more Joomla Native method you are recommended to use the JHtmlSliders API for this. API Docs are available here and there are various examples on the forums and the Joomla Stack Exchange

Simple example to create a simple accordion. Can also be used to make a simple slide-toggler (just use 1 link). In this example all the accordions (slider) are closed by default.

The php code (e.g. inside template):

//Add Slide/toggle behavior
JHTML::_('behavior.framework',true);
$this->document->addScriptDeclaration('
		window.addEvent("domready", function( ){
		navAcc = new Accordion( $$( ".accordion .accT" ), $$( ".accordion .accE" ), {display: -1, alwaysHide: true}  );
}');

Your html should look like this:

<div class="accordion">
	<a class="accT">Link 1</a>
	<div class="accE">Container 1</div>
	<a class="accT">Link 1</a>
	<div class="accE">Container 2</div>
	<a class="accT">Link 1</a>
	<div class="accE">Container 3</div>
</div>