12 replies [Last post]
BenPollinger
Offline
newbie
Newcastle upon Tyne, UK
Last seen: 10 years 43 weeks ago
Newcastle upon Tyne, UK
Joined: 2003-09-30
Posts: 9
Points: 0

Dear all,

I am sure this has been done many times before but I can not find a simple solution. Could someone point me in the right direction?

I want to have a show/hide function for a DIV, using javascript/DOM properties.

Using javascript onclick() with two buttons ('show' and 'hide', each in their own DIVs), it would work something like this:

By default, the 'show' button is hidden, the main DIV and hide button are displayed

Clicking the 'hide' button hides main DIV and 'hide' button itself, displays the 'show' button
Clicking the 'show' button shows main DIV and 'show' button itself, displays the 'hide button

I think this can be achieved using something like document.getElementById(DIVid).style.visibility="hidden"

But how exactly do I do this?

Thanks for any help,
Ben

Tags:
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 hour 27 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5084
Points: 2662

Show / hide a DIV using javascript

Hi Ben,
One simple way to do this would be have to simple functions one to hide and one to show.

function showstuff(boxid){
   document.getElementById(boxid).style.visibility="visible";
}
 
function hidestuff(boxid){
   document.getElementById(boxid).style.visibility="hidden";
}

and call them like
onclick="showstuff('id_of_element_to_show');"

[updated: 18/06/2012]
You could also switch a class, add it when you want to hide the element and remove it when you want to show it again.

Firstly setup a rule in your stylesheet to hide the element with display:none or visibility:hidden.

.hidden {
  display:none;
}

Then on a JavaScript event such as onmouseover or onclick, toggle the class.
/** 
  * @param eid, Id of the element to change.
  * @param myclass, Class name to toggle.
**/
function toggleClass(eid, myclass) {
  var theEle = document.getElementById(eid);
  var eClass = theEle.className;
 
  if (eClass.indexOf(myclass) >= 0 ) {
     // we already have this element hidden so remove the class.
     theEle.className = eClass.replace(myclass, '');
  } else{
     // add the class. 
     theEle.className  +=  ' ' + myclass;
  }
}

See also Hiding things with CSS, JavaScript or jQuery

Hope that helps

BenPollinger
Offline
newbie
Newcastle upon Tyne, UK
Last seen: 10 years 43 weeks ago
Newcastle upon Tyne, UK
Joined: 2003-09-30
Posts: 9
Points: 0

Show / hide a DIV using javascript

Hi Tony, thanks for the reply,

That looks like what i need, except I need each onclick to hide one and show the other. So can I have:

onclick="showstuff('id_to_show'); hidestuff('id_to_hide');"

Or something to that effect?

cheers,
Ben

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 hour 27 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5084
Points: 2662

Show / hide a DIV using javascript

Hi Ben,
That should do the trick.

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 1 year 11 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Show / hide a DIV using javascript

Hi Tony, I am looking to achieve something similar

I have about 42 Divs in a page named question1, question2, question3.... question40

I need to display 6 divs at a time with a next and prev input buttons. When the user clicks the next button it will hide the first six and show the next six until the user reaches the very end. Could you give me some directions ?

http//melbourne.ug.php.net

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 hour 27 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5084
Points: 2662

Show / hide a DIV using javascript

Hi paCkeTroUTer,
What you could do is wrap each 6 questions with a next / back button in a div and assign it an id "idone" "idtwo" in my example. Set them all to display:none; except the first one.

function switchquestions(theid){ 
var thearray= new Array("idone","idtwo", "idthree"); 
for(i=0; i<thearray.length; i++){ 
      if(thearray[i] == theid){ 
            document.getElementById(theid).style.display="block"; 
      }else{ 
            document.getElementById(thearray[i]).style.display="none"; 
      } 
   } 
}
Hope that helps

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 1 year 11 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Show / hide a DIV using javascript

Thanks Tony.. looking into it. It is a dynamically generated questionnaire and so I am trying to work out how to pass the div name to the function. Will get back if I am stuck. Smile

http//melbourne.ug.php.net

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 1 year 11 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Show / hide a DIV using javascript

