Accordion

  • JavaScript 
    • /javascriptO2/prototype.js
    • /javascriptO2/effects.js
    • /javascriptO2/accordion_stickMan.js
    • /javascriptO2/accordion_stickMan_Load.js
      • Note: this file is optional - chunk of code can be placed in the page js if one is specifically created for it 
  • HTML Structure
    • <div id="vertical_container">
      • <ul>
        • <li>
          • <div class="accordion_toggle">Title</div>
          • <div class="accordion_content">asdf</div>
    • <script type="text/javascript" >
           var hideVerticalAccordionsOnLoad = $$('.accordion_toggle');
           hideVerticalAccordionsOnLoad.each(function(accordion) {
                $(accordion.next(0)).setStyle({
                   height: '0px'
                });
           });
      </script>
  • Open First Accordion
    • Add this to the loadAccordions() function
      • setTimeout(runFirst,1000);
      • function runFirst(){
             bottomAccordion.activate($$('#vertical_container .accordion_toggle')[0]);
        } 
  • Multiple Accordions on the same page
    • Duplicate styles 
      • vertical_container2, accordion_toggle2, accordion_content2


    • var bottomAccordion;   //Set here to be accessed by runFirst

      function loadAccordions() {
               bottomAccordion = new accordion('vertical_container', {
                 resizeSpeed : 8,
                 classNames : {
                       toggle : 'accordion_toggle',
                       toggleActive : 'accordion_toggle_active',
                       content : 'accordion_content'
                  },
                  direction : 'vertical',
                  onEvent : 'click'
             });
             var bottomAccordion2 = new accordion('vertical_container2', {
                   resizeSpeed : 8,
                   classNames : {
                        toggle : 'accordion_toggle2',
                        toggleActive : 'accordion_toggle_active2',
                        content : 'accordion_content2'
                   },
                   direction : 'vertical',
                   onEvent : 'click'
             }); 
            
             setTimeout(runFirst,1000);
       }
      function runFirst(){
             bottomAccordion.activate($$('#vertical_container .accordion_toggle')[0]);
      }

  • Targeting Accordion from somewhere else
    • function runAccord(which){
             bottomAccordion.activate($$('#vertical_container .accordion_toggle')[which]);
      } 
  • Troubleshooting
    • Elements below do to not move to accompany accordion movement
      • Height of container element should not be set
    • Accordion content does not reveal with slide, just turns on and off
      • It means the class is not being found.  Be sure the style data (especially if you've added a second accordion) is registering - validate you can change it, or be sure you're that you've added style data.
  • Tips
    • ul/li not needed
  • Reference