I have created a teaching portfolio on Google Sites. I want the menu to be expandable, e.g. when you click on "Courses Taught," the menu will expand so you can see links to various courses pages - as opposed to having to create a whole new page. You can see the example here:
https://sites.google.com/site/clareeileencallahan/teaching-portfolio
The code I am using below. As you can see, under "Courses Taught" are links two two course descriptions. I was able to find a way to get the menu to collapse, but when I click on "Courses Taught," it doesn't expand to show me my options. I borrowed this code from a page that did something similar and tailored it to my page. I can't figure out what I am missing in this code to get my menu to work. Can anyone help?
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script>$(function() {
// Set up variables
var $el, $parentWrap, $otherWrap,
$allTitles = $("dt").css({
padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5
"cursor": "pointer" // make it seem clickable
}),
$allCells = $("dd").css({
position: "relative",
top: -1,
left: 0,
display: "none" // info cells are just kicked off the page with CSS (for accessibility)
});
// clicking image of inactive column just opens column, doesn't go to link
$("#page-wrap").delegate("a.image","click", function(e) {
if ( !$(this).parent().hasClass("curCol") ) {
e.preventDefault();
$(this).next().find('dt:first').click();
}
});
// clicking on titles does stuff
$("#page-wrap").delegate("dt", "click", function() {
// cache this, as always, is good form
$el = $(this);
// if this is already the active cell, don't do anything
if (!$el.hasClass("current")) {
$parentWrap = $el.parent().parent();
$otherWraps = $(".info-col").not($parentWrap);
// remove current cell from selection of all cells
$allTitles = $("dt").not(this);
// close all info cells
$allCells.slideUp();
// make sure the correct column is current
$allTitles.removeClass("current");
$el.addClass("current");
}
});
$("#starter").trigger("click");
});
</script>
<style>
.curCol { z-index: 1; position: relative;}
dd {padding:5px;}
</style>
<html>
<body>
<div id="page-wrap">
<dl>
<dt><a href="https://sites.google.com/site/clareeileencallahan/teaching-portfolio/teaching-statement" target="_self"><img src="https://sites.google.com/site/clareeileencallahan/teaching-portfolio/Teaching%20Statement.png?height=60&width=320" width="320"></a></dt>
<dt><img src="https://sites.google.com/site/clareeileencallahan/teaching-portfolio/Courses%20Taught.png?height=60&width=324" width="324"></dt>
<dd style="color:#000000;font-size:13px;position:relative;"><em><a href="https://sites.duke.edu/writing20_23_f2011/" target="_blank">The Poetics of Poverty</a></em>, Fall 2011</dd>
<dd style="color:#000000;font-size:13px;position:relative;"><em><a href="https://sites.google.com/site/clareeileencallahan/teaching-portfolio/courses-taught/wild" target="_self">Wild</a></em>, Spring 2013</dd>
<dt><img src="https://sites.google.com/site/clareeileencallahan/teaching-portfolio/Sample%20Syllabi.jpg?height=60&width=320" width="320"></dt>
<dd></dd>
<dt><img src="https://sites.google.com/site/clareeileencallahan/teaching-portfolio/Evaluations.png?height=60&width=320" width="320"></dt>
<dd></dd>
<dt><img src="https://sites.google.com/site/clareeileencallahan/teaching-portfolio/Audiovisual.jpg?height=60&width=320" width="320"></dt>
<dd></dd>
</dl>
</div>
</body>
</html>