Learn VBA & Macros in 1 Week!

JavaScript - Show And Hide Form Fields

Full Excel VBA Course - Beginner to Expert

Show And Hide Form Fields	View Content

I have a drop down selection where it shows and hides form inputs depending on selection. When the page loads it shows the drop down selections with no form inputs. After user selects drop down it shows the form fields. It works great but I want it to show the same form fields after the user hits the submit button which submits the page to itself. It currenlty goes back to the default selection list and doesnt show any of the form fields. Basically it hides all the form fields after the user hits submit button. How do I make it keep the last shown form fields after the user hits the submit button?

test3.html looks like this:
Code:

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide</title>
<script type="text/javascript">
function display(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
}
</script>
</head>

<body>
<form name="tester" action="test3.html" method="get">
<table width="340" cellspacing="0" cellpadding="2">
<thead>
<tr>
<td class="title">Type:</td>
<td class="field">

<select name="type" onchange="display(this,'text','image');">
<option>Please select:</option>
<option value="image">Image</option>
<option value="text">Texts</option>
<option value="invisible">Invisible</option>
</select>
</td>
</tr>
</thead>
<tfoot>
<tr>
<td class="align-center" colspan="2"><input type="submit" name="submit" value="Update" /> <input type="reset" value="Reset" /></td>
</tr>
</tfoot>
<tbody id="text" style="display: none;">
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody id="image" style="display: none;">
<tr>
<td class="title">Image:</td>
<td class="field"><input type="file" name="image" size="10" /></td>
</tr>
<tr>
<td class="title">X Coordinates:</td>
<td class="field"><input type="text" name="x_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Y Coordinates:</td>
<td class="field"><input type="text" name="y_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="title">Display:</td>
<td class="field">
<select name="display">
<option value="visitors">Visitors</option>
<option value="hits">Hits</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>

</body>
</html>

Full Excel VBA Course - Beginner to Expert

Need Help Please! (show/hide) Form Fields According To Dropdown Box Selection??

Similar Tutorials

View Content

The Script works in Firefox, BUT not in Internet Explorer. What am I missing? I need Drop Down menu Boxes to appear when User clicks on a certian Menu option. The way it appears now on the website is all the boxes appear. They should stay "hidden" until a User clicks on the drop down menu selection. Thanks!

<head>
<script type="text/javascript" language="javascript">

function showInfo()
{
var typeOne = document.getElementById('bmp');
var typeTwo = document.getElementById('junction');
var typeThree = document.getElementById('mile');
if(document.basicform01.Location_Type.value == "BMP to EMP")
{
typeOne.style.display="inline";
typeTwo.style.display="none";
typeThree.style.display="none";
}
else if(document.basicform01.Location_Type.value == "Junction to Junction")
{
typeOne.style.display="none";
typeTwo.style.display="inline";
typeThree.style.display="none";
}
else if(document.basicform01.Location_Type.value == "Milepost")
{
typeOne.style.display="none";
typeTwo.style.display="none";
typeThree.style.display="inline";
}
else
{
typeOne.style.display="none";
typeTwo.style.display="none";
typeThree.style.display="none";
}
}

</script>

<style>*[style] {outline:none}</style>

</head>

<body>
<fieldset>
<dl>
<dt><label for="Location_Type">Location Type *</label></dt>
<dd><select class="inputselect" name="Location_Type" id="Location_Type" onchange="showInfo()">
<option value="" selected="selected">Select One...</option>
<option value="BMP to EMP">BMP to EMP</option>
<option value="Junction to Junction">Junction to Junction</option>
<option value="Milepost">Milepost</option>
</select></dd>
<div id="bmp" style="display:none;">
<dt><label for="bmpDetails">BMP</label></dt>
<dd><input class="inputtext" type="text" name="bmpDetails" id="bmpDetails" /></dd>
<dt><label for="empDetails">EMP</label></dt>
<dd><input class="inputtext" type="text" name="empDetails" id="empDetails" /></dd>
</div>
<div id="junction" style="display:none;">
<dt><label for="fromJunction">From Junction:</label></dt>
<dd><input class="inputtext" type="text" name="fromJunction" id="fromJunction" /></dd>
<dt><label for="toJunction">To Junction:</label></dt>
<dd><input class="inputtext" type="text" name="toJunction" id="toJunction" /></dd>
</div>
<div id="mile" style="display:none;">
<dt><label for="milepostNum">Milepost</label></dt>
<dd><input class="inputtext" type="text" name="milepostNum" id="milepostNum" /></dd>
</div>
<p>
</dl>
<p>
</fieldset>

