University of Vermont

UVM Self-help Web Guide

Content Accordions

Accordions are a useful tool to show and hide information as needed. You can easily create an accordion in the UVM pubishing system using jQuery.

Example (click on phrases below):

How do I apply to the program?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut diam ligula, suscipit a elementum vel, euismod ac turpis. Fusce eu facilisis lacus. Aenean vel lorem ut elit convallis dapibus id sed turpis. Donec diam ipsum, tempus id ornare posuere, tincidunt quis leo. Integer eleifend fermentum nibh non venenatis. Nullam dignissim ligula non eros rutrum ut volutpat felis varius. Nullam posuere mauris nisi, vel semper enim. Vivamus placerat magna at lorem lacinia eget eleifend ligula fermentum. Nam aliquet, risus vel volutpat pulvinar, tellus diam vehicula tellus, eget aliquam nulla risus in nisl. Maecenas condimentum dolor id dolor commodo laoreet. Nunc imperdiet iaculis lacus, et mattis tortor faucibus id.
How much does it cost?
Sed vitae mauris consequat neque cursus faucibus facilisis id augue. Fusce a dui diam. Aenean consequat dui nec est dictum tempus. Integer rutrum blandit velit, sit amet pharetra ipsum lacinia ac. Morbi pharetra ultricies lorem dictum mattis. Ut quam eros, sagittis a faucibus at, sagittis sed tortor. Fusce convallis congue magna quis volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu ligula odio. Fusce vel mi quam, ac accumsan tellus. Integer molestie egestas velit nec venenatis. Donec dictum, mauris vitae consequat aliquam, magna dui pharetra velit, non semper tortor justo ac magna. Pellentesque arcu odio, mattis ornare blandit eget, gravida ullamcorper lectus. Nunc sapien ipsum, accumsan quis dignissim quis, pulvinar a leo. Aliquam vitae lacus sit amet erat pulvinar mollis eget vel tortor. Praesent at turpis sed sem rhoncus rhoncus id non est. Pellentesque a tellus vel leo mollis aliquam. Ut euismod, tortor nec rhoncus laoreet, magna risus condimentum lorem, in elementum turpis neque ac orci. Aenean accumsan fringilla leo, eu tempor ante ultricies vel. Donec urna quam, euismod non volutpat in, porta sagittis diam.
Are my credits transferable to another institution?
Sed id neque mi. Nunc ligula magna, vehicula in convallis ut, eleifend ac velit. In hac habitasse platea dictumst. Phasellus non vestibulum ligula. Pellentesque laoreet ultrices cursus. Vestibulum et augue luctus sapien pharetra blandit. Mauris vel lobortis est. Nam aliquet vulputate velit. Aliquam in libero quam. Nunc vel diam quam. Mauris in ipsum ut dui sollicitudin mollis ac id risus. Proin interdum cursus felis eu lacinia. Donec faucibus condimentum diam, a ornare quam tincidunt sed. Cras ornare condimentum dolor, ac iaculis mauris dapibus commodo. Nulla ut purus in tellus placerat fermentum. Pellentesque non tempus nulla. Fusce id turpis elit, et consequat lorem. In consequat bibendum elit, eget venenatis orci blandit in.

  1. Add all your content to the page (as if the accordion was fully open).
  2. Designate your accordion buttons and content using class or id calls.
  3. Initialize the accordion before the content:
     <script>
     $(document).ready(function() {	
     	$('.accordionButton').click(function() {
     		$('.accordionContent').slideUp('normal');
     		$(this).next().slideDown('normal'); 
     	});
     	$('.accordionContent').hide(); 
     });
     </script>
     	  

    Example:

    How do I apply to the program?
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut diam ligula, suscipit a elementum vel, euismod ac turpis. Fusce eu facilisis lacus. Aenean vel lorem ut elit convallis dapibus id sed turpis. Donec diam ipsum, tempus id ornare posuere, tincidunt quis leo. Integer eleifend fermentum nibh non venenatis. Nullam dignissim ligula non eros rutrum ut volutpat felis varius. Nullam posuere mauris nisi, vel semper enim. Vivamus placerat magna at lorem lacinia eget eleifend ligula fermentum. Nam aliquet, risus vel volutpat pulvinar, tellus diam vehicula tellus, eget aliquam nulla risus in nisl. Maecenas condimentum dolor id dolor commodo laoreet. Nunc imperdiet iaculis lacus, et mattis tortor faucibus id.
    How much does it cost?
    Sed vitae mauris consequat neque cursus faucibus facilisis id augue. Fusce a dui diam. Aenean consequat dui nec est dictum tempus. Integer rutrum blandit velit, sit amet pharetra ipsum lacinia ac. Morbi pharetra ultricies lorem dictum mattis. Ut quam eros, sagittis a faucibus at, sagittis sed tortor. Fusce convallis congue magna quis volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu ligula odio. Fusce vel mi quam, ac accumsan tellus. Integer molestie egestas velit nec venenatis. Donec dictum, mauris vitae consequat aliquam, magna dui pharetra velit, non semper tortor justo ac magna. Pellentesque arcu odio, mattis ornare blandit eget, gravida ullamcorper lectus. Nunc sapien ipsum, accumsan quis dignissim quis, pulvinar a leo. Aliquam vitae lacus sit amet erat pulvinar mollis eget vel tortor. Praesent at turpis sed sem rhoncus rhoncus id non est. Pellentesque a tellus vel leo mollis aliquam. Ut euismod, tortor nec rhoncus laoreet, magna risus condimentum lorem, in elementum turpis neque ac orci. Aenean accumsan fringilla leo, eu tempor ante ultricies vel. Donec urna quam, euismod non volutpat in, porta sagittis diam.
    Are my credits transferable to another institution?
    Sed id neque mi. Nunc ligula magna, vehicula in convallis ut, eleifend ac velit. In hac habitasse platea dictumst. Phasellus non vestibulum ligula. Pellentesque laoreet ultrices cursus. Vestibulum et augue luctus sapien pharetra blandit. Mauris vel lobortis est. Nam aliquet vulputate velit. Aliquam in libero quam. Nunc vel diam quam. Mauris in ipsum ut dui sollicitudin mollis ac id risus. Proin interdum cursus felis eu lacinia. Donec faucibus condimentum diam, a ornare quam tincidunt sed. Cras ornare condimentum dolor, ac iaculis mauris dapibus commodo. Nulla ut purus in tellus placerat fermentum. Pellentesque non tempus nulla. Fusce id turpis elit, et consequat lorem. In consequat bibendum elit, eget venenatis orci blandit in.

  4. Optional: stylize your buttons and content with CSS.
  5. Optional: modify the behavior of the accordion to allow multiple items to remain open at one time and use a fade effect.
     <script>
     $(document).ready(function() { 
     	$('.accordionButton').click(function() {
     		if($(this).next().is(':visible')) {
     			$(this).next().fadeOut('normal');
     		} else {	
     			$(this).next().fadeIn('normal');
     		}
     	});
     	$(".accordionContent").hide();
     });
     </script>
           

    You'll likely want to stylize your accordion using CSS. Here is one way that you can make your "button" appear clickable:

     .accordionButton {	
     	cursor: pointer;
     }
     

    Last modified September 13 2011 01:06 PM