Creating an accordion pane in Concrete 5

Posted by Jeremy on April 17, 2011

How to use the built-in jQuery UI to add an accordion to a page type on your concrete5 website.

For an interactive demo of how this works, go here:

http://accordiondemo.werstnet.com/

Step 1 - Create a page attribute for accordion section. 

1. Go to dashboard/pages/attributes and add a new select attribute type
2. Handle "accordion_sections"
3. Name "Accordion Sections"
4. Not searchable
5. Allow Multiple options to be chosen
6. Allow users to add to this list
7. Option Order display order
8. No need to enter options now, they will not show up on the end page anyway

Step 2 - Create a page type template in your theme

1. Copy /yourtheme/default.php to /yourtheme/accordion.php
2. Go to /dashboard/pages/themes
3. Inspect your theme to see the new file and activate it
   

Edit the newly created file, add this where you would like the accordion to appear:

<div id="accordion">
          <?php
                    $sections = $c->getCollectionAttributeValue('accordion_sections');
                    if (count($sections)>0){
                    foreach ($sections as $opt) {?>
                    <h3><?= $opt->value; ?></h3>
                    <div>
                         <?php
                         $a = new Area($opt->value);
                         $a->setBlockLimit(1);
                         $a->display($c);
                         ?>
                    </div>
          <? }
} ?>
</div>

Step 3 - Make a controller for your page type

1. Create /site_root/controllers/page_types/accordion.php
2. Put this in the file

<?php
 
defined('C5_EXECUTE') or die(_("Access Denied."));
 
class AccordionPageTypeController extends Controller {
 
	public function on_start() {
		$html = Loader::helper('html');
		$this->addHeaderItem($html->css('jquery.ui.css'));
		$this->addHeaderItem($html->css('ccm.dialog.css'));
		$this->addHeaderItem($html->javascript('jquery.ui.js'));
		$this->addHeaderItem($html->javascript('ccm.dialog.js'));
		$js_string = "\n";
		$js_string .= "<script type='text/javascript'>\n";
		$js_string .= "	$(function() {\n";
		$js_string .= "		$( '#accordion' ).accordion({\n";
		$js_string .="				collapsible: true\n";
		$js_string .= "		});\n";
		$js_string .= "	});\n";
		$js_string .= "</script>\n";
		$this->addHeaderItem($js_string);
	}
}

Step 4 - Associate your page type with the accordion_sections attribute.

1. Go to /dashboard/pages/types
2. Click "Edit" on accordion
3. Click the checkbox next to accordion sections
4. Click "Update Page Type"

Step 5 - Add an accordion page

1. Go to dashboard / sitemap
2. Click the page you want your test page to show up under and choose 'add page'
3. Accordion for page type
4. Add as many accordion sections as you would like to have on the page
5. Click "Add Page"
6. Click New Page
7. Choose "Visit"
8. Edit Page
9. You should see an accordion pane with the names of your sections, and an area in each pane to add content to

Step 6 - Update your css

The UI files do not include styling for the h3 tag, so you need to add a little css to get them to look nice:

#accordion h3 {
	padding: 5px 5px 5px 30px;
}