Add a jQuery Toggle to any website

jQuery Toggles, and sometimes called Accordions, are great for Grouping content, hiding non active content or adding an awesome Frequently Asked Questions section to your website. This tutorial can be adapted to any website design and also works in an iweb snippet. It requires the jQuery library, a “few” lines of CSS and HTML.

View the Demo

Step 1: Include The necessary JS

First make sure jQuery is available from your website. Next, we need to build our custom JS script to activate the toggle.

Step 2: Add the CSS to style the toggle

Here is where we can get creative by adding our custom CSS to the toggle. The css below are the basics. But you can stylize the toggle in many ways such as gradient backgrounds, box shadows, rounded corners and more.

The demo has a gradient style for the toggle as an example for changing the background.

Step 3: Create the HTML for the toggle’s content

Finally, lets add our HTML markup to utilize the JS and CSS we made above. We’re just going to create two basic toggles with a title and a paragraph of text for each one.

Each toggle is wrapped in a main div toggle followed by the toggle link and then the main content with the div toggle-content. If you include all the above, you should have a working toggle. Then all you need to do is add your content and style the toggle further within the CSS.

View the Demo

  1. Thanks for the easy tutorial! I’ve been looking for an easy to add this to my site.

  2. I barely never leave comments on internet, but this time Thank you so much!!
    I ve been trying all day to try different tutorial related to “Toggle” Jquery, trying to understand how to use it ( I m a real beginner about creating website ) but
    Your tutorial is definitly best, easy to use and to understand (^^)

    Merci encore! (^-^)

  3. Bluenotes, thanks for this great tutorial. Question: What would it take to add a ‘show/hide’ all function?

    • Hi Andy,

      Sure, you would need to add a few lines of JS to activate/deactivate the toggles on a new click event and add a clickable element (link or button) to trigger it.

      Example of a Link to use:

      <a href="#" id="myButton" rel="nofollow">Click Me to Open and Close</a>
      

      Example JS to include:

      // When #myButton link is clicked...
      $('#myButton').click(function() {
      
      	// Slide Animation on ALL Toggles to Open/Close
      	$('.toggle-content').slideToggle();
      	
      	// Add/Remove the "active" class to the toggle trigger titles.
      	$('.toggle-trigger').toggleClass('active');
      });	
      

      Notice the #myButton from the JS and the link. These need to match so the link can trigger the appropriate JS.

  4. Honestly, I’ve tried at least six different toggle jguery, js, html, etc. variations for dotnetnuke and couldn’t get any to work. Yours worked perfectly the first time. Awesome. Thank you!!

  5. thanks that helped me

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>