Using MooTools in Joomla!

Adding an Accordion Effect to the Header of Your Template

I recently had occassion to want to place an accordion effect in the top of a template.

example image - accordion effectWhen you click a bar, it turns yellow and opens up its picture. When you hover over a bar, it also turns yellow.

Also, some of the images are linked to menu links so that if you change to one of the linked menu items, that particular picture pops open as opposed to always being the same picture actively displayed on page load.

In this article, we will take a look at how to integrate the javascript with the template.

I created a file to hold the javascript and included that file in my template’s index.php. I also include the mootools in case they are not already loaded at the top of the template. I designed the css to style the accordion which will be in the “header” div. Each section of the accordion is called a “stretcher” and has the active and non-active “tab” as well as the image to display for the tab.

Here’s the relevant code in my template’s index.php file to handle putting the accordion in the top of the page

 <?php
JHTML::_(‘behavior.mootools’);

$link1 = $this->params->get(‘link1’);
if ($link1 == ”) {
    $link1 = 0;
}
$link2 = $this->params->get(‘link2’);
if ($link2 == ”) {
    $link2 = 0;
}
$link3 = $this->params->get(‘link3’);
if ($link3 == ”) {
    $link3 = 0;
}
$link4 = $this->params->get(‘link4’);
if ($link4 == ”) {
    $link4 = 0;
}
$link5 = $this->params->get(‘link5’);
if ($link5 == ”) {
    $link5 = 0;
}
$itemid = JRequest::getVar(‘Itemid’);
$image_default = true;
$image_1 = false;
$image_2 = false;
$image_3 = false;
$image_4 = false;
$image_5 = false;
switch ($itemid) {
    case $link1:
        $image_default = false;
        $image_1 = true;
    break;
    case $link2:
        $image_default = false;
        $image_2 = true;
    break;
    case $link3:
        $image_default = false;
        $image_3 = true;
    break;
    case $link4:
        $image_default = false;
        $image_4 = true;
    break;
    case $link5:
        $image_default = false;
        $image_5 = true;
    break;
    default:
        $image_default = true;
    break;
}

?>
  <div id=”header”>
      <div id=”header-container”>
        <ul id=”accordion”>
          <li>
            <div class=”stretcher”  <?php if($image_default) { echo “style=\”width:579px;\””; }?> >
            <img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/yellowbardefault.png” alt=”” class=”tab” <?php if (!$image_default) { echo “style=\”visibility:hidden\””;} ?> />
            <img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/greybardefault.png” alt=”” class=”tab”  <?php if ($image_default) { echo “style=\”visibility:hidden\””; }?>  />
              <div style=”padding-left:45px;”><img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/slide_default.png” alt=”” class=”img” /></div>
            </div>
          </li>
          <li>
            <div class=”stretcher” <?php if($image_1) { echo “style=\”width:579px;\””; }?>> <img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/yellowbar1.png” alt=”” class=”tab” <?php if (!$image_1) { echo “style=\”visibility:hidden\””; }?> /> <img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/greybar1.png” alt=”” class=”tab” <?php if ($image_1) { echo “style=\”visibility:hidden\””; }?> />
              <div style=”padding-left:45px;”><img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/slide1.png” alt=” ” class=”img” /></div>
            </div>
          </li>
          <li>
            <div class=”stretcher” <?php if($image_2) { echo “style=\”width:579px;\””; }?>> <img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/yellowbar2.png” alt=”” class=”tab” <?php if (!$image_2) { echo “style=\”visibility:hidden\””; }?>  /> <img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/greybar2.png” alt=”” class=”tab” <?php if ($image_2) { echo “style=\”visibility:hidden\””; }?> />
              <div style=”padding-left:45px;”><img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/slide2.png” alt=” ” class=”img” /></div>
            </div>
          </li>
          <li>
            <div class=”stretcher” <?php if($image_3) { echo “style=\”width:579px;\””; }?>> <img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/yellowbar3.png” alt=”” class=”tab”  <?php if (!$image_3) { echo “style=\”visibility:hidden\””; }?>  /> <img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/greybar3.png” alt=”” class=”tab” <?php if ($image_3) { echo “style=\”visibility:hidden\””; }?> />
              <div style=”padding-left:45px;”><img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/slide3.png” alt=” ” class=”img” /></div>
            </div>
          </li>
          <li>
            <div class=”stretcher” <?php if($image_4) { echo “style=\”width:579px;\””; }?>> <img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/yellowbar4.png” alt=”” class=”tab”  <?php if (!$image_4) { echo “style=\”visibility:hidden\””; }?> /> <img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/greybar4.png” alt=”” class=”tab”  <?php if ($image_4) { echo “style=\”visibility:hidden\””; }?> />
              <div style=”padding-left:45px;”><img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/slide4.png” alt=” ” class=”img” /></div>
            </div>
          </li>
          <li>
            <div class=”stretcher” <?php if($image_5) { echo “style=\”width:579px;\””; }?>> <img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/yellowbar5.png” alt=”” class=”tab”  <?php if (!$image_5) { echo “style=\”visibility:hidden\””; }?> /> <img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/greybar5.png” alt=”” class=”tab” <?php if ($image_5) { echo “style=\”visibility:hidden\””; }?> />
              <div style=”padding-left:45px;”><img src=”<?php echo $this->baseurl . ‘/templates/’ . $this->template; ?>/images/slider_images/slide5.png” alt=” ” class=”img” /></div>
            </div>
          </li>
        </ul>
      </div>
    </div>

