Wiki

HowTo - Usage of Accessible Accordion without modChrome

You can use the Accessible Accordion from the JYAML 4.x+ Framework everywhere you want, within Joomla!.

Script Path: /libraries/jyaml/html/js/accessible_accordion.js

HTML Markup Example

<div class="jyaml-accordion myAccordion">
 <div class="accordion_content clearfix">
 <div class="accordion-container clearfix">
 
 <h3 class="accordionhead"><span>Section 1</span></h3>
 <div class="accordionbody">
 <div class="accordionbody-content clearfix">
 Section 1: Contents
 </div>
 </div>
 
 <h3 class="accordionhead"><span>Section 2</span></h3>
 <div class="accordionbody">
 <div class="accordionbody-content clearfix">
 Section 2: Contents
 </div>
 </div>
 
 <h3 class="accordionhead"><span>Section 3</span></h3>
 <div class="accordionbody">
 <div class="accordionbody-content clearfix">
 Section 3: Contents
 </div>
 </div>
 
 </div>
 </div>
</div>

Required Javascript and options

<?php
 // JYAML Instance
 $jyaml = JYAML::getDocument();
 
 // JYAML Accordion Options (see: [JOOMLA_ROOT]/libraries/jyaml/html/js/accessible_accordion.js)
 $options = array();
 $options[] = "syncheights: false";
 $options[] = "saveState: false";
 $options[] = "autoAnchor: false";
 $options[] = "currentInfoText: ' ".JText::_('JYAML_TABS_CURRENT_TEXT')." '";
 $options[] = "currentInfoPosition: '".($jyaml->direction=='rtl' ? 'after' : 'before')."'";
 
 // MooTools Accordion Options (see: http://mootools.net/docs/more/Fx/Fx.Accordion)
 $acOptions = array();
 $acOptions[] = "duration: 500";
 $acOptions[] = "display: 0";
 $acOptions[] = "height: true";
 $acOptions[] = "width: false";
 $acOptions[] = "opacity: false";
 $acOptions[] = "alwaysHide: true";
 $acOptions[] = "trigger: 'click'";
 $options[] = "accordion: {".implode(', ', $acOptions)."}"; // Apply options
 
 // Add Javascript
 JHtml::_('jyaml.accordion', '.myAccordion', $options);
 // Add Stylesheet
 $jyaml->addStylesheet($jyaml->getUrl('css', 'screen.accordion.css'));

For all options look in the Javascript source-code (/libraries/jyaml/html/js/accessible_accordion.js)
The Code JHtml::_('jyaml.accordion', '.myAccordion', $options); calls the function in /libraries/jyaml/html/jyaml.php

Basic Stylesheet

See: /templates/jyaml/css/screen.accordion.css