</body>

Show/hide Form Fields Based On Checkbox State

Similar Tutorials

View Content

Hey all, I'm trying to get the two followup questions underneath the checkbox to show up only if someone places a check there, but for some reason the way I've got it set up now it's simply hiding the area I want to show up altogether, and the checkbox has no effect on it.

Rather than waste tons of space pasting it here, here's the pastebin:

http://pastebin.ca/1822165
alternatively here is the live version:

http://soniajacobwedding.com/site/rsvptest.html

I'd prefer to have the form collapse when the additional questions are hidden, though if i can get this working at all I'd be pretty happy.

Modify The Page (show/hide) Form Fields According To Dropdown Box Selection??

Similar Tutorials

View Content

What I want to do, is that, when the user select one option out of many from the dropdown box some new fields appears.

I was so close to make it , using this example:
Code:

<script type="text/javascript">
function showInfo()
{
var elem = document.getElementById('verify');
if(document.forms[0].menu.value == "verify"){
elem.style.display="inline";}
else{
elem.style.display="none";}
}
</script>
</head>

<body>
<form action="#" method="post">
<select name="menu" onchange="showInfo()">
<option value="none">Select an option</option>
<option value="email">Email</option>
<option value="verify">Verify</option>
</select>

<div id="verify" style="display:none;">
<input type="text" value="Username" >
<input type="password" value="password" >
</div>
</form>

But what I do want, is that two differen things appear on the page and in the different location of the page. And this script does not read the second <div>. So the result is, that the only first <div> appears.

Here are some images of what I want to do.
Befo
http://img82.imageshack.us/img82/7093/beforens9.jpg

After
http://img246.imageshack.us/img246/2759/afterzh2.jpg (what has to be changed is on the red circules).

So can someone help me with this script?? Please! I am pritty noob to the javascript.

Form With Radio Buttons To Hide Fields

Similar Tutorials

View Content

Hi all,

I have a form which has two radio buttons at the beginning which show and hide fields depending on what button is clicked:

I want to adapt this js and html code so that when the page loads it checks whether one of the two radio buttons is clicked and depending on that it displays/hides the divs which are declared in the current function, at the moment it performs this when the user clicks one of the radio buttons but I want to perform it when the page is loaded and also when the user first enters the page I want the yes radio button to be selected and obviously hiding/showing the appropriate fields.

Thanks for the help!

Code:

            function checkjob(jobvalue){

                    if(jobvalue!="yes") {
                 
document.getElementById("nombre").style.display = "block";
                        document.getElementById("apellido").style.display = "block";
                        document.getElementById("empresa").style.display = "none";
                        document.getElementById("contacto").style.display = "none";

                    }else{
                        document.getElementById("nombre").style.display = "none";
                        document.getElementById("apellido").style.display = "none";
                        document.getElementById("empresa").style.display = "block";
                        document.getElementById("contacto").style.display = "block";

                    }

                }

HTML

<div class="form_element">

      		<label >></label>

            <div class="radio_element">

					<input type="radio" value="yes" class="radio" id="yes" name="job" onchange="checkjob(this.value)" >

                    <span >yes</span>

             </div>

            <div class="radio_element">

					<input type="radio" value="no" class="radio" id="no" name="job" onchange="checkjob(this.value)">

                    <span >no</span>

            </div>

	</div>

Hide Show Div For Submit Form

Similar Tutorials

View Content

Hi,
I have any form for tell friends ! How To show Div After Click (tell friend) link and hide div after onsubmit form ? ( using Jquery or java script)
Example :
TELL FRIENDS CLICK LINK
<div id="formhide"></div> (default is hidden).
After Click Show Loading Message and show form for send data to any email . so if Form is valid Show loading message and message Success ! so hide dive ( to default)

