show / hide button

This site is best viewed in a modern browser with JavaScript enabled.

javaman

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

redfox

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

redfox

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

javaman

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[/COLOR]

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

redfox

<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

redfox

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

javaman

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.

redfox

yes it is possible 100%

spiderman11

redfox;458041 wrote:
<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 :-)

<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>

cbVision

use jQuery..it's glorious for this type of thing

spiderman11

javaman,if you want button tell me,i will give you other code.But i think +/- is OK.

Kor

cbVision;936436 wrote:
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? :rolleyes: 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.

coothead

Hi there javaman,

have a look at this example, it may suit your needs...

[color=navy]
<!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>
[/color]

coothead

coothead

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.

[color=navy]
<!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>
[/color]

coothead

spiderman11

javaman,why you don't use this thread?

coothead

Hi there spiderman11,

javaman, why you don't use this thread?

The reason is that this thread is nearly THREE YEARS OLD. :eek:
It must be fairly certain that he no longer has his original problem, or heavens forbid, he is dead.

Surely the real question should be....
[indent]Why on earth did you bother to resurrect it? [/indent]
coothead

Alexander777

spiderman11;936047 wrote:
That is very big code.My code is simple.Hide mode is default :-)
<style type="text/css">

</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>

Hi my names Alex. I used this code and it works great! I was just wondering if I could use this code more than once on the same page using different scripts? Cause it worked for me but was only able to use it on one description. :/ Hope this question makes sense.

Thanks