One small example of this is using K2 to create content accordions by using MooTools, a little HTML, and a little CSS. The MooTools feature we're going to implement is the FX.Accordion.
So to set this up you'll need a few things:
- Joomla 1.5 or Joomla 1.7
- Basic HTML and CSS skills, and the ability to edit files on your webserver.
Start out by creating a new category in K2 that you want to place items in that will displayed as an accordion. Then add two or three items to the category.
From here you'll need to then get into your file system. Browse to:
Duplicate the "default" directory here. This is K2's default HTML layouts. We're going to change some code in the duplicated template. I recommend naming this something like "mt_accordion" so you'll know what it is later. Make sure you assign this template to the category you've created!
The changes are made are subtle but important. To start I changed the accordion action text tag from an H2 to an H3, and added K2's default item title css class. Then I changed the accordion body div class name to K2's default content container class. We're going to make the same changes to the CSS they provide:
As you're wondering by now - where does this code go? Well you're going to use Joomla's API to push this code into your site's index.php file so it gets loaded. This is going to be done with some simple PHP, and you're editing the category_item.php file that is in the directory you duplicated earlier.
Joomla has an API that will allow us to do this by first of all getting the "document" and inserting the code into it. So in category_item.php file, add in this line (make sure you're within the
Now we're set up to insert the code we have using two add functions. AddScript and addStyle:
The last very important change we need to make to this file is adding a div id that the mootools class FX.Accordion needs on the page so it knows what content belongs in an accordion. So the very first HTML code in the category_item.php file needs to be this:
Then at the very end we need to close this tag by adding a closing div:
That should do it. When you create a menu item to this K2 category, the item titles should be listed down the page, requiring a click to show/hide the content.