Page 1 of 1

Showing/hiding text

Posted: Tue Feb 19, 2008 1:53 pm
by stubarny
~pickle | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


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:

Code: Select all

 
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'; } }
 


In the body:

Code: Select all

 
<a title="show/hide" alt='show/hide' id="exps112_link" href="javascript&#058; 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>

~pickle | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Re: Showing/hiding text

Posted: Tue Feb 19, 2008 5:49 pm
by pickle
Your code's in a bit of a mess, so I've cleaned it up:

Code: Select all

function getObject(id)
{
    if(document.all)
        return document.all[id];
    else
        return document.getElementById(id);
}
 
function toggle(link, divId)
{
    var d = getObject(divId);
    if (link.innerHTML == 'Show details')
    {
        link.innerHTML = 'Hide details'; 
        d.style.display = 'block'; 
    }
    else
    {
        link.innerHTML = 'Show details';
        d.style.display = 'none';
    }
}
Your function is all set up to handle it properly - you're just setting up the page 100% opposite of what you want. Set the display property of your #exps132 div to none, and set the text inside the link to "Show details" & it should work.

Have you heard of JQuery? It would really make your life easier (in my opinion):

Code: Select all

$("#exps112_link").toggle(
    function(){
        $("#exps123").css("display","block");
        $(this).text('Hide details');
    },
    function(){
        $("#exps123").css("display","none");
        $(this).text('Show details');
    }
);
is all you'd need.