Tony can you take a look at this html code which I have generated dynamically. The onclick event doesn't get fired... any ideas ?

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html>
<head>
<title>Personal Profiling - Living Your Design</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<meta http-equiv="expires" content="-1" />
<meta http-equiv="pragma" content="no-cache" />
<meta HTTP-EQUIV="Expires" CONTENT=" Mon, 26 Jul 1997 05:00:00 GMT">
<link href='/profiling/profiler.css' rel='stylesheet' type='text/css'>
<script language='javascript1.2' type='text/javascript' src='/profiling/includes/multiform.js'></script>
<script language='javajcript1.2' type='text/javascript' src='/profiling/includes/display.js'></script>
</head><script type="text/javascript">
var lastHidden=6;

function switchquestions(theid){

var thearray= new Array("questionGroup1","questionGroup2", "questionGroup3", "questionGroup4", "questionGroup5", "questionGroup6", "questionGroup7", "questionGroup8");
for(i=0; i<thearray.length; i++){
      if(thearray[i] == theid){
            document.getElementById(theid).style.display="block";
      }else{
            document.getElementById(thearray[i]).style.display="none";
      }
	  alert(theid);
   }
}
</script>

<body>
<table width="100%" height="100%">
	<tr>
		<td align="center">
			<strong style="text-align:left; display:block;width:500px;padding:0px 0px 5px 10px;">Welcome Jeffery Fernandez</strong>
			<div id="container" align="left" style="width:500px; min-height:325px; padding:10px; border-bottom:1px solid #FFCC99; border-top:1px solid #FFCC99">
				<h2>Perception Questionnaire</h2>
				<form name="questionnaire" method="post" action="/profiling/questionnaire/index.php">
<div id="questionGroup1">

<div id="question1" style="padding: 10px 0px;">
Q1)&nbsp;&nbsp;&nbsp;How much time have you spent at work or pursuing work activity in the last two weeks?<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers1" type="radio" value="20" >
	&nbsp;&nbsp;40 - 60 hours<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers1" type="radio" value="50" >
	&nbsp;&nbsp;>100 hours<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers1" type="radio" value="30" >
	&nbsp;&nbsp;60 - 80 hours<br />

	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers1" type="radio" value="10" >
	&nbsp;&nbsp;< 40 hours<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers1" type="radio" value="40" >
	&nbsp;&nbsp;80 - 100 hours<br />
	</div>
<div id="question2" style="padding: 10px 0px;">
Q2)&nbsp;&nbsp;&nbsp;How much time did you spend traveling to and from work in the last two weeks?<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers2" type="radio" value="16" >

	&nbsp;&nbsp;15-20 hours<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers2" type="radio" value="8" >
	&nbsp;&nbsp;5-10 hours<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers2" type="radio" value="20" >
	&nbsp;&nbsp;> 20 hours<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers2" type="radio" value="12" >
	&nbsp;&nbsp;10-15 hours<br />

	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers2" type="radio" value="4" >
	&nbsp;&nbsp;< 5 hours<br />
	</div>
<div id="question3" style="padding: 10px 0px;">
Q3)&nbsp;&nbsp;&nbsp;How many work related functions have you attended outside of work hours in the last two weeks?<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers3" type="radio" value="10" >
	&nbsp;&nbsp;4+<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers3" type="radio" value="6" >

	&nbsp;&nbsp;2<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers3" type="radio" value="0" >
	&nbsp;&nbsp;0<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers3" type="radio" value="8" >
	&nbsp;&nbsp;3<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers3" type="radio" value="4" >
	&nbsp;&nbsp;1<br />

	</div>
<div id="question4" style="padding: 10px 0px;">
Q4)&nbsp;&nbsp;&nbsp;When you are not at work do you think of or action work issues?<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers4" type="radio" value="4" >
	&nbsp;&nbsp;Regularly<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers4" type="radio" value="2" >
	&nbsp;&nbsp;Sometimes<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers4" type="radio" value="5" >

	&nbsp;&nbsp;Always<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers4" type="radio" value="3" >
	&nbsp;&nbsp;Often<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers4" type="radio" value="0" >
	&nbsp;&nbsp;Never<br />
	</div>
