Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-gb">
<head>
<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
http://code.google.com/apis/ajaxlibs/
But could be installed locally by downloading it from the jQuery website
http://jquery.com/
and including it via a script tag.
-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1.3.2");
</script>
<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.
jQuery.noConflict();
// Wrapping the jQuery code with:
// (function($){ ...code...})(jQuery);
// replaces all instances of '$' with 'jQuery'. This is done for code
// clairy and additional compatibility.
(function($){
// 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.
$(document).ready(function(){
// 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'.
$('ul.guide_links').hide();
// 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() == '+'){
$(this).text('-');
}
else {
$(this).text('+');
}
// 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.
$(this).siblings('ul.guide_links').slideToggle("fast");
// 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;
});
});
})(jQuery);
</script>
<style type="text/css">
ul#libguides{
width:50%;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
margin: 5px;
padding-left: 0pt;
}
li.subject_link {
padding:1px;
}
li.subject_link a{
margin-left:10px;
}
a.toggle_button {
text-decoration:none;
text-align:center;
color:#FFF;
background:#6891D6;
border-color: #C5CBD6 #4F6DA1 #4F6DA1 #C5CBD6;
border-width: 1px;
border-style: solid;
font-weight:bold;
margin-left:0px;
padding:1px 4px;
display:inline-block;
width:10px;
}
ul.guide_links li{
margin-left:20px;
list-style-type:disc;
}
</style>
</head>
<body>
<ul id="libguides">
<script type="text/javascript" src="http://api.libguides.com/api_subjects.php?iid=54&amp;more=false&amp;format=js&amp;guides=true&amp;break=li"></script>
</ul>
</body>
</html>
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.