Back To Programming / Scripting / Coding Forum

Show/Hide Text

mikorleone224th
Born
Joined: Jul 26, 2004
Posts: 2
Status: Offline

July 26th, 2004, 9:12 am

aight im workin on a site and i dont have a clue as to how to get this function to work properly. i want to have a list of titles on my page and when users click on da titles, a bunch of links are revealed. when they click on da title again i want the links to go back to being hidden. im fairly new to javascripting so im lookin for a solution dat is as concise as possible.

this is my function:

Code: [ Select ]

<script language="JavaScript">
function showAndHide(id)
{
var name = document.getElementById("id")
if (div.style.display=="none")
{
div.style.display=="block"; //show element
}
else
{
div.style.display=="none"; //hide element
}
}
</script>

i know this function is not quite right but i have no clue how to fix it.

here is da html where i call da function:

Code: [ Select ]

<a href="" onClick = showAndHide('Title')><b>Some Title</b></a><br>

<div id='Title' style="display:none">

<a href="http://www.mylink.com" >01-Intro</a>

</div>

<a href="" onClick = showAndHide('Title')><b>Some Title</b></a><br>
<div id='Title' style="display:none">
<a href="http://www.mylink.com" >01-Intro</a>
</div>

i figure i must doin somethin wrong here too. any help would be greatly appreciated

Anonymous
Bot
- www.ozzu.com
Joined: 25 Feb 2008
Posts: ?
Loc: Ozzuland
Status: Online

July 26th, 2004, 9:12 am

RichB
Guru
Joined: May 17, 2003
Posts: 1121
Loc: Boston
Status: Offline

July 26th, 2004, 3:26 pm

I generally avoid using "id" and "name" as identifiers because they can cause problems. I'm not sure if they are reserved words or not, but it's best to avoid them.

A definite problem is that you have retrieved a reference to the element that you want to work on and stored it in the variable you are calling name, but then you are using div instead of name to try and manipulate it.

Also you're passing the id parameter to the getElementById function inside quotes when you should just use the parameter name without quotes. The id parameter is a variable that holds a string, but if you put it inside quotes the string "id" will be passed instead of the value that is in the variable.

Lastly, you've correctly used two equal signs to test to see if the style is set to none, but you've also used the double equal sign to try to assign the new value which won't work. Use one equal sign to assign values.

I changed id to theId and name to el for element and made the other changes and it works for me:

Code: [ Select ]

<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
function showAndHide(theId)
{
    var el = document.getElementById(theId)

    if (el.style.display=="none")
    {
        el.style.display="block"; //show element
    }
    else
    {
        el.style.display="none"; //hide element
    }
}
</script>
</head>
<body>
<p><a href="#" onClick = showAndHide('Title')>Some Title</a></p>

<div id='Title' style="display:none">

<a href="http://www.blah.com/">01-Intro</a>

</div>
</body>
</html>

<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
function showAndHide(theId)
{
var el = document.getElementById(theId)
if (el.style.display=="none")
{
el.style.display="block"; //show element
}
else
{
el.style.display="none"; //hide element
}
}
</script>
</head>
<body>
<p><a href="#" onClick = showAndHide('Title')>Some Title</a></p>
<div id='Title' style="display:none">
<a href="http://www.blah.com/">01-Intro</a>
</div>
</body>
</html>

You should also use the code tag when posting snippets on the forum here, so that they will show up correctly.

Free Programming Resources

mikorleone224th
Born
Joined: Jul 26, 2004
Posts: 2
Status: Offline

July 26th, 2004, 8:13 pm

everythin is a go now. thanks alot....i really appreciate da help

n1ima
Born
Joined: Sep 05, 2004
Posts: 2
Status: Offline

September 5th, 2004, 1:30 pm

Professor,

This is exactly the kind of code I was looking for. I have an extended list of links to news and opinion articles, and wanted to hide the lower half of the list of links until a user clicked on "More...", which would then extend the list on the page.

In the code, where you had "Some Title", I replaced that with "More...". When I click on "More..." in my browser, the hidden links ARE displayed, but the "More..." remains visible. Also, while the links loads, the page resets to the top, so users would have to scroll down again to view the links.

Is there any way to add to this code so that "More..." is replaced with "Hide Links..." after it's been clicked on? and then when "Hide Links..." is clicked, the page would revert to the extended links becoming hidden again? Also, is there a way to tell it NOT to go to the top of the page when "More..." or "Hide Links" are clicked on by users?