DMEO: http://www.makaan.com/ ( please search any . . . ) after search click in send email & sms button . you see . . . .

Thanks

Java Script Show/hide Retaining On Form Validation

Similar Tutorials

View Content

Helloo

Im new to javascript.. I need help badly... here are two tabless.
1. information of a friend.
2nd table i get when i click da image (ADD ANOTHER FRIEND)

but, on validation and submission.. the second table is not showing upp...

When i once click ADD FRIEND.. i want the table to show up on reload and validation....

Thanks

Here is my code

<?
if (isset($_POST['submit'])) {
if (!$frndname) {
$frndname_error = 1;
$problems=1;
}
if (!$frndcity) {
$frndcity_error = 1;
$problems=1;
}
///doo db stuff insertion

}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function showTable() {
var table = document.getElementById("myTable");
if (table)
table.style.display = "block";
var div = document.getElementById("frndimg");
if(div)
div.style.display = "none";

}
</script>
</head>

<body>
<form action="" method="POST" name="form1">
<?php if(!isset($_POST['submit']) or $problems) {

?>
<table>

<tr> <td colspan="2"> <table width="21%">
<tr> <td width="3%" align="left" valign="top"> </td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr>
<tr>
<td width="3%" align="left" valign="top"> </td>
<td width="16%"><? if ($frndname_error) {

echo ("<font color='#FF0000'>Name:</font>");

} else {

echo ("Name:");

}?> <b><font color="#FF0000">*</font></b><br>
<input type="text" name="frndname" id ="frndname" value="<?php echo $frndname; ?>" maxlength=45 size=25></td>
<td width="81%" colspan="3">City:
<b><font color="#FF0000">*</font></b><br><input type="text" id="frndcity" name="frndcity" value="<?php echo $frndcity; ?>" maxlength=45 size=25> </td>
</tr>

</table></td></tr>
<tr> <td width="4%" align="left" valign="top"> </td> <td > <div style="float:left;cursorointer;">
<img src="images/referral_add_friend.jpg" width="190" height="28" onClick="showTable()" title="Click to add another friend" id="frndimg">
</div> </td></tr>

<tr> <td colspan="2">
<table width="100%" id="myTable" style="display:none;">
<tr> <td width="4%" align="left" valign="top"> </td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr>
<tr>
<td width="4%" align="left" valign="top"> </td>
<td width="53%"> NAme: <b><font color="#FF0000">*</font></b><br>
<input type="text" name="frnd1name" id ="frnd1name" value="<?php echo $frnd1name; ?>" maxlength=45 size=25></td>
<td width="47%" colspan="3">City:
<b></b><br><input type="text" id="frnd1city" name="frnd1city" value="<?php echo $frnd1city; ?>" maxlength=45 size=25> </td>
</tr>
<tr>
<td width="4%" align="left" valign="top"> </td>
<td>Phone Number: <b></b><br>
<input type="text" name="frnd1phone" id ="frnd1phone" value="<?php echo $frnd1phone; ?>" maxlength=45 size=25></td>
<td colspan="3">Email: <br><input type="text" id="frnd1email" name="frnd1email" value="<?php echo $frnd1email; ?>" maxlength=45 size=25> </td>
</tr>
<tr><td>  </td></tr>
</table>
</td></tr>

<tr> <td><input type="image" src="images/submit_referral.jpg" height="30" width="173" border="0" alt="Submit Form" value="submit"></td></tr>
<tr><td> </td><td align="center" class="referralheading"> Fields Marked With * Are Required</td></tr>
</table>
<? } ?>
</form>
</body>
</html>

How To Hide/unhide Fields And Some Among Other Things

Similar Tutorials

View Content

I'd like to know if there are ways to hide/unhide fields like radio options, text fields & others by using JavaScript.

If so how do I do it? I do know I will have to check the form every time. Is there a need to refresh the form? Will the refresh clear all the selections?

Things I'd like to hide:
1. Upon the selection of a radio option, another radio option will appear.
2. Upon the selection of a radio option, a text field will appear.

Sorry for asking so many questions. But I just got to know that I need to use JavaScript in my application and I have no idea how and where to start, just bumping around, & hoping that God will drop some hint.

Need Some Help With Show/hide

Similar Tutorials

View Content

Hello,

I have the folowing code but it seems to be broken between "SM Decision Support" and "Incident and Request Management".

Does anyone know how I resolve ?.

The idea is when somebody opens the page all the sections are hidden/uncollapsed and the user can collapse individually each section with a click or by hitting the expand/collapse all link.

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

Have placed code in attachment as too long for this section

Hide/show Div

Similar Tutorials

View Content

Im pretty new to JS so Im sure this is not the best way to go about this but it'll do for now, any suggestions welcome

I have a script to show and hide various divs based on a function & var.

The problem im having is that when ANY of the variables ('hate', 'ok' and 'love') are passed all 3 different feedback forms ('FeedbackHate', 'FeedbackOk' and 'FeedbackLove') appear, not just the one I want.

here is the JS:

Code:

function sitesurveyswitch(emotion) {

	var e = emotion;

	document.getElementById('site_survey_hate').style.backgroundPosition = '0px 0px';
	document.getElementById('site_survey_ok').style.backgroundPosition = '0px 0px';
	document.getElementById('site_survey_love').style.backgroundPosition = '0px 0px';
	document.getElementById('FeedbackHate').style.display = 'none';
	document.getElementById('FeedbackOk').style.display = 'none';
	document.getElementById('FeedbackLove').style.display = 'none';
		
	if (e == 'hate')
		document.getElementById('site_survey_hate').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackHate').style.display = 'block';
	if (e == 'ok')
		document.getElementById('site_survey_ok').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackOk').style.display = 'block';
	if (e == 'love')
		document.getElementById('site_survey_love').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackLove').style.display = 'block';
}

and here is the code related to this function:

Code:

<div id="siteSurveyBox">
				<span id="site_survey_hate" onclick="sitesurveyswitch('hate');return false;"></span>
				<span id="site_survey_ok" onclick="sitesurveyswitch('ok');return false;"></span>
				<span id="site_survey_love" onclick="sitesurveyswitch('love');return false;"></span>
			</div>
			
			<div id="FeedbackHate" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>
			
			<div id="FeedbackOk" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>
			
			<div id="FeedbackLove" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>

Show/hide Help Please

Similar Tutorials

View Content

I don't know a lot about Javascript... still learning..
I am trying to create a show/hide effect that displays an image based on the users text input. I have coded this before for a list/menu and it works fine. With this particular project there are too many selections to choose from to put in a list/menu. I am trying to use if and else if statements to make this work. With the code the way it is only the first function on the list works. I tried just using repeating if statements and only the last function on the list works. Here is the code:
Code:

<script type="text/javascript" >

function showSample() {
	
  if (document.getElementById('input').value='SW001') {
	document.getElementById('SW001').style.display='block';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  else if (document.getElementById('input').value='SW002') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='block';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  else if (document.getElementById('input').value='SW003') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='block';
    document.getElementById('SW004').style.display='none';

  }
    else if (document.getElementById('input').value='SW004') {
	document.getElementById('SW001').style.display='block';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  
    else if (document.getElementById('input').value='SW005') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='block';

  }

}

</script>


<style type="text/css">
<!--
#main {
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	height: 125px;
}
#imageArea {
	float: right;
	width: 200px;
}
#formArea {
	float: left;
	width: 200px;
	height: 125px;
}
.image {
	height: 125px;
	width: 125px;
	margin-right: auto;
	margin-left: auto;
	display: none;
}
#SW001 {
	background: url(../_images/Colorfil/SW0001.jpg) no-repeat center center;
}
#SW002 {
	background: url(../_images/Colorfil/SW0002.jpg) no-repeat center center;
}
#SW003 {
	background: url(../_images/Colorfil/SW0003.jpg) no-repeat center center;
}
#SW004 {
	background: url(../_images/Colorfil/SW0004.jpg) no-repeat center center;
}
#SW005 {
	background: url(../_images/Colorfil/SW0005.jpg) no-repeat center center;
}
-->
</style>
</head>

