Super Simple jQuery Accordion Snippet

This very simple jQuery Accordion Snippet will help you save space and divide your content into different logical sections. No fancy setting parameters, no need for a function call, simply add the JS file to your head and enjoy a minimal, cross-browser working Accordion.

Preview

Simple Lingulo-Accordion

What you need to do

  1. Include the minified or the original JS file
  2. Add the CSS rules to your CSS file
  3. Add your HTML code
    • create an element with the ID lingulo-accordion (or change it in the JS file if you would like to use a different ID)
    • for each toggable section create a div
    • add an element h3 as well as your content into the div

Please note: I do not guarantee the correctness of this script and can not be made responsible for any damage or loss caused through the use of this script

Chris @Lingulocom

I am a frontend and backend web developer who loves building up new projects from scratch. In my blog "Lingulo" me and some guest authors regularly post new tutorials, web design trends or useful resources.

View Comments

  • Chris, great simple solution! I'm using this to show details on a product page that has multiple instances of the "" tag. I need to have each individual product detail work independently when clicked. Currently, when I click the accordion, it only opens the first instance of the DIV. I know I need to add a dynamic ID which I can easily do using PHP in the tag above, but not sure what I need to add in the JS file.

    • Hi Shamgarr,

      I think some part of your comment has been removed unfortunately. Which tags do you use multiple times? Could you provide a link to your page, then I could have a look at it.

      Best regards

      Chris

  • Super Script. Unfortunately I didn't see the download link. Do I have to find the jQuery file on the internet?
    Hi Christoph, I have another question (problem) concerning the lingulo-website which I downloaded and changed to meet my needs. Now the question: In the header there is this fantastic image slider. I would like to use this script in another part of the home page with different size pictures. How can I adapt the size / format of the images shown on the page - e.g. 300x200px? Image sliders are so powerful that I would like to be able to really control them.
    Thanx a million

    Josef

    • Hey Josef,

      thank you for your comment, to change the height of the images you would need to adapt the "height" value in the function call $('#slides').slidesjs({ height: your_height

      Best regards

      Chris

Share
Published by

Recent Posts

The Best Programming Languages for Enterprise Software Development

Over the last decade, both enterprises and the world of programming have witnessed big changes. With the introduction of new…

4 years ago

Why Small Businesses Are Creating Their Own Apps

No matter the size of your company, developing the right app with the right team can have an outsized return…

4 years ago

3 Exceptional PR Campaigns to Inspire Your Business

The best PR campaigns are memorable and distinctive. They can go viral, get press coverage, and, ultimately, help your brand…

4 years ago

How COVID-19 has changed the restaurant delivery app industry

2020 has been dubbed “the year of change” and it’s quite easy to see why that is. COVID-19 has put…

4 years ago

What are the Best Programming Languages to Learn for a Career in FinTech?

If you’re thinking about a career in FinTech, then you’ll also need to know the best programming languages to learn.…

4 years ago

How to Create a Catchy Logo for Your Website?

If you want to create a catchy logo for your website, then you are in the right place because today,…

4 years ago