Toggle hidden content

JavaScript
1

I’m looking for some javascript that’ll toggle hidden content.

As I’m not experienced in this, I want something which is cross-browser reliable - and I’m having trouble finding something suitable.

Jquery has been suggested as an option… and I found something which appeared to do the job, apart from not validating as it uses a span to include the toggled content - which is a problem as I need to included block level stuff to be hidden.

Also, it came as two buttons - show and hide - and I’d prefer a single button, or preferably a normal html link.

2

Assign id to item that you want to hide, then change its style.

With jQuery: $(‘#item’).toggle();

Without jQuery: var item = document.getElementById(‘item’); item.style.display = (item.style.display == ‘none’) ? ‘’ : ‘none’;

3

Thanks.
Can you please work that into some code I can cut/paste - I don’t have the knowledge to do it myself.

4

Change that block level stuff from something like

<div>Your stuff</div>

to

<div id="toggle-stuff" style="display: none;">Your stuff</div>

Then add a link like this:

<a href="javascript:void(0);" onclick="var item = document.getElementById('toggle-stuff'); item.style.display = (item.style.display == 'none') ? '' : 'none'; return false;">Toggle stuff</a>
5

Thanks.

So, if I wanted to use jQuery, would this be the correct code?


<a href="#" onclick="$('#toggle=stuff').toggle(); return false;">Toggle stuff</a>

I get confused with the quotes.

And, I swapped “javascript:void(0);” to “#” so’s to validate.

Does that affect anything?

6

Here is the content that you want to toggle:


<div id="stuff">
...
</div>

With the scripting, the best place to put your script (whether external or inline) is at the end of the body, just before the </body tag>


<html>
<head>
...
</head>
<body>
...
<script src="script.js"></script>
</body>
</html>

When someone loads your page and they don’t have any scripting, you don’t want the stuff to be automatically hidden because they then have no way to see it. That’s why we use scripting to hide the stuff, because scripting is also used to display it.

We also use a CSS declaration to hide it.


.hidden {
    display: none;
}

Here’s how:


// hide stuff
var div = document.getElementById('stuff');
div.className = 'hidden';

You should not have a toggle link automatically shown on the page, because when people without scripting visit the page, the link will fail to work for them. Instead, use scripting to add the link. In this case, it’s added just before the stuff to be toggled.


// create link
var link = document.createElement('a');
link.href = '#' + div.id;
link.onclick = function () {
    toggle();
}
// add link before stuff
div.parentNode.insertBefore(link, div);

That will create a link that looks like: <a href=“#stuff”>Toggle</a>

The link also directly calls the toggle function. That toggle function can now easily do its job by toggling the id that’s in the href reference.
We just need to deal with some browser compatability issues. Some browsers automatically add the page link on to the link when you retrieve it, so if we split at the # we can take whatever is after it.


function toggle() {
    var id = this.href.split('#')[1];
    var el = document.getElementById(id);
    el.className = (el.className === 'hidden') ? '' : 'hidden';
    return false;
}

Why do we return false? So that the web browser ignores what it normally does when links are clicked.

So the full script consists of three basic parts:

[list=1][]Hide the stuff
[]Create a toggle link
[*]Toggle the stuff[/list]


// hide stuff
var div = document.getElementById('stuff');
div.className = 'hidden';

// create link
var link = document.createElement('a');
var text = document.createTextNode('Toggle');
link.href = '#' + div.id;
link.appendChild(text);
link.onclick = toggle;
// add link before stuff
div.parentNode.insertBefore(link, div);

function toggle() {
    var id = this.href.split('#')[1];
    var el = document.getElementById(id);
    el.className = (el.className === 'hidden') ? '' : 'hidden';
    return false;
}

And best of all, it still works properly when scripting is disabled, because the content still remains fully accessible.

7

Thanks - that’s a really comprehensive explanation.

I need a bit of time to get my head around it, and may come back with a query in a day or so - but meantime, thanks.