A major reason I love using K2 (a Joomla CCK) is because it allows me to do some cool things with content that I can train website admins to use without having to know how to write HTML, CSS, or Javascript, and still give them some powerful features. I do this with K2 by heavily using the Templating feature and writing a "content template" for a specific category, adding some custom fields, and then working the exact layout out and leaving the user nothing but content areas to "fill out". Managing content becomes a very simple point and click interface.

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
• K2
• 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:

<joomla-root>/components/com_k2/templates

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! 

Now we need to add some minor changes to the category_item.php file in the new template directory you've created. This is gonna be some simple CSS, some Javascript (MooTools), HTML, and a little bit of PHP / Joomla API code. It's very simple.

On the MooTools accordion demo they have their samples of Javascript, HTML, and CSS. We can easily use that as our base point. I've got the code they had and made some very simple modifications:

window.addEvent('domready', function(){  new Fx.Accordion($('accordion'), '#accordion h3.catItemTitle', '#accordion .catItemBody');});

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:

#accordion {
 margin: 20px 0 0;
 max-width: 400px;
}
#accordion H3 {
 background: #6B7B95;
 color: white;
 cursor: pointer;
 font: 12px Helvetica, Arial, sans-serif;
 line-height: 16px;
 margin: 0 0 4px 0;
 padding: 3px 5px 1px;
}
#accordion .catItemBody {background-color: #F4F5F5;}
#accordion .catItemBody p {margin: 0.5em 0;padding: 0 6px 8px 6px;}

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 tags):

$document = JFactory::getDocument();

We're going to use two functions to push our CSS and Javascript to the document - but those functions require us to pass PHP variables. So we need to create two variables and in those variables, we'll assign the code we created above. That will look something like this:

$accordion_js = "
window.addEvent('domready', function(){   new Fx.Accordion($('accordion'), '#accordion h3.catItemTitle', '#accordion .catItemBody'); }); ";

 $accordion_css = "
 #accordion  {   margin: 20px 0 0;   max-width: 400px; }
 #accordion H3 {
 background: #6B7B95;
 color: white;
 cursor: pointer;
 font: 12px Helvetica, Arial, sans-serif;
 line-height: 16px;
 margin: 0 0 4px 0;
 padding: 3px 5px 1px;
 }
 #accordion .catItemBody {
 background-color: #F4F5F5;
 }
 #accordion .catItemBody p {
 margin: 0.5em 0;     padding: 0 6px 8px 6px;
 }  ";

Now we're set up to insert the code we have using two add functions. AddScript and addStyle:

$document->addScriptDeclaration($accordion_js);
$document->addStyleDeclaration($accordion_css);

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:

><div id="accordion">

Then at the very end we need to close this tag by adding a closing div:

</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.

To see the exact file click here to view it on GitHub.