Skip to content

Expand/collapse text without separate js file

February 28, 2010

If you need to have a paragraph of text that expands down when the user clicks on the heading for the paragraph, and collapses when the user clicks the heading for the paragraph again. And you do not have access to place any js files on the server, so you are unable to use a separate js file on the server side to do it.
You’ll want to make sure that all of the items are shown by default for people with JavaScript disabled, which
means that your method for hiding them by default should be done with JavaScript. Here’s one method that
would work:

<script type=”text/javascript”>
document.write(‘<style type=”text\/css”>#toggle { display: none; }<\/style>’);
</script>
<script type=”text/javascript”>
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != “none” ) {
el.style.display = ‘none’;
}
else {
el.style.display = ‘block’;
}
}
function hide() {
document.getElementById(“toggle”).style.display=’none’;
}
</script>
<body onload=”hide();”>
<a onclick=”switchMenu(‘toggle’);” title=”Test”>Click Me</a><br><div id=”toggle”>
your text here…..</div>

.

Example
// <![CDATA[
document.write('
#toggle { display: none; }’);
// ]]>
//

Click Me

your text here…..
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: