danhorst/jQuery_example.html

## jQuery_example.html
<!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>
	<!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&more=false&format=js&guides=true&break=li"></script>
	</ul>
	</body>
	</html>