SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Toggle text on/off...?

    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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Bootfit View Post
    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
    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.

    Code css:
    .hidden {
        display: none;
    }

    Code html4strict:
    <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/addclas...lass-hasclass/

    Code javascript:
    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

    Code javascript:
    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

    Code javascript:
    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.

    Code javascript:
    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');
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi pmw57 - cheers for the help - I've got it working great

    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

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Bootfit View Post
    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:
    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.

    Quote Originally Posted by Bootfit View Post
    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?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •