Actions

J2.5

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

From Joomla! Documentation

(Created page with "{{review}} Since {{JVer|11.1}}, {{JVer|1.6}} Simple example to create a simple accordion. Can also be used to make a simple slide-toggler (just use 1 link). In this example...")
 
m (Fix: added closing ' that was missing)
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
{{version/tutor|2.5|platform=11.1|target=from}}
 
{{review}}
 
{{review}}
Since {{JVer|11.1}},  {{JVer|1.6}}
 
 
 
 
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.
Line 12: Line 10:
 
window.addEvent("domready", function( ){
 
window.addEvent("domready", function( ){
 
navAcc = new Accordion( $$( ".accordion .accT" ), $$( ".accordion .accE" ), {display: -1, alwaysHide: true}  );
 
navAcc = new Accordion( $$( ".accordion .accT" ), $$( ".accordion .accE" ), {display: -1, alwaysHide: true}  );
});
+
}');
 
</source>
 
</source>
 
''Your html should look like this:''<source lang="html4strict">
 
''Your html should look like this:''<source lang="html4strict">
Line 25: Line 23:
 
</source>
 
</source>
  
[[Category:Development‏‎]] [[Category:mootools]] [[Category:javascript]]
+
[[Category:Development‏‎]] [[Category:mootools]]
 +
[[Category:JavaScript]]

Latest revision as of 06:01, 24 January 2014

Copyedit.png
This Page Needs Your Help

This page is tagged because it NEEDS REVIEW. You can help the Joomla! Documentation Wiki by contributing to it.
More pages that need help similar to this one are here. NOTE-If you feel the need is satistified, please remove this notice.


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>