Thanks,
Sue

RichB
Guru
Joined: May 17, 2003
Posts: 1121
Loc: Boston
Status: Offline

September 5th, 2004, 2:19 pm

Maybe something like this:

Code: [ Select ]

<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
function showAndHide(theId) {
var el = document.getElementById(theId);
    var link = document.getElementById("moreLink");

if (el.style.display=="none") {
   el.style.display="block"; //show element
        link.innerHTML = "Hide Links...";
}
else {
   el.style.display="none"; //hide element
        link.innerHTML = "More...";
}
    return false;
}
</script>
</head>
<body>
<div style="padding-top:400px">
<a href="http://www.blah.com/">01-Intro</a><br>
<a href="http://www.blah.com/">01-Intro</a><br>
<a href="http://www.blah.com/">01-Intro</a><br>
</div>
<p><a id="moreLink" href="#" onClick="return showAndHide('Title')">More...</a></p>
<div id='Title' style="display:none">
<a href="http://www.blah.com/">01-Intro</a><br>
<a href="http://www.blah.com/">01-Intro</a><br>
<a href="http://www.blah.com/">01-Intro</a><br>
</div>
</body>
</html>

<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
function showAndHide(theId) {
var el = document.getElementById(theId);
var link = document.getElementById("moreLink");
if (el.style.display=="none") {
el.style.display="block"; //show element
link.innerHTML = "Hide Links...";
}
else {
el.style.display="none"; //hide element
link.innerHTML = "More...";
}
return false;
}
</script>
</head>
<body>
<div style="padding-top:400px">
<a href="http://www.blah.com/">01-Intro</a><br>
<a href="http://www.blah.com/">01-Intro</a><br>
<a href="http://www.blah.com/">01-Intro</a><br>
</div>
<p><a id="moreLink" href="#" onClick="return showAndHide('Title')">More...</a></p>
<div id='Title' style="display:none">
<a href="http://www.blah.com/">01-Intro</a><br>
<a href="http://www.blah.com/">01-Intro</a><br>
<a href="http://www.blah.com/">01-Intro</a><br>
</div>
</body>
</html>

I added the padding to the top div just to make sure it wouldn't jump back to the top onclick.

Free Programming Resources

n1ima
Born
Joined: Sep 05, 2004
Posts: 2
Status: Offline

September 5th, 2004, 2:49 pm

awesome! thanks, this works really well... if you'd like to see it in action, I used it in the right-hand column of my homepage under "Latest News & Editorials".

Thanks again,
Sue

DesignerElla
Born
Joined: Jun 12, 2005
Posts: 1
Status: Offline

June 12th, 2005, 3:35 pm

This works very well for me, except I needed to change the padding to either 0px or something small. The padding code is still required to be there, though.

I like it fine, but is there a way to put the hide link on the bottom?

Pleng
Newbie
Joined: Jul 26, 2006
Posts: 11
Status: Offline

July 26th, 2006, 2:01 am

I have installed this script on my site however there is a problem.

In the second call to the script I've changed the word "title" to "something esle, and this ensures that the correct bits of text expand and contract as required. The problem is,clicking on the "Hide Links..." and "More..." (ive replaced these with images but the principle is the same) always alters the text from the FIRST routine, regardless of which one has been clicked on.

Any ideas?

MasterZ
Expert
Joined: Dec 04, 2004
Posts: 699
Loc: Colorado Springs
Status: Offline

February 24th, 2009, 9:28 pm

Google search made me bring this up from the dead :p

HTML Code: [ Select ]

<head>
<script language="JavaScript">
function showAndHide(theId)
{
var el = document.getElementById(theId)

if (el.style.display=="none")
{
el.style.display="block"; //show element
}
else
{
el.style.display="none"; //hide element
}
}
</script>
</head>
<body>
....
<a href="#" onClick = showAndHide('TableBody')>Show/Hide</a>

<div id="TableBody" style="display: none;">
// Bunch of text
</div>
..
</body>

<head>
<script language="JavaScript">
function showAndHide(theId)
{
var el = document.getElementById(theId)
if (el.style.display=="none")
{
el.style.display="block"; //show element
}
else
{
el.style.display="none"; //hide element
}
}
</script>
</head>
<body>
....
<a href="#" onClick = showAndHide('TableBody')>Show/Hide</a>
<div id="TableBody" style="display: none;">
// Bunch of text
</div>
..
</body>

