Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
72 lines (65 sloc) 2 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Test</title>
<script type="text/javascript" src=""></script>
<h1>jQery Test - Show/hide multiple elements on one page</h1>
<p>Use jQuery to show/hide multiple elements on a page.<br />
Credit for methedology:</p>
<h3>Show and hide a list!</h3>
<ul class="toggle">
<h3>Show and hide another list!</h3>
<ul class="toggle">
<script type="text/javascript">
// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @
// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Show';
var hideText='Hide';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');
// hide all of the elements with a class of 'toggle'
// capture clicks on the toggle links
$('a.toggleLink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);
// toggle the display - uncomment the next line for a basic "accordion" style
// return false so any link destination is not followed
return false;