PLEASE NOTE:

THIS IS NOW OBSOLETE. THERE IS NO JQUERY UI ACCORDION IN THE CONCRETE5 CORE

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