But it doesn't hide the text on page load and when I click on the link nothing happens. Any ideas?

Eternal Truth Ministry - Biblical Resources, Forums
Have mercy on me, O God, according to your unfailing love; according to your great compassion blot out my transgressions. - Psalm 51:1 http://www.zssites.net - ZS Sites Web Hosting

Bogey
Bogey
Joined: Jul 14, 2005
Posts: 8211
Loc: USA
Status: Offline

February 24th, 2009, 9:39 pm

I got no ideas because it works for me.

I used Firefox and MSIE7 on Windows XP Pro.

Just the default is hidden. If you want it to show on default, change the "display: none;" to "display: block;" in the DIV in the body section.

"Bring forth therefore fruits meet for repentance:" Matthew 3:8

MasterZ
Expert
Joined: Dec 04, 2004
Posts: 699
Loc: Colorado Springs
Status: Offline

February 24th, 2009, 9:44 pm

I'm using FF on Mac, and Safari, both show the same thing.

http://www.eternaltruthministry.com/_zs/500.html is the page, most of the body of the page should be hidden until the link is clicked.

Anything? Please?

Bogey
Bogey
Joined: Jul 14, 2005
Posts: 8211
Loc: USA
Status: Offline

February 24th, 2009, 9:56 pm

Ahh! In place of the DIV close that table, start a new table with the same class, the ID and the STYLE, and than close that table in place of </div> and than start a the table with the same class to finish off the table... I copied the source and done that for you here.

HTML Code: [ Select ]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="/_zs/error.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
function showAndHide(theId)
{
var el = document.getElementById(theId)

if (el.style.display=="none")
{
el.style.display="block"; //show element
}
else
{
el.style.display="none"; //hide element
}
}
</script>
</head>
<body>
<br />
<div id="ErrorHeader">Error 500: Internal Server Error</div>

<br />
<table class="ErrorBody">
<tr>
<td>There is an internal error on this server. Please contact the Webmaster at <a href="mailto:Webmaster@EternalTruthMinistry.com">Webmaster@EternalTruthMinistry.com</a> if this problem persists.<br /><br />While you wait for the server issue to be resolved, check out these resources.</td>
</tr>
<tr>

<td> </td>
</tr>
<tr>
<td><embed src="http://www.tangle.com/flash/swf/flvplayer.swf" FlashVars="viewkey=ee73e63418003b47d7d5" quality="high" width="330" height="270" allowScriptAccess="always" name="tangle_video" menu="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed></td>
</tr>
<tr>
<td class="TableMessage">Download <strong><a href="http://websrvr25ca.audiovideoweb.com/ca25web26049/general/hbks.zip">Hell's Best Kept Secret</a></strong></td>
</tr>

<tr>
<td> </td>
</tr>
<tr>
<td class="TableMessage"><strong><a href="#" onClick = showAndHide('TableBody')>If you died right now would you go to heaven?</a></strong><br />You can know for sure in just a few minutes.</td>
</tr>
<span style="color: #FF0000"> </table></span>
<span style="color: #FF0000"> <table class="ErrorBody" id="TableBody" style="display: none;"></span>
<tr>

<td class="TableMessage"><strong>Are you a sinner?</strong><br />Romans 3:23, "<span class="Verse">For all have sinned, and come short of the glory of God.</span>"<br /><br />
That means that you, along with everyone else, have broken the laws, or standards of God. Romans 3:10-18<br /><br />
Don't believe me? Ask yourself these questions:
<ul>
<li>Have you ever told a lie?</li>
<li>Have you ever stolen anything?</li>

<li>Have you ever looked with lust? (Jesus calls this adultery!)</li>
<li>Have you ever used God's name as a curse word?</li>
</ul>
</td>
</tr>
<tr>
<td class="TableMessage"><strong>There is a punishment for sin!</strong><br />Romans 6:23, teaches us about the consequences of sin - "<span class="Verse">For the wages of sin is death; but the gift of God is eternal life through Jesus Christ our Lord.</span>" The punishment that we have earned for our sins is death. Not just physical death, but eternal death!</td>

