Toggle text on/off...?

JavaScript
1

Hello all,

I’m looking for a way to toggle DIVs on or off to hide/display text - is there a simple way to do this with a text link?

cheers all :slight_smile:

2

Yes there is.

First, recognise that some people visiting your page will not have javascript enabled. This means that the divs must start as visible, so that you can use javascript while the page is loading to initially hide the text.

Also, to keep things nice and easy, all of the javascript should be placed just before the </body> tag.


.hidden {
    display: none;
}



<div class="toggle">Content that can be toggled on and off.</div>

The css class will be set by the script, for which we can use a very useful set of class-handling functions from http://snipplr.com/view/3561/addclass-removeclass-hasclass/


function hasClass(ele,cls) {
	return ele.className.match(new RegExp('(\\\\s|^)'+cls+'(\\\\s|$)'));
}
 
function addClass(ele,cls) {
	if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
 
function removeClass(ele,cls) {
	if (hasClass(ele,cls)) {
    	var reg = new RegExp('(\\\\s|^)'+cls+'(\\\\s|$)');
		ele.className=ele.className.replace(reg,' ');
	}
}

We can also add one more function called toggleClass


function toggleClass(ele, cls) {
    if (hasClass(ele, cls)) {
        removeClass(ele, cls);
    } else {
        addClass(ele, cls);
    }
}

Let’s now search for the divs that have the class called “toggle”, and run them through an initToggle function


var divs, i, div;
divs = document.getElementsByTagName('div');
for (i = 0; i < divs.length; i += 1) {
    div = divs[i];
    if (hasClass(div, 'toggle')) {
        initToggle(div);
    }
}

The link to toggle the div is added by the script, because of the same situation with people who do not have javascript enabled. You do not want to show them links that they can not use.

The initToggle function adds a link just above the div saying Toggle On/Off, sets an onclick event to the link, and triggers that onclick event in order to initially hide the div.

The link will know which div to toggle because the link will have added to it a property called toggleTarget that points to the appropriate div.


function initToggle(div) {
    var a, text;
    a = document.createElement('a');
    text = document.createTextNode('Toggle On/Off');
    a.href = '#';
    a.appendChild(text);
    a.toggleTarget = div;

    div.parentNode.insertBefore(a, div);

    a.onclick = toggleHandler;

    a.onclick();
}

function toggleHandler() {
    toggleClass(this.toggleTarget, 'hidden');
}
3

There are a couple of ways.

One way is to float the header left, so that the information that follows appears on the right of the header. You then also need to tell the div to clear left so that it won’t end up being affected i the toggle message isn’t there.

Another way is to move the section that appends the toggle message to a separate function, so that a more complicated process can occur, which is where it scans backwards for the header and then adds the toggle message explicitly to the header itself. For that to be effective though, it helps though to know what HTML code is used for the header and the div.

This is not a one or the other situation. The script should always be in a separate file, and the script file should be loaded at the bottom of the page, just before the </body> tag.

Being at the bottom prevents you from needing complicated loading techniques to trigger the script after the page has loaded. The page also appears to load faster because it’s not waiting for the script to be loaded and processed before working on other parts of the page.

4

Hi pmw57 - cheers for the help - I’ve got it working great :slight_smile:

I’ve a question though:
How can I get the Toggle On/Off to apear outside of the newly created <div> as I want this to apear next to the header of the text that appears? eg:

HEADER TEXT… Toggle On/Off

as opposed to:

HEADER TEST
Toggle On/Off

Also - why does the script need to be at the bottom of the page as opposed to in a seperate file wityh the rest of the Javascript?

cheers