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 we need to include the jQuery library  either from your current website or from google.

<!-- jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Next we need to build our custom JS script to activate the toggle.

<script type="text/javascript">
jQuery(document).ready(function($) { 

	// Find the toggles and hide their content
	$('.toggle').each(function(){
		$(this).find('.toggle-content').hide();
	});

	// When a toggle is clicked (activated) show their content
	$('.toggle a.toggle-trigger').click(function(){
		var el = $(this), parent = el.closest('.toggle');

		if( el.hasClass('active') )
		{
			parent.find('.toggle-content').slideToggle();
			el.removeClass('active');
		}
		else
		{
			parent.find('.toggle-content').slideToggle();
			el.addClass('active');
		}
		return false;
	});

});  //End
</script>

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.

<!-- Toggle CSS -->
<style type="text/css">

/* Main toggle */
.toggle { 
	font-size: 13px;
	line-height:20px;
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background: #ffffff; /* Main background */
	margin-bottom: 10px;
	border: 1px solid #e5e5e5;
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	        border-radius: 5px;	
}

/* Toggle Link text */
.toggle a.toggle-trigger {
	display:block;
	padding: 10px 20px 15px 20px;
	position:relative;
	text-decoration: none;
	color: #666;
}

/* Toggle Link hover state */
.toggle a.toggle-trigger:hover {
	opacity: .8;
	text-decoration: none;
}

/* Toggle link when clicked */
.toggle a.active {
	text-decoration: none;
	border-bottom: 1px solid #e5e5e5;
	-webkit-box-shadow: 0 8px 6px -6px #ccc;
	   -moz-box-shadow: 0 8px 6px -6px #ccc;
	        box-shadow: 0 8px 6px -6px #ccc;
	color: #000;
}

/* Lets add a "-" before the toggle link */
.toggle a.toggle-trigger:before {
	content: "-";	/* You can add any symbol, font icon, or graphic icon */
	margin-right: 10px;
	font-size: 1.3em;	
}

/* When the toggle is active, change the "-" to a "+" */
.toggle a.active.toggle-trigger:before {
	content: "+";
}

/* The content of the toggle */
.toggle .toggle-content {
	padding: 10px 20px 15px 20px;
	color:#666;
}

</style>
[box style=”blue”]The demo has a gradient style for the toggle as an example for changing the background.[/box]

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.

<!-- Toggle #1 -->
<div class="toggle">

	<!-- Toggle Link -->
	<a href="#" title="Title of Toggle" class="toggle-trigger">This is a title for my toggle</a>

	<!-- Toggle Content to display -->
	<div class="toggle-content">
		<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>
	</div><!-- .toggle-content (end) -->
</div><!-- .toggle (end) -->

<!-- Toggle #2 -->
<div class="toggle">

	<!-- Toggle Link -->
	<a href="#" title="Title of Toggle" class="toggle-trigger">This is my second toggle</a>

	<!-- Toggle Content to display -->
	<div class="toggle-content">
		<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>
	</div><!-- .toggle-content (end) -->
</div><!-- .toggle (end) -->

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 towards your heart’s desire within the CSS.

For the iWeb users out there, you can easily add all of the code above into an HTML snippet and hit apply. Keep in mind that you will need to make the actual snippet taller (increase the height) to allow for the toggles to open without being cut off. So give it plenty of room.

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:

      Click Me to Open and Close
      

      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

Comments are closed.