</tr>
<tr>
<td class="TableMessage"><strong>But there's Hope</strong><br />Romans 5:8 declares, "<span class="Verse">But God demonstrates His own love toward us, in that while we were still sinners, Christ died for us.</span>" Jesus Christ died for us! Jesus' death paid for the price of our sins. Jesus' resurrection proves that God accepted Jesus' death as the payment for our sins.</td>
</tr>
<tr>
<td class="TableMessage"><strong>Repent and Believe</strong><br />Romans 10:9, "<span class="Verse">that if you confess with your mouth Jesus as Lord, and believe in your heart that God raised Him from the dead, you will be saved.</span>" Because of Jesus' death on our behalf, all we have to do is believe in Him, trusting His death as the payment for our sins - and we will be saved! Romans 10:13 says it again, "<span class="Verse">for everyone who calls on the name of the Lord will be saved.</span>" Jesus died to pay the penalty for our sins and rescue us from eternal death. Salvation, the forgiveness of sins, is available to anyone who will trust in Jesus Christ as their Lord and Savior.</td>

</tr>
<tr>
<td class="TableMessage"><strong>The Good News</strong><br />Romans 5:1 has this wonderful message, "<span class="Verse">Therefore, since we have been justified through faith, we have peace with God through our Lord Jesus Christ.</span>" Through Jesus Christ we can have a relationship of peace with God. Romans 8:1 teaches us, "<span class="Verse">Therefore, there is now no condemnation for those who are in Christ Jesus.</span>" Because of Jesus' death on our behalf, we will never be condemned for our sins.</td>
</tr>
<tr>
<td> </td>

</tr>
<tr>
<td class="TableMessage"><strong>Now is the time for Salvation!</strong><br />There is no reason to wait any longer, repent (turn away) from your sins and believe in God. This minute pray to God asking for forgiveness and committing your life to Him.</td>
</tr>
<span style="color: #FF0000"> </table></span>
<span style="color: #FF0000"> <table class="ErrorBody"></span>
<tr>
<td> </td>
</tr>

<tr>
<td class="Copyright">© <a href="ZenorSoft.com">ZenorSoft Web Design</a> 2009</td>
</tr>
</table>

</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="/_zs/error.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
function showAndHide(theId)
{
var el = document.getElementById(theId)
if (el.style.display=="none")
{
el.style.display="block"; //show element
}
else
{
el.style.display="none"; //hide element
}
}
</script>
</head>
<body>
<br />
<div id="ErrorHeader">Error 500: Internal Server Error</div>
<br />
<table class="ErrorBody">
<tr>
<td>There is an internal error on this server. Please contact the Webmaster at <a href="mailto:Webmaster@EternalTruthMinistry.com">Webmaster@EternalTruthMinistry.com</a> if this problem persists.<br /><br />While you wait for the server issue to be resolved, check out these resources.</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><embed src="http://www.tangle.com/flash/swf/flvplayer.swf" FlashVars="viewkey=ee73e63418003b47d7d5" quality="high" width="330" height="270" allowScriptAccess="always" name="tangle_video" menu="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed></td>
</tr>
<tr>
<td class="TableMessage">Download <strong><a href="http://websrvr25ca.audiovideoweb.com/ca25web26049/general/hbks.zip">Hell's Best Kept Secret</a></strong></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="TableMessage"><strong><a href="#" onClick = showAndHide('TableBody')>If you died right now would you go to heaven?</a></strong><br />You can know for sure in just a few minutes.</td>
</tr>
<span style="color: #FF0000"> </table></span>
<span style="color: #FF0000"> <table class="ErrorBody" id="TableBody" style="display: none;"></span>
<tr>
<td class="TableMessage"><strong>Are you a sinner?</strong><br />Romans 3:23, "<span class="Verse">For all have sinned, and come short of the glory of God.</span>"<br /><br />
That means that you, along with everyone else, have broken the laws, or standards of God. Romans 3:10-18<br /><br />
Don't believe me? Ask yourself these questions:
<ul>
<li>Have you ever told a lie?</li>
<li>Have you ever stolen anything?</li>
<li>Have you ever looked with lust? (Jesus calls this adultery!)</li>
<li>Have you ever used God's name as a curse word?</li>
</ul>
</td>
</tr>
<tr>
<td class="TableMessage"><strong>There is a punishment for sin!</strong><br />Romans 6:23, teaches us about the consequences of sin - "<span class="Verse">For the wages of sin is death; but the gift of God is eternal life through Jesus Christ our Lord.</span>" The punishment that we have earned for our sins is death. Not just physical death, but eternal death!</td>
</tr>
<tr>
<td class="TableMessage"><strong>But there's Hope</strong><br />Romans 5:8 declares, "<span class="Verse">But God demonstrates His own love toward us, in that while we were still sinners, Christ died for us.</span>" Jesus Christ died for us! Jesus' death paid for the price of our sins. Jesus' resurrection proves that God accepted Jesus' death as the payment for our sins.</td>
</tr>
<tr>
<td class="TableMessage"><strong>Repent and Believe</strong><br />Romans 10:9, "<span class="Verse">that if you confess with your mouth Jesus as Lord, and believe in your heart that God raised Him from the dead, you will be saved.</span>" Because of Jesus' death on our behalf, all we have to do is believe in Him, trusting His death as the payment for our sins - and we will be saved! Romans 10:13 says it again, "<span class="Verse">for everyone who calls on the name of the Lord will be saved.</span>" Jesus died to pay the penalty for our sins and rescue us from eternal death. Salvation, the forgiveness of sins, is available to anyone who will trust in Jesus Christ as their Lord and Savior.</td>
</tr>
<tr>
<td class="TableMessage"><strong>The Good News</strong><br />Romans 5:1 has this wonderful message, "<span class="Verse">Therefore, since we have been justified through faith, we have peace with God through our Lord Jesus Christ.</span>" Through Jesus Christ we can have a relationship of peace with God. Romans 8:1 teaches us, "<span class="Verse">Therefore, there is now no condemnation for those who are in Christ Jesus.</span>" Because of Jesus' death on our behalf, we will never be condemned for our sins.</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="TableMessage"><strong>Now is the time for Salvation!</strong><br />There is no reason to wait any longer, repent (turn away) from your sins and believe in God. This minute pray to God asking for forgiveness and committing your life to Him.</td>
</tr>
<span style="color: #FF0000"> </table></span>
<span style="color: #FF0000"> <table class="ErrorBody"></span>
<tr>
<td> </td>
</tr>
<tr>
</tr>
</table>
</body>
</html>