<body>
<div id="main">
  <div id="imageArea">
    <div class="image" id="SW001"></div>
    <div class="image" id="SW002"></div>
    <div class="image" id="SW003"></div>
    <div class="image" id="SW004"></div>
    <div class="image" id="SW005"></div>
  </div>
  
  <div id="formArea">
    <form action="" method="get">
      
      
      <input  type='text' name="input" id='input' />
      <input name="" type="button" onclick="showSample(this.selectedIndex)"/>
      
      
    </form>
  </div>
</div>
</body>
</html>

Any help would be greatly appreciated!

Hide And Show Div

Similar Tutorials

View Content

Hi guys, im new to forums and need some help with my website.
I have embed a flash player known as: JW player into my website and put it into a div.
Now my problem is I want javascript to hide the div containing the flash player for atleast a few seconds to display a loading image.gif.
How would I set this up?
Im not to familiar about using javascript so im not sure if its even possible.
Anways thx for any help ore suggestions related to this subject.

Show A Div And Hide Another

Similar Tutorials

View Content

Hi all,

Check this code:
PHP Code:
<a>text</a>
<div id="pkg">pkg</div>
<div id="table_pkg">table_pkg</div>

I'd like to show table_pkg and hide pkg when I click on <a>text</a>.
How can I do?

Thank you very much

Help With Hide/show Div

Similar Tutorials

View Content

this is what im trying to do: http://www.linkstraffic.net/programm...d/movebox.html

using this code: http://www.linkstraffic.net/programm...nd/movediv.php

heres my code. can someone fix it?

html:

[CODE]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chris MacDonald - Javascript Assignment 2</title>

<link href="styles/styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="java.js"></script>

<div id="header">
<div id="logo"><img src="images/beat.png" /></div>
</div>

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="http://beatthreads.bigcartel.com/category/tees">Shirts</a></li>
<li><a href="#">About Us</a></li>
</ul>

</head>

<body>

<div id="content">

<a href="#" onclick="interv=setInterval('ShowBox()',3);return false;">Upcoming Designs</a>

<div id="coverlogin">

<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique cursus dui, a venenatis diam consectetur fermentum. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent aliquam ornare nunc non semper. Morbi blandit lectus non elit ultricies ultricies. Fusce mattis purus et eros ultrices et facilisis nulla consequat. Vestibulum tellus libero, tempor vel tincidunt nec, consectetur non ante. Donec sed malesuada felis. Mauris lorem lorem, ornare a rutrum quis, rutrum in mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<br/>

<p align="left"><a href="#" onClick="interv=setInterval('HideBox()',3);return false;">X</a></p>
</div>

</div>
</div>

<div id="footer">
<div id="footertext">Beat Threads - 2010</div>
</div>

</body>
</html>
[CODE]

javascript:

// JavaScript Document

var hh=0;
var interv;

//we show the box by setting the visibility of the element and incrementing the height smoothly
function ShowBox()
{

//Depending on the amount of text, set the maximum height here in pixels
if(hh==40)
{
clearInterval(interv);
return;
}

obj = document.getElementById("coverlogin");
obj.style.visibility = 'visible';
hh+=2;
obj.style.height = hh + 'px';
}

function HideBox()
{
obj = document.getElementById("coverlogin");

if(hh==2)
{
obj.style.visibility = 'hidden';
obj.style.height = '0.1em';
clearInterval(interv);
return;
}
hh-=2;
obj.style.height = hh + 'px';
}

[CODE]

Can someone fix this for me?

Show/hide Div Tag

Similar Tutorials

View Content

ok trying to get a Div tag to show if something is True and hide if something is False

JS
Code:

unction eToggle(anctag,darg) 
{
 var ele = document.getElementById('Module1');
   var ele = document.getElementById('Module2');
   var ele = document.getElementById('Module3');
   var ele = document.getElementById('Module4');

  
  if("module1" + "module2" + "module3" + "module4" <40)
  {
    div.id.Failed = "block";
	div.Failed = "Failed";
  }
  else 
  {
	div.style.Passed = "block";
	div.Passed = "show";
  }
}

HTML
Code:

