Visualforce Accordion Component - An Easy Way to Implement jQuery Accordion in a VF Page

[Live Demo]

[Updated To 1.1]

Well while working with Visualforce pages, you will feel like the UI is kinda old and not that catchy. But believe me VF is not that bad at all!  You just need to add the right ingredients.

And guess what the most stable js library JQUERY and JQUERY UI mixes very well with Visualforce pages, to give awesome results. JQUERY has very long list of widgets and plugin and they are pretty easy to implement. One of the commonly used widget is the Accordion. Implementing this in a VF page is not that difficult. But for quick implementation a vf component will be really handy. So here is Visuaforce Components that automatically does all the JQUERY stuff for you and creates a awesome looking Accordion. No javascript coding just include the tags/components and enjoy the JQUERY love. 

How to use the component?

The accordion is generated by the help of two components :

• <c:Accordion> : This is the wrapper which holds all the accordion section together
• <c:AccordionSection> : This element actually gets converted into a accordion section.

Below is the code to generate a accordion similar to the attached screen.

<c:Accordion >  
     <c:AccordionSection title="Section 1">  
       Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque.   
       Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh  
       Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada.   
       Vestibulum a velit eu ante scelerisque vulputate.  
     </c:AccordionSection>  
     <c:AccordionSection title="Section 2">  
       Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus.   
       Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit,   
       faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.  
     </c:AccordionSection>  
   </c:Accordion>  

The plugin is updated to 1.1. The new plugin features a script manager that imports only necessary plugins,script and stylesheet. This mainly helps when multiple Accordion component are used on the same page. Instead of importing the resources multiple times they are imported only once by the script manager.

Demo And Installation : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000007rdIr