I know, that's a bit messy but... that's the best I can come up with.

"Bring forth therefore fruits meet for repentance:" Matthew 3:8

MasterZ
Expert
Joined: Dec 04, 2004
Posts: 699
Loc: Colorado Springs
Status: Offline

February 24th, 2009, 10:15 pm

D'OH!

Can't believe I did that.

Thanks, it worked.

Bogey
Bogey
Joined: Jul 14, 2005
Posts: 8211
Loc: USA
Status: Offline

February 25th, 2009, 3:41 pm

Yup

"Bring forth therefore fruits meet for repentance:" Matthew 3:8

speechtherapy
Born
Joined: Jan 28, 2010
Posts: 1
Status: Offline

January 28th, 2010, 8:38 pm

I could really use some help! I am just trying to help out a non-profit and create and maintain a blog for them with Google's Blogger.

Here is the problem: I would like a chunk of code (preferably by Sunday?) I can just copy and paste into an HTML/Java 'Blogger gadget' that will show the following information "We meet at 1617 S. Gaylord, at 5pm on Thursday. Attendence is free and open to any therapists, or medical/speech professionals. For information on parking and how to access the building, please click here 'Show Add'l Info' " When they click 'Show Add'l Info', that link changes to read 'Hide Add'l Info', and the following information is displayed BELOW the initial information (as opposed to instead of) "Parking is free, but be sure to park in the western garage, as the east garage will lock after 6pm and your car will be held hostage. Take the north elevator to the 5th floor, and bang loudly on the door to room 506, and we'll come and let you in." When the link now saying 'Hide Add'l Info' is clicked, the process should reverse.
If someone could please just post the code I should use, I would be AWFULLY GRATEFUL!!!!! THANK YOU!!!!

Anonymous
Bot
- www.ozzu.com
Joined: 25 Feb 2008
Posts: ?
Loc: Ozzuland
Status: Online

January 28th, 2010, 8:38 pm

1, 2

To Reply to this topic you need to LOGIN or REGISTER. It is free.

Post Information

Total Posts in this topic: 16 posts
Users browsing this forum: No registered users and 239 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Show/Hide Text

Post Information

Sponsored Links

Other Languages

Website Development

Graphics

OS & Hardware

Internet Marketing

Marketplace

Community Area

Ozzu Maintenance

Forum Network

Forum Partners

Other Information