<div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b>
<br  />
</div>

<div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div>

Hide/show Div

Similar Tutorials

View Content

Hello, I'm trying to have a div be hidden on loading the page but when you click a link it will show the div... here's code I have but it doesn't show when you click the link...

<script type="text/javascript">
function show(){
document.getElementById(test).style.display="block";
}

</script>

<div id="test" style="display:none;">
<p>Some text</p>
</div>

<a href="#" onclick="show(); return false;">Show</a>

Div Show/hide All

Similar Tutorials

View Content

Code:

<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
var noticecontent = document.getElementsByTagName("div");
for(var x=1; x < noticecontent.length; x++) {
name = noticecontent[x].getAttribute("name");
if (name == 'noticecontent') {
if (noticecontent[x].id == thechosenone) {
noticecontent[x].style.display = 'block';
}
else {
noticecontent[x].style.display = 'none';
}
}
}
}
</script>

</head>
<body>
<center>
<div id="parentdiv">
<div id="expandall">OPEN/CLOSE ALL</div>
<div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
<div id="noticecontent1" name="noticecontent"  class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
<div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
<div id="noticecontent2" name="noticecontent"  class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
<div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
<div id="noticecontent3" name="noticecontent"  class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
</div>
</center>
</body>
</html>

can anyone help on "OPEN/CLOSE ALL" to show or hide all .noticecontent divs

Adjustment To My Show/hide

Similar Tutorials

View Content

Got a quick question,

I need to adjust the below code, so that when a question is open and you click on different question it automatically hides the question you opened first. How would I do that?

Code:

<!doctype html>
<html>
<head>
<title>TEST TEMPLATE</title>

<script type="text/javascript">
      function showHide(id) {
        var div = document.getElementById(id);
        div.style.display = ( div.style.display == "none") ? "block" : "none";
      }
</script>
</head>
<body>

<!------ QUESTIONS ------>
<p>Change lines <li> to divs or whatever</p>
    <li onclick="showHide('FAQ1')">FAQ one</li>
    <li onclick="showHide('FAQ2')">FAQ two</li>
    <li onclick="showHide('FAQ3')">FAQ three</li>

<!------ ANSWERS ------>
		<div id="FAQ1" style="display:none;"><p>Ans one</p></div>
		<div id="FAQ2" style="display:none;"><p>Ans two</p></div>
		<div id="FAQ3" style="display:none;"><p>Ans three etc etc.</p></div>

</body>
</html>

Thanks,
Jon

Animate Show/hide Div

Similar Tutorials

View Content

hi, here is my Javascript to show and hide my comments div:

Code:

<script language=javascript type='text/javascript'>
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('comments').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}

function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('comments').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}

I would now like to animate the div fading or moving down

can someone please help?

thanks

Show/hide Divisions

Similar Tutorials

View Content

Here is my code to show and hide two division via two links ...
Nothing is happening......Can you plz suggest me, where I am wrong ?

<html>
<head>

<script language="javascript" type="text/javascript">

function toggle(show, hide)
{

document.getElementByid(show).style.display = "block";
document.getElementByid(hide).style.display = "none";

}

</script>

</head>

<body>

<div>

<a href="javascript:void()" onclick="toggle('first','second');" > First </a>

<br/>

<a href="javascript:void()" onclick="toggle('second','first');"> Second</a>

<div id="first" style="display:none">
First division</div>

<div id="second" style="display:none">
this is second division</div>

</div>

</body>
</html>

Hide A Div And Show Another Onclick

Similar Tutorials

View Content

Alright, me having a very basic knowledge of js I'm looking for some help with(what I think should be) a simple hide/show of a set of divs. I've broken down the ccs/html I'm looking at on a test page here - http://www.grinnbarrett.net/test.html

The js I have in the page had been what I tried to modify from a simple hide/show, but it's not doing what I want it to do (obviously). The goal is when you click on link 3, I want white3 to hide and all the other white divs to show, when you click on link 3, white 2 will hide and the other white divs will show, and so on. So basically it's revealing what div you click to. A lot of what I've found have been just toggles, but I'm not very confident in my ability to adjust code.

Any and all help would be appreciated.