SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Showing/hiding text

    Hi everyone,

    Iím trying to write code that will display no text (except a link) and then make text appear when a link is clicked. So far Iíve only managed to write code that loads a page with text and hides the text when a link is clicked. Does anyone know how to edit the code below to make it work as I wish?

    Thanks,

    Stu



    In the header:

    <script language="JavaScript1.1">

    var ie4 = false; if(document.all) { ie4 = true; }
    function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }

    function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId);
    if (lText == 'Show details') { link.innerHTML = 'Hide details'; d.style.display = 'block'; }
    else { link.innerHTML = 'Show details'; d.style.display = 'none'; } }
    </script>



    In the body:

    <a title="show/hide" alt='show/hide' id="exps112_link" href="javascript: void(0);" style="text-decoration: none;" onclick="toggle(this, 'exps132');">Hide details</a>

    <div id="exps132" style="padding: 0px;" >

    TEXT TO SHOW/HIDE GOES HERE

    </div>

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,804
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Quick and Dirty....
    Code:
    <script type="text/javascript">
    function showHide(link, id) {
    	var divToShow = document.getElementById(id);
    	divToShow.style.display = divToShow.style.display == 'block' ? 'none' : 'block';
    	link.innerHTML = link.innerHTML == 'Show Details' ? 'Hide Details' : 'Show Details';
    }
    </script>
    
    <a title="show/hide" alt='show/hide' id="exps112_link" href="javascript: void(0);" style="text-decoration: none;" onclick="showHide(this, 'exps132');">Show Details</a>
    <div id="exps132" style="display:none">Text hidden</div>
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mine will work with multiple elements.

    Note: It won't work unless you are using the structure I've provided..

    <div id="main-container">
    <div class="show-hide">
    <p>TEXT TO SHOW/HIDE GOES HERE</p>
    <a href="#" class="show-hide-anchor">Show details</a>
    </div>
    <div class="show-hide">
    <p>TEXT TO SHOW/HIDE GOES HERE</p>
    <a href="#" class="show-hide-anchor">Show details</a>
    </div>
    </div>
    See it at:
    http://soulscratch.com/code/js/show-hide.html

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by stubarny View Post
    Hi everyone,

    I’m trying to write code that will display no text (except a link) and then make text appear when a link is clicked. So far I’ve only managed to write code that loads a page with text and hides the text when a link is clicked. Does anyone know how to edit the code below to make it work as I wish?
    That code is so old and out of date that it's better to start afresh.

    When the content is hidden, it's best to apply a class name from the script instead of assigning styles. So the following CSS style should be used.

    Code css:
    .hidden {
        display: none;
    }

    You have your link and the content to show. Do not apply the hidden class to the content yet. If you do it now then it will be impossible for anyone without javascript to be able to see it.

    Code html4strict:
    <a id="exps112_link" href="#exps132"
       title="show/hide" alt="show/hide">Show details</a>
    <div id="exps132">
    TEXT TO SHOW/HIDE GOES HERE
    </div>

    Why are the above id names unrelated? I don't know, I'll leave that up to you.

    Start with the content visible and use javascript to hide it. That way should javascript not be available or supported, it can still be seen.

    Then at the bottom of the body you have your script to attach an event on to the link, and activate it. This hides the content for you when the page loads.

    Code javascript:
    // attach and activate the event
    var link = document.getElementById('exps112_link');
    link.onclick = toggle;
    link.onclick();

    Finally you have the toggle function that updates the link text, and toggles the content that the link points to. The fragment identifier here now sderves two purposes. When there is no scripting it takes people to the appropriate text, and when there is scripting it lets the script know what areza to toggle.

    Code javascript:
    function toggle() {
        var href = this.getAttribute('href');
    	var id = href.substring(1, href.length);
    	var el = document.getElementById(id);
    	// remove old link text
    	while (this.firstChild) {
    		this.removeChild(this.firstChild);
    	}
            // update link and toggled area
    	if (el.className === 'hidden') {
    		this.appendChild(document.createTextNode('Hide details'));
    		el.className = '';
    	} else {
    		this.appendChild(document.createTextNode('Show details'));
    		el.className = 'hidden';
    	}	    
    }
    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
  •