JQuery show hide with link toggle
Code to show or hide transcripts for embedded audio. Adds the “show transcript” links to the document via Javascript and performs the region toggling.
View as text
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="">
<!-- Date: 2009-12-07 -->
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){ // shortcut for 'do this when page is ready'
// find all transcript divs and hide them
var transcripts = $('.transcript');
transcripts.hide();
// loop over all transcript regions on the page
// and add a link that will toggle the transcript region
// on and off
transcripts.each(function(){
make_link_for($(this));
});
function make_link_for(item){
// create a new link with the text "Show transcript" with a class of "toggle"
// and bind the "click" event. When clicked,
// call the toggle_transcript function.
var new_link = $("<a href='#" + item.attr("id") + "' class='toggle'>Show transcript</a>")
.click(function(event){
toggle_transcript(item, $(this))
event.preventDefault();
});
item.parent().append(new_link);
}
// Toggles the given transcript.
// Takes in the transcript object to toggle on or off
// and the link so that its text can be changed between "show" or "hide"
function toggle_transcript(item, link){
link.html(link.html() == 'Show transcript' ? 'Hide transcript' : 'Show transcript');
item.toggle();
}
});
</script>
</head>
<body>
<div id="audio_1">
<h1>Audio file 1</h1>
<object width="550" height="400">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>
<div class="transcript" id="transcript_for_audio_1">
<h1>Audio One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div id="audio_2">
<h1>Audio file 2</h1>
<object width="550" height="400">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>
<div class="transcript" id="transcript_for_audio_2">
<h1>Audio 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>
</html>