<div id="question5" style="padding: 10px 0px;">
Q5)&nbsp;&nbsp;&nbsp;Do you spend money to enhance your business / career?<br />

	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers5" type="radio" value="4" >
	&nbsp;&nbsp;Regularly<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers5" type="radio" value="2" >
	&nbsp;&nbsp;Sometimes<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers5" type="radio" value="5" >
	&nbsp;&nbsp;Always<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers5" type="radio" value="3" >

	&nbsp;&nbsp;Often<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers5" type="radio" value="0" >
	&nbsp;&nbsp;Never<br />
	</div>
<div id="question6" style="padding: 10px 0px;">
Q6)&nbsp;&nbsp;&nbsp;How much time did you spend with family members whom you live with ( excluding your life partner or confidant) in the last two weeks?<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers6" type="radio" value="15" >
	&nbsp;&nbsp;15+ hours<br />

	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers6" type="radio" value="9" >
	&nbsp;&nbsp;5-10 hours<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers6" type="radio" value="3" >
	&nbsp;&nbsp;0-1 hour<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers6" type="radio" value="12" >
	&nbsp;&nbsp;10-15 hours<br />
	<input style="padding:0px; margin:0px;vertical-align:bottom" name="answers6" type="radio" value="6" >

	&nbsp;&nbsp;2-5 hours<br />
	</div>
<input id="nextQuestions" type="button" value="Next" name="nextQuestions" onclick="switchquestions("questionGroup1); ></div>

....truncated

also I noted IE and Mozilla generates different code.. example the last line of the above example is different on IE:

<input id="nextQuestions1" type="button" value="Next" name="nextQuestions" onclick="switchquestions("questionGroup1");" ></div>

I don't know why Mozilla is omitting the quotes Sad

[edit].... never mind I got it working... it was single quotes which was required :!:

http//melbourne.ug.php.net

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 hour 27 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5084
Points: 2662

Show / hide a DIV using javascript

Hi paCkeTroUTer,
Try using single quotes inside the onclick

onclick="switchquestions('questionGroup1');" 

If you are just going to use one next button you may want to set a global variable that stores which question set you are at. Then you wouldn't need to pass in the id just check the array against the global.

To give a variable global scope you just need to declare it outside the function.

var nextnum = 1;

function switchquestions(){ 
nextnum++;
var theid="questionGroup"+nextnum;
var thearray= new Array("questionGroup1","questionGroup2", "questionGroup3", "questionGroup4", "questionGroup5", "questionGroup6", "questionGroup7", "questionGroup8"); 
for(i=0; i<thearray.length; i++){ 
      if(thearray[i] == theid){ 
            document.getElementById(theid).style.display="block"; 
      }else{ 
            document.getElementById(thearray[i]).style.display="none"; 
      } 
     alert(theid); 
   } 
} 

I haven't tested it out but it should be fairly close Wink

Hope that helps

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 1 year 11 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Show / hide a DIV using javascript

Thanks Tony for the Help. Actually you must have not seen my [Edit ] before you posted the above reply. Thanks anyway for the directions. It works very well now. Smile :)

http//melbourne.ug.php.net

billybob
Offline
newbie
Last seen: 7 years 24 weeks ago
Joined: 2005-06-29
Posts: 1
Points: 0

Help me too please

Hi
I have several divs on a page to create a column layout with seperate content in each.
I know how to make one div show/hide but is there an easier way to do it rather than having seperate function per div?
Also I would like it to be possible to save the layout chosen afterwards (by using a cookie) which would have to be set by Javascript (as my host does not support PHP), do you know how to do this?

My site is @ [removed]
what I would like is a hide/show on each 'section' of the page and the ability to save the chosen layout.

edit: this was an old post, the content no longer applies to the new site

tamib
Offline
newbie
Last seen: 5 years 18 weeks ago
Joined: 2009-03-25
Posts: 2
Points: 0

Show / hide a DIV using javascript

Hi Tony,

I'm new at Javascript and I'm trying to make the code you wrote showstuff and hidestuff work and it appears I have something incorrect.

Here are my functions:

function showstuff(boxid){
document.getElementById(boxid).style.visibility="visible";
}

function hidestuff(boxid){
document.getElementById(boxid).style.visibility="hidden";
}

Here is the code:

Do you or your family have special ongoing needs, such as medicines or physical limitations? Yes   No

If yes, what types?

thanks

tamib
Offline
newbie
Last seen: 5 years 18 weeks ago
Joined: 2009-03-25
Posts: 2
Points: 0

hide / show

I figured it out... thanks