First, we'll create the HTML, consisting of a pair of <div> layers for each item. The first <div> layer (clasp_x) will use a hyperlink to trigger our javascript function that displays the contents of the second <div> (lunch_x). I've supplied the code for two items below, but you can add as many more as you like, by incrementing the numeric suffix (x) of each pair of layer id's.
Now you can add this HTML code to your page:
<div id="lunch_1" class="item">This is item 1<br />Peanut Butter & Jelly<br />Potato Chips<br />Apple</div>
<div id="clasp_2" class="clasp"><a href="javascript:itemOpen('2');">Open item 2...</a></div>
<div id="lunch_2" class="item">This is item 2<br />Liverwurst <br />Twinkies<br />Fig Newtons</div>
Hide the item (CSS)
Next, we'll create a couple of CSS classes, one of which will hold the hyperlink, and another whose contents are initially not displayed on the web page. Add these class definitions to your CSS stylesheet:
text-align:center;
}
.item {
display:none;
}
Open & Close the item(javascript)
All that remains is to define two javascript functions - itemOpen() and itemClose() - which can be either in the <head> area of your HTML page, or in a separate javascript file:
document.getElementById('lunch_' + lunchID).style.display = "block";
document.getElementById('clasp_' + lunchID).innerHTML="<a href=\"javascript:itemClose('" + lunchID + "');\">Close item " + lunchID + "...</a>";
}
function itemClose(lunchID) {
document.getElementById('lunch_' + lunchID).style.display = "none";
document.getElementById('clasp_' + lunchID).innerHTML="<a href=\"javascript:itemOpen('" + lunchID + "');\">Open item " + lunchID + "...</a>";
}
