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.


6 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. accordion doesn't collapse if you use in

    ReplyDelete
  3. accordion doesn't collapse if you use in apex:repeat

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. is their anyway to stylish the bar section area to match the Standard Salesforce UI?

    ReplyDelete
  6. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete