Show/Hide Text

  • mikorleone224th
  • Born
  • Born
  • mikorleone224th
  • Posts: 2

Post 3+ Months Ago

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>
  1. <script language="JavaScript">
  2. function showAndHide(id)
  3. {
  4. var name = document.getElementById("id")
  5. if (div.style.display=="none")
  6. {
  7. div.style.display=="block"; //show element
  8. }
  9. else
  10. {
  11. div.style.display=="none"; //hide element
  12. }
  13. }
  14. </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>
  1. <a href="" onClick = showAndHide('Title')><b>Some Title</b></a><br>
  2. <div id='Title' style="display:none">
  3. <a href="http://www.mylink.com" >01-Intro</a>
  4. </div>

i figure i must doin somethin wrong here too. any help would be greatly appreciated
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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>
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script language="JavaScript">
  5. function showAndHide(theId)
  6. {
  7.     var el = document.getElementById(theId)
  8.     if (el.style.display=="none")
  9.     {
  10.         el.style.display="block"; //show element
  11.     }
  12.     else
  13.     {
  14.         el.style.display="none"; //hide element
  15.     }
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <p><a href="#" onClick = showAndHide('Title')>Some Title</a></p>
  21. <div id='Title' style="display:none">
  22. <a href="http://www.blah.com/">01-Intro</a>
  23. </div>
  24. </body>
  25. </html>


You should also use the code tag when posting snippets on the forum here, so that they will show up correctly.
  • mikorleone224th
  • Born
  • Born
  • mikorleone224th
  • Posts: 2

Post 3+ Months Ago

everythin is a go now. thanks alot....i really appreciate da help
  • n1ima
  • Born
  • Born
  • n1ima
  • Posts: 2

Post 3+ Months Ago

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
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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>
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script language="JavaScript">
  5. function showAndHide(theId) {
  6.   var el = document.getElementById(theId);
  7.     var link = document.getElementById("moreLink");
  8.   if (el.style.display=="none") {
  9.    el.style.display="block"; //show element
  10.         link.innerHTML = "Hide Links...";
  11.   }
  12.   else {
  13.    el.style.display="none"; //hide element
  14.         link.innerHTML = "More...";
  15.   }
  16.     return false;
  17. }
  18. </script>
  19. </head>
  20. <body>
  21. <div style="padding-top:400px">
  22. <a href="http://www.blah.com/">01-Intro</a><br>
  23. <a href="http://www.blah.com/">01-Intro</a><br>
  24. <a href="http://www.blah.com/">01-Intro</a><br>
  25. </div>
  26. <p><a id="moreLink" href="#" onClick="return showAndHide('Title')">More...</a></p>
  27. <div id='Title' style="display:none">
  28. <a href="http://www.blah.com/">01-Intro</a><br>
  29. <a href="http://www.blah.com/">01-Intro</a><br>
  30. <a href="http://www.blah.com/">01-Intro</a><br>
  31. </div>
  32. </body>
  33. </html>


I added the padding to the top div just to make sure it wouldn't jump back to the top onclick.
  • n1ima
  • Born
  • Born
  • n1ima
  • Posts: 2

Post 3+ Months Ago

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
  • Born
  • DesignerElla
  • Posts: 1

Post 3+ Months Ago

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
  • Newbie
  • Pleng
  • Posts: 11

Post 3+ Months Ago

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
  • Expert
  • User avatar
  • Posts: 699
  • Loc: Colorado Springs

Post 3+ Months Ago

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>
 
  1.  
  2. <head>
  3.         <script language="JavaScript">
  4.         function showAndHide(theId)
  5.         {
  6.            var el = document.getElementById(theId)
  7.  
  8.            if (el.style.display=="none")
  9.            {
  10.               el.style.display="block"; //show element
  11.            }
  12.            else
  13.            {
  14.               el.style.display="none"; //hide element
  15.            }
  16.         }
  17.         </script>
  18. </head>
  19. <body>
  20. ....
  21. <a href="#" onClick = showAndHide('TableBody')>Show/Hide</a>
  22.  
  23. <div id="TableBody" style="display: none;">
  24. // Bunch of text
  25. </div>
  26. ..
  27. </body>
  28.  


But it doesn't hide the text on page load and when I click on the link nothing happens. Any ideas?
  • Bogey
  • Bogey
  • Genius
  • Bogey
  • Posts: 8363
  • Loc: USA

Post 3+ Months Ago

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.
  • MasterZ
  • Expert
  • Expert
  • User avatar
  • Posts: 699
  • Loc: Colorado Springs

Post 3+ Months Ago

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
  • Genius
  • Bogey
  • Posts: 8363
  • Loc: USA

Post 3+ Months Ago

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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</td>
            </tr>
 
            <tr>
                <td class="Copyright">&copy; <a href="ZenorSoft.com">ZenorSoft Web Design</a> 2009</td>
            </tr>
        </table>
       
    </body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.     "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4.     <head>
  5.         <link href="/_zs/error.css" rel="stylesheet" type="text/css" />
  6.         <script language="JavaScript">
  7.         function showAndHide(theId)
  8.         {
  9.            var el = document.getElementById(theId)
  10.  
  11.            if (el.style.display=="none")
  12.            {
  13.               el.style.display="block"; //show element
  14.            }
  15.            else
  16.            {
  17.               el.style.display="none"; //hide element
  18.            }
  19.         }
  20.         </script>
  21.     </head>
  22.     <body>
  23.         <br />
  24.         <div id="ErrorHeader">Error 500: Internal Server Error</div>
  25.  
  26.         <br />
  27.         <table class="ErrorBody">
  28.             <tr>
  29.                 <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>
  30.             </tr>
  31.             <tr>
  32.  
  33.                 <td>&nbsp;</td>
  34.             </tr>
  35.             <tr>
  36.                 <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>
  37.             </tr>
  38.             <tr>
  39.                 <td class="TableMessage">Download <strong><a href="http://websrvr25ca.audiovideoweb.com/ca25web26049/general/hbks.zip">Hell's Best Kept Secret</a></strong></td>
  40.             </tr>
  41.  
  42.             <tr>
  43.                 <td>&nbsp;</td>
  44.             </tr>
  45.             <tr>
  46.                 <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>
  47.             </tr>
  48. <span style="color: #FF0000">        </table></span>
  49. <span style="color: #FF0000">        <table class="ErrorBody" id="TableBody" style="display: none;"></span>
  50.             <tr>
  51.  
  52.                 <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 />
  53.                     That means that you, along with everyone else, have broken the laws, or standards of God. Romans 3:10-18<br /><br />
  54.                     Don't believe me?  Ask yourself these questions:
  55.                     <ul>
  56.                         <li>Have you ever told a lie?</li>
  57.                         <li>Have you ever stolen anything?</li>
  58.  
  59.                         <li>Have you ever looked with lust? (Jesus calls this adultery!)</li>
  60.                         <li>Have you ever used God's name as a curse word?</li>
  61.                     </ul>
  62.                 </td>
  63.             </tr>
  64.             <tr>
  65.                 <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>
  66.  
  67.             </tr>
  68.             <tr>
  69.                 <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>
  70.             </tr>
  71.             <tr>
  72.                 <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>
  73.  
  74.             </tr>
  75.             <tr>
  76.                 <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>
  77.             </tr>
  78.             <tr>
  79.                 <td>&nbsp;</td>
  80.  
  81.             </tr>
  82.             <tr>
  83.                 <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>
  84.             </tr>
  85. <span style="color: #FF0000">        </table></span>
  86. <span style="color: #FF0000">        <table class="ErrorBody"></span>
  87.             <tr>
  88.                 <td>&nbsp;</td>
  89.             </tr>
  90.  
  91.             <tr>
  92.                 <td class="Copyright">&copy; <a href="ZenorSoft.com">ZenorSoft Web Design</a> 2009</td>
  93.             </tr>
  94.         </table>
  95.        
  96.     </body>
  97. </html>

I know, that's a bit messy but... that's the best I can come up with.
  • MasterZ
  • Expert
  • Expert
  • User avatar
  • Posts: 699
  • Loc: Colorado Springs

Post 3+ Months Ago

D'OH!

Can't believe I did that.

Thanks, it worked.
  • Bogey
  • Bogey
  • Genius
  • Bogey
  • Posts: 8363
  • Loc: USA

Post 3+ Months Ago

Yup :)
  • speechtherapy
  • Born
  • Born
  • speechtherapy
  • Posts: 1

Post 3+ Months Ago

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!!!!
  • ddeckys
  • Born
  • Born
  • ddeckys
  • Posts: 1

Post 3+ Months Ago

RichB wrote:
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://linkhere/">01-Intro</a>

</div>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script language="JavaScript">
  5. function showAndHide(theId)
  6. {
  7.     var el = document.getElementById(theId)
  8.     if (el.style.display=="none")
  9.     {
  10.         el.style.display="block"; //show element
  11.     }
  12.     else
  13.     {
  14.         el.style.display="none"; //hide element
  15.     }
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <p><a href="#" onClick = showAndHide('Title')>Some Title</a></p>
  21. <div id='Title' style="display:none">
  22. <a href="http://linkhere/">01-Intro</a>
  23. </div>
  24. </body>
  25. </html>


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


When I use this, I seem to jump back up to the top of the page every time I click a link. Is there any way to prevent this?

Post Information

  • Total Posts in this topic: 16 posts
  • Users browsing this forum: No registered users and 73 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.