www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: show / hide button

  1. #1
    Join Date
    Nov 2005
    Posts
    15

    show / hide button

    I am new here and not very efficient at javascript.

    I want to use a show/hide button for my HTML site such that if there is subject and description then clicking on the show/hide button will open the description.

    How to do this?

    Or, can you suggest a link where this is explained?

    Thanks

  2. #2
    Join Date
    Sep 2005
    Posts
    128
    create a function using javascript and call it in the tag that you need to hide/show button or whatever, please elaborate whatyou need and maybe i can help you with your problem

  3. #3
    Join Date
    Sep 2005
    Posts
    128
    copy this in a note pad and save it as html then preview in browser
    <html>
    <head><title></title></head>
    <body>
    <form name="frm1">
    <input type="text" name="txtHide" width="20"><br/>
    <input type="button" name="btnHide" value="HIDE" width="20" onclick="hide('txtHide');">
    </form>
    </body>
    <script language="javascript">
    function hide(a)
    {
    document.getElementById(a).style.visibility = "hidden";
    }
    </script>
    </html>
    if you want it visible
    change the "hidden" into "visible"

    hope this will help you

  4. #4
    Join Date
    Nov 2005
    Posts
    15
    Thanks for that quick reply.

    Supoose I have this:

    What is Lactic acid bacteria?

    Refers to a large group of beneficial bacteria that have similar properties and all produce lactic acid as an end product of the fermentation process. They are widespread in nature and are also found in our digestive systems. Although they are best known for their role in the preparation of fermented dairy products, they are also used for pickling of vegetables, baking, winemaking, curing fish, meats and sausages.


    Now I want to make "What is Lactic acid bacteria?" as the subject followed by the description like this:

    What is Lactic acid bacteria?

    Show/Hide


    Now when show/hide button is clicked it will show the description

    "Refers to ----------------meats and sausages" (as written above).




    Again if i click the show /hide button it will hide the description.


    ---------------

    I have checked your script and did you mean to change visibility = "hidden"

    to visibility = "visible". It is not working. Some change need to be made elsewhere also.

    As i have told before am not very proficient in J script

  5. #5
    Join Date
    Sep 2005
    Posts
    128
    <html>
    <head><title></title></head>
    <body>
    <form name="frm1">
    <h1><input type="text" value="Refers to ----------------meats and sausages" name="message" style="WIDTH: 270px"><h1>
    <input type="button" name="btnHide" value="SHOW/HIDE" width="20" onclick="hide('message');" width="5" height="5">
    <input type="hidden" value="1" name="hidVal">
    </form>
    </body>
    <script language="javascript">
    function hide(a)
    {
    if(document.getElementById("hidVal").value==1)
    {
    document.getElementById(a).style.visibility = "hidden";
    document.getElementById("hidVal").value=2;
    }
    else if(document.getElementById("hidVal").value==2)
    {
    document.getElementById(a).style.visibility = "visible";
    document.getElementById("hidVal").value=1;
    }

    }
    </script>
    </html>
    try this one

  6. #6
    Join Date
    Sep 2005
    Posts
    128
    just use this as a reference, this is the basis for what you are trying to do, if you have any question feel free to do so

  7. #7
    Join Date
    Nov 2005
    Posts
    15
    Ok that's fine.

    Please verify if the following two are possible.

    1)I want the description in the page itself not in a box or form.

    2) I want to make the "hide" mode as default. Here it is in "show" mode.

  8. #8
    Join Date
    Sep 2005
    Posts
    128
    yes it is possible 100%

  9. #9
    Join Date
    Sep 2008
    Posts
    48
    Quote Originally Posted by redfox View Post
    <html>
    <head><title></title></head>
    <body>
    <form name="frm1">
    <h1><input type="text" value="Refers to ----------------meats and sausages" name="message" style="WIDTH: 270px"><h1>
    <input type="button" name="btnHide" value="SHOW/HIDE" width="20" onclick="hide('message');" width="5" height="5">
    <input type="hidden" value="1" name="hidVal">
    </form>
    </body>
    <script language="javascript">
    function hide(a)
    {
    if(document.getElementById("hidVal").value==1)
    {
    document.getElementById(a).style.visibility = "hidden";
    document.getElementById("hidVal").value=2;
    }
    else if(document.getElementById("hidVal").value==2)
    {
    document.getElementById(a).style.visibility = "visible";
    document.getElementById("hidVal").value=1;
    }

    }
    </script>
    </html>
    try this one
    That is very big code.My code is simple.Hide mode is default :-)
    Code:
    <style type="text/css">
    <!--
    body{
    background:#ccc;
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:1em;
    }
    -->
    </style>
    
    <script>
    function change(id,vis){
    document.getElementById (id).style.display=vis;
    }
    </script>
    <div style="display:inline" id="super" onclick="change ('qu','block');change ('super','none');">+</div>   Qui
    <div style="display:none" id="qu" onclick="change ('super','inline');change ('qu','none');">- Ans</div>
    Last edited by spiderman11; 09-30-2008 at 02:50 AM.

  10. #10
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,111
    use jQuery..it's glorious for this type of thing

  11. #11
    Join Date
    Sep 2008
    Posts
    48
    javaman,if you want button tell me,i will give you other code.But i think +/- is OK.

  12. #12
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by cbVision View Post
    use jQuery..it's glorious for this type of thing
    Nuts. This is the exact type of thing for which you should not use JQuery nor any other framework. Do you think JQuery is another language? Like many other frameworks, JQuery is just a javascript library of ready-made artifacts and effects. Most of the time it is too heavy and not so flexible to use frameworks. Create your own codes if you want to save time and nerves.

  13. #13
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,457
    Hi there javaman,

    have a look at this example, it may suit your needs...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>show and hide divs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #container {
        width:750px;
        height:266px;
        padding:5px;
        border:3px double #999;
        background-color:#eff;
        margin:auto;
     }
    #buttons {
        float:left;
        width:250px;
        margin:0;
        padding:0;
        list-style-type:none;
     }
    #buttons li {
        margin:4px;
        color:#333;
     }
    #buttons .hs {
        display:block;
        width:100px;
        line-height:22px;
        border:2px inset #999;
        color:#333;
        text-decoration:none;
        text-align:center;
        background-color:#ccc;
     }
    .show {
        float:left;
        width:478px;
        height:244px;
        overflow:auto;
        padding:10px;
        border:1px solid #999;
        background-color:#fff;
     }
    .show p {
        margin:0;
        padding-bottom:10px;
        text-align:justify;
     }
    .hide {
        width:0;
        height:0;
        overflow:hidden;
     }
    #d0,#d4 {
        color:#999;
     }
    #d1,#d2,#d3 {
        color:#333;
     }
    .show p {
        text-indent:30px;
     }
    .show p:first-letter {
        font-family:times,serif;
        font-size:150%;
        font-weight:bold;
        color:#333;
     }
    </style>
    
    <script type="text/javascript">
    
       var c;
       var k=0;
       var j=0;
       var ary=[];
       var divs=document.getElementsByTagName('div');
       var lnks=document.getElementsByTagName('a');
       var splt;
    
    /**************************************************
    
    function init is provided for those who have javascript disabled
    and would, otherwise, not be able to view any of the divs at all.
    They would also I presume not need the links that control the divs
    so that will not show up.
    
    ***************************************************/
    function init() {
    for(c=0;c<divs.length;c++) {
      if(divs[c].className=='show') {
         divs[c].className='hide';
         divs[c].id='d'+k++;     
       }
      }
    for(c=0;c<lnks.length;c++) {
    if(lnks[c].className=='hide') {
       ary[c]=true;
       lnks[c].className='hs';
       lnks[c].id='a'+j++;
       lnks[c].onclick=function() {
       splt=this.id.split('a')[1];
    if(ary[splt]==true) {
       this.firstChild.nodeValue='hide';
       ary[splt]=false;
       showDiv(splt);
       return false;
         }
    else {
       this.firstChild.nodeValue='show';
       ary[splt]=true;
    
    document.getElementById('d'+splt).className='hide';
       return false;
         }
        }
       }
      }
     }
    
    function showDiv(num) {
    for(c=0;c<j;c++){
       document.getElementById('a'+c).firstChild.nodeValue='show';
       document.getElementById('a'+num).firstChild.nodeValue='hide';
       ary[c]=true;
       ary[num]=false;
     }
    for(c=0;c<divs.length;c++) {  
      if(divs[c].className=='show') {
         divs[c].className='hide';
      }
     }
    document.getElementById('d'+num).className='show';
     }
    
    window.onload=function() {
       init();
     }
    
    </script>
    
    </head>
    <body>
    
    <div id="container">
    
    <ul id="buttons">
    <li>What is Lactic acid bacteria?</li>
     <li><a class="hide" href="#">show</a></li>
    <li>what is in div 2</li>
     <li><a class="hide" href="#">show</a></li>
    <li>what is in div 3</li>
     <li><a class="hide" href="#">show</a></li>
    <li>what is in div 4</li>
     <li><a class="hide" href="#">show</a></li>
    <li>What is Lorem ipsum?</li>
     <li><a class="hide" href="#">show</a></li> 
    </ul>
    
    <div class="show">
    <p>
    Refers to a large group of beneficial bacteria that have similar properties and all produce 
    lactic acid as an end product of the fermentation process. They are widespread in nature 
    and are also found in our digestive systems. Although they are best known for their role in 
    the preparation of fermented dairy products, they are also used for pickling of vegetables, 
    baking, winemaking, curing fish, meats and sausages.
    </p>
    </div>
    
    <div class="show"><p>This is div two</p></div>
    <div class="show"><p>This is div three</p></div>
    <div class="show"><p>This is div four</p></div>
    
    <div class="show">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p>
    <p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
    orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
    augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
    interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
    lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
    lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
    Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
    volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
    Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p>
    </div> 
    
    </div>
    
    </body>
    </html>
    
    coothead

  14. #14
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,457
    Hi there javaman,

    if the code in my previous post was of use to you, I would suggest that you disregard it.
    The reason for this is that it does not degrade quite correctly when javascript is disabled.
    The amended code works OK.
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>show and hide divs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #container {
        width:750px;
        padding:5px;
        border:3px double #999;
        background-color:#eff;
        margin:auto;
        overflow:auto;
     }
    .container_height{
        height:266px;
     }
    #buttons {
        float:left;
        width:250px;
        margin:0;
        padding:0;
        list-style-type:none;
     }
    #buttons li {
        margin:4px;
        color:#333;
     }
    #buttons .hs {
        display:block;
        width:100px;
        line-height:22px;
        border:2px inset #999;
        color:#333;
        text-decoration:none;
        text-align:center;
        background-color:#ccc;
     }
    .show {
        float:left;
        width:478px;
        height:244px;
        overflow:auto;
        padding:10px;
        border:1px solid #999;
        background-color:#fff;
     }
    .show p {
        margin:0;
        padding-bottom:10px;
        text-align:justify;
     }
    .hide {
        width:0;
        height:0;
        font-size:0;
        margin:0;
        overflow:hidden;
     }
    #d0,#d4 {
        color:#999;
     }
    #d1,#d2,#d3 {
        color:#333;
     }
    .show p {
        text-indent:30px;
     }
    .show p:first-letter {
        font-family:times,serif;
        font-size:150%;
        font-weight:bold;
        color:#333;
     }
    </style>
    
    <script type="text/javascript">
    
       var c;
       var k=0;
       var j=0;
       var ary=[];
       var divs=document.getElementsByTagName('div');
       var lnks=document.getElementsByTagName('a');
       var splt;
    
    /**************************************************
    
    function init is provided for those who have javascript disabled
    and would, otherwise, not be able to view any of the divs at all.
    They would also I presume not need the links that control the divs
    so that will not show up.
    
    ***************************************************/
    function init() {
    for(c=0;c<divs.length;c++) {
      if(divs[c].className=='show') {
         divs[c].className='hide';
         divs[c].id='d'+k++;    
     }
       document.getElementsByTagName('container').className='container_height'; 
     }
    for(c=0;c<lnks.length;c++) {
    if(lnks[c].className=='hide') {
       lnks[c].firstChild.nodeValue='show';
       ary[c]=true;
       lnks[c].className='hs';
       lnks[c].id='a'+j++;
       lnks[c].onclick=function() {
       splt=this.id.split('a')[1];
    if(ary[splt]==true) {
       this.firstChild.nodeValue='hide';
       ary[splt]=false;
       showDiv(splt);
       return false;
     }
    else {
       this.firstChild.nodeValue='show';
       ary[splt]=true;
    
    document.getElementById('d'+splt).className='hide';
       return false;
         }
        }
       }
      }
     }
    
    function showDiv(num) {
    for(c=0;c<j;c++){
       document.getElementById('a'+c).firstChild.nodeValue='show';
       document.getElementById('a'+num).firstChild.nodeValue='hide';
       ary[c]=true;
       ary[num]=false;
     }
    for(c=0;c<divs.length;c++) {  
      if(divs[c].className=='show') {
         divs[c].className='hide';
      }
     }
    document.getElementById('d'+num).className='show';
     }
    
    window.onload=function() {
       init();
     }
    
    </script>
    
    </head>
    <body>
    
    <div id="container">
    
    <ul id="buttons">
    <li>What is Lactic acid bacteria?</li>
     <li><a class="hide" href="#">&nbsp;</a></li>
    <li>what is in div 2</li>
     <li><a class="hide" href="#">&nbsp;</a></li>
    <li>what is in div 3</li>
     <li><a class="hide" href="#">&nbsp;</a></li>
    <li>what is in div 4</li>
     <li><a class="hide" href="#">&nbsp;</a></li>
    <li>What is Lorem ipsum?</li>
     <li><a class="hide" href="#">&nbsp;</a></li> 
    </ul>
    
    <div class="show">
    <p>
    Refers to a large group of beneficial bacteria that have similar properties and all produce 
    lactic acid as an end product of the fermentation process. They are widespread in nature 
    and are also found in our digestive systems. Although they are best known for their role in 
    the preparation of fermented dairy products, they are also used for pickling of vegetables, 
    baking, winemaking, curing fish, meats and sausages.
    </p>
    </div>
    
    <div class="show"><p>This is div two</p></div>
    <div class="show"><p>This is div three</p></div>
    <div class="show"><p>This is div four</p></div>
    
    <div class="show">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p>
    <p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
    orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
    augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
    interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
    lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
    lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
    Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
    volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
    Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p>
    </div> 
    
    </div>
    
    </body>
    </html>
    
    coothead
    Last edited by coothead; 10-01-2008 at 10:30 AM.

  15. #15
    Join Date
    Sep 2008
    Posts
    48
    javaman,why you don't use this thread?

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

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



Recent Articles