Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>TOGGLE :: NONE :: BLOCK :: TEXT</title>
<style type="text/css">
.extra { display: none; }
.extra2 { display: block; }
</style>
<script type="text/javascript">
function preventDefault(evt) {
if (evt.preventDefault) { return evt.preventDefault(); }
else { return evt.returnValue = false; }
}
// EXAMPLE #1. Toggle from none to block
function toggleview_none(element1, event) {
preventDefault(event);
element1 = document.getElementById(element1);
element1.style.display = (element1.style.display != 'block') ? 'block' : 'none';
}
// EXAMPLE #2. Toggle from block to none
function toggleview_block(element1, event) {
preventDefault(event);
element1 = document.getElementById(element1);
element1.style.display = (element1.style.display != 'none') ? 'none' : 'block';
}
// EXAMPLE #3. Toggle from none to block and also the text
function toggleview_none_text(linkID, targetElement, event) {
preventDefault(event);
linkID = document.getElementById(linkID);
targetElement = document.getElementById(targetElement);
var display = targetElement.style.display;
if (linkID.innerHTML == '[show]') {
linkID.innerHTML = '[hide]';
}
else { linkID.innerHTML = '[show]'; }
targetElement.style.display = (display != 'block') ? 'block' : 'none';
}
// EXAMPLE #4. Toggle from block to none and also the text
function toggleview_block_text(linkID, targetElement, event) {
preventDefault(event);
linkID = document.getElementById(linkID);
targetElement = document.getElementById(targetElement);
var display = targetElement.style.display;
if (linkID.innerHTML == '[hide]') {
linkID.innerHTML = '[show]';
}
else { linkID.innerHTML = '[hide]'; }
targetElement.style.display = (display != 'none') ? 'none' : 'block';
}
</script>
</head>
<body>
<!--// EXAMPLE #1. TOGGLE FROM NONE TO BLOCK -->
<div class="peekaboo">
<a href="#" onclick="toggleview_none('q1', event)">[show]</a>
</div>
<p id="q1" class="extra">
The department possess a small state-of-the-art electroacoustic studio.
This is used mainly for creative work (training is provided in the form of a course module in
Electroacoustic composition), and also for recording concerts. This course, like all courses at
the York music department, are open to any student.
<br />
</p>
<br /><br /><br />
<!--// EXAMPLE #2. TOGGLE FROM BLOCK TO NONE -->
<div class="peekaboo">
<a href="#" onclick="toggleview_block('q2', event)">[hide]</a>
</div>
<p id="q2" class="extra2">
The department possess a small state-of-the-art electroacoustic studio.
This is used mainly for creative work (training is provided in the form of a course module in
Electroacoustic composition), and also for recording concerts. This course, like all courses at
the York music department, are open to any student.
<br />
</p>
<br /><br /><br />
<!--// EXAMPLE #3. TOGGLE FROM NONE TO BLOCK AND ALSO THE TEXT -->
<div class="peekaboo">
<a id="a3" href="#" onclick="toggleview_none_text('a3', 'q3', event)">[show]</a>
</div>
<p id="q3" class="extra">
The department possess a small state-of-the-art electroacoustic studio.
This is used mainly for creative work (training is provided in the form of a course module in
Electroacoustic composition), and also for recording concerts. This course, like all courses at
the York music department, are open to any student.
<br />
</p>
<br /><br /><br />
<!--// EXAMPLE #4. TOGGLE FROM BLOCK TO NONE AND ALSO THE TEXT -->
<div class="peekaboo">
<a id="a4" href="#" onclick="toggleview_block_text('a4', 'q4', event)">[hide]</a>
</div>
<p id="q4" class="extra2">
The department possess a small state-of-the-art electroacoustic studio.
This is used mainly for creative work (training is provided in the form of a course module in
Electroacoustic composition), and also for recording concerts. This course, like all courses at
the York music department, are open to any student.
<br />
</p>
</body>
</html>