Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html lang="en-gb">
<title>Library Guides Home Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<meta name="description" content="Library Guides Home Page">
<!-- The jQuery library is included via the Google AJAX Libraries API
But could be installed locally by downloading it from the jQuery website
and including it via a script tag.
<script type="text/javascript" src=""></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1.3.2");
<script type="text/javascript">
// By default jQuery uses the '$' namespace for all of its functions
// Since the '$' namespace is also used by other javascript libraries
// it is always prudent to use compatibility mode. jQuery functions
// can also be called from the 'jQuery' namespace.
// Wrapping the jQuery code with:
// (function($){ ...code...})(jQuery);
// replaces all instances of '$' with 'jQuery'. This is done for code
// clairy and additional compatibility.
// The $(document).ready event is similar to adding an onload function to
// the body tag but takes into account other page elements loading as well.
// jQuery functions operate on collections of elements defined by CSS
// selectors. In this case the 'hide' function is called on each of the
// 'ul' elements which have the class 'guide_links'.
// DOM insert a link element inside of each of the subject list items.
$('li.subject_link').prepend('<a href="javascript://toggle guide links" class="toggle_button">+</a>');
// Add a click event handler to the inserted links.
$('a.toggle_button').bind("click", function(){
// The $(this) object is the current member of the collection that
// is being iterated over. In this case $(this) refers to an instance
// of an 'a' element with the 'toggle_button' class.
// The if statement checks to see what text is contained in the 'a' element
// in question and toggles it between '+' and '-'.
if($(this).text() == '+'){
else {
// Sibling DOM elements share the same parent container. In this case
// both the 'a.toggle_button' element and the 'ul.guide_links' element
// are contained in a 'li.subject_link' element.
// For the sibling 'ul' element then slide it down if it is up and slide
// it up if it is down.
// The function bound to the 'click' event fires first and then passes the
// event to the element which it is bound. To prevent the default action of
// the clicked element return 'false'.
return false;
<style type="text/css">
list-style-type: none;
list-style-image: none;
list-style-position: outside;
margin: 5px;
padding-left: 0pt;
li.subject_link {
li.subject_link a{
a.toggle_button {
border-color: #C5CBD6 #4F6DA1 #4F6DA1 #C5CBD6;
border-width: 1px;
border-style: solid;
padding:1px 4px;
ul.guide_links li{
<ul id="libguides">
<script type="text/javascript" src=";more=false&amp;format=js&amp;guides=true&amp;break=li"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.