The templateDetails.xml file defines the parameters that hold the Itemid values of the menu items to link images to:

  <params>
        <param name=”link1″ type=”text” default=”0″ label=”Link 1 ItemID” description=”item id of menu item to match this picture to”>        </param>
        <param name=”link2″ type=”text” default=”0″ label=”Link 2 ItemID” description=”item id of menu item to match this picture to”>        </param>
        <param name=”link3″ type=”text” default=”0″ label=”Link 3 ItemID” description=”item id of menu item to match this picture to”>        </param>
        <param name=”link4″ type=”text” default=”0″ label=”Link 4 ItemID” description=”item id of menu item to match this picture to”>        </param>
        <param name=”link5″ type=”text” default=”0″ label=”Link 5 ItemID” description=”item id of menu item to match this picture to”>        </param>
  </params> 
 

The javascript to make the accordion work:

/* begin Accordion */
window.addEvent(‘domready’, function(){
var szSmall = 45, szFull = 579;
var accordion = $$(“#accordion .stretcher”);
var fx = new Fx.Elements(accordion, {wait: false, duration: 300, transition: Fx.Transitions.Expo.easeInOut});
    accordion.each(function(stretcher, i) {
    stretcher.addEvent(“click”, function(event) {
        var o = {};
        o[i] = {width: [stretcher.getStyle(“width”).toInt(), szFull]}
       
        toglers = stretcher.getElementsByTagName(“img”);
       
        if (toglers[0].style.visibility == “hidden”) {
            toglers[0].style.visibility = “visible”;
            toglers[1].style.visibility = “hidden”;
        }
        accordion.each(function(other, j) {
            if(i != j) {
                var w = other.getStyle(“width”).toInt();
                if(w != szSmall) o[j] = {width: [w, szSmall]};
            toglers = other.getElementsByTagName(“img”);
            toglers[1].style.visibility = “visible”;
            toglers[0].style.visibility = “hidden”;
            }
        }); /* accordion.each */
        fx.start(o);
    }); /*stretcher.addEvent */
}); /* accordion.each */
var tabs = $$(“#accordion .stretcher”);
tabs.each(function(stretcher, i) {
    stretcher.addEvent(“mouseenter”, function(event) {
    toglers = stretcher.getElementsByClassName(“tab”);
        if (toglers[0].style.visibility == “hidden”) {
            toglers[0].style.visibility = “visible”;
            toglers[1].style.visibility = “hidden”;
        }
    });
});
var tabs = $$(“#accordion .stretcher”);
tabs.each(function(stretcher, i) {
    stretcher.addEvent(“mouseleave”, function(event) {
    toglers = stretcher.getElementsByClassName(“tab”);
        if (toglers[0].style.visibility == “visible”) {
            toglers[0].style.visibility = “hidden”;
            toglers[1].style.visibility = “visible”;
        }
    });
});
});    /* window.addEvent */

Leave a Reply

Your email address will not be published. Required fields are marked *