Learn VBA & Macros in 1 Week!

JavaScript - Show A Div And Hide Another

Full Excel VBA Course - Beginner to Expert

Show A Div And Hide Another	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

Full Excel VBA Course - Beginner to Expert

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

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>

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!

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

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?

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>

Hide/show The Following Div If Clicked?

Similar Tutorials

View Content

I know that this can be done using .hide/.show... I don't know how to say this but if you'll look at the code:
Code:

<div id="isclickable">
klasdlkasdklaklsjd
<div id="weeeee">
trolololololol
</div>
</div>
<div id="isclickable">
klasdlkasdklaklsjd
<div id="weeeee">
trolololololol
</div>
</div>

The div having an id of "weeeee" will show if id="isclickable" is clicked.. but not all divs having "weeeee" should show but instead what is inside the div "isclickable" is there a way to attain this without creating multiple scripts and ids?

Thanks>

Show/hide Error

Similar Tutorials

View Content

i've been using the show/hide function for this webpage

http://dannycremers.com/HELP.html

when you click on test 2 it works perfectly

but when you click on test 3 there's an error and i don't know how to solve it

as you can see 'test 3' pops up on the top of the list automatically.. and when i try to delete it.. the 'test 3' link that i want to keep disappears as well..

and ideas how to solve this easily?

Hide Or Show Menu, Will Pay If Necessary

Similar Tutorials

View Content

Hi I'm new to this forum, and i need help with something, i think its easy to make but...
i am making video blogging website and i need someone to make Hide or show menu, for example:
When someone click on:
Season 1 (it should show)
Episode 1
Episode 2
Episode 3... (and when someone click on episode it should show text (usually <iframe... ))

ty in advance and i can share 5$ on paypal if you make it right and easy to use, if I have it post in wrong category just transfer topic pls

Best regards

Show Div Then Hide Button?

Similar Tutorials

View Content

I want some thing that when i click a button it shows a div then hides the button. I found this:

Code:

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>

<div id="sub3">Message Box</div>

But it has two buttons that show and then hide the div, i only want one that shows the div then hides the button. Please help.

Show And Hide In Javascript

Similar Tutorials

View Content

hey i need help of all u guys.Actually the problem is that when i am loading this html page i just want the sign in page to appear and on click of cancel button i want a page to appear and on click of login button i get log in page..but the problem is that whenever i load my html page i get the sign in page and the page that is present on the cancel page..i tried showing and hiding and tried but i dnt know what more to do...please help me out..
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> </title>
    <link rel="stylesheet" type="text/css" href="styling.css"/>
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript">

        window.onload = function() { document.getElementById('first_div').style.display = 'none';}
        function toggle(link, div1id, div2id)
        {
            var div1 = document.getElementById(div1id);
            var div2 = document.getElementById(div2id);
            if (div1.style.display == 'none')
            {
                $('#third_div').hide();
                div1.style.display = 'block';
                div2.style.display = 'none';
                link.innerHTML = 'Login';
            } else {
                $('#third_div').hide();
                div1.style.display = 'none';
                div2.style.display = 'block';
                link.innerHTML = 'signin';
            }
        }
        function toggleImg(divId)
        {
           $('#first_div').hide();
            $('#second_div').hide();
            $('#third_div').show();
        }
    </script>



</head>

<body>

<div id="first_div" class="container">
    <label for="username">
        <span>Username:*</span>
        <input type="text" class="text" id="user" placeholder="Username" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
    </label>

    <label for="password">
        <span>Password:*</span>
        <input type="password" class="text" id="pass" placeholder="Password" maxlength="24"  onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
    </label>

    <label>
        <input type="checkbox" name="remember" id="remember" class="checkbox"  value="1" tabindex="3" /> Remember Me?
    </label>

    <label>
        <input type="submit" name="submit" class="button1" id="doLogin" value="Sign in" />
    </label>
</div>

<div id="second_div" class="container1">

    <label for="username">
     <span>
     Username:*</span>
        <input type="text" id="username" class="text" placeholder="Username" maxlength="24"   onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
    </label>

    <label for="password">
        <span>Password:*</span>
        <input type="password" id="password" class="text" placeholder="Password" maxlength="24"  onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
    </label>

    <label for="repass">
        <span>Re-Password:* </span><input type="password" id="repass" class="text" placeholder="Re-password" maxlength="24"   onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
    </label>

    <label for="email_id">
        <span>Email-Id:</span><input type="text" id="email_id" class="text" placeholder="Verify email-id" maxlength="24"  onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
    </label>
    <label><input type="submit" name="submit" class="button1" value="Submit" /></label>
</div>
<div id="third_div" class="image">
<img src="https://gs1.wac.edgecastcdn.net/8019B6/data.tumblr.com/tumblr_m2rdcqQLrA1qcb6kno1_500.jpg" />
</div>
<div class="header">
    <button class="button_cancel" onclick="toggleImg('third_div');">Cancel</button>
    <button class="button_sign"  id="sign" onclick="toggle(this,'first_div', 'second_div'); return false;">Sign_in</button>
</div>
</body>
</html>

I wanted it according to this website https://www.tumblr.com

Javascript (show/hide) Please Help!

Similar Tutorials

View Content

Hey,

I wonder how I'm going to do when it comes to the function of "show/hide" with JavaScript. My question is:

I'm working on a web form.
The following question is on the form: "Was ITK used?", and you're supposed to be able to pick "Yes" or "No" (by radio buttons), and this I've already fixed with no issues.
But what I CAN'T do, for some strange reason, is that when you've clicked "Yes" on that question, it should appear another question: "Does customer have ITK in their network?", and when that comes up you're supposed to choose between "Yes"/"No" with radio buttons there as well.
BUT if you click "No" on the first question (Was ITK used?), the other question (Does customer have ITK in their network?) shouldn't appear...

Do you understand what I mean?

How do I do this?

Thanks in advance!

Show Hide Text Box

Similar Tutorials

View Content

Hi

Im looking for a way to show hide text box on select option change

PHP Code:

<select name="letter_type" id="lt">
                    <option value="Registered">Registered</option>
                    <option selected="selected" value="Unregistered">Unregistered</option></select>
                    <input name="textfield7" id="regty" type="text" accesskey="1" tabindex="1" size="20" />

i wana show that text box if user select "Registered" from select option.

any help would be great

sorry for language errors.

Thanks

Show/hide Comments Box

Similar Tutorials

View Content

Good afternoon all,

I need a bit fo help with unhiding a selection. I have a 10 checkboxes on a form. When the user clicks one of the boxes the rest are hidden and a comments box shows. That works great, the part I can't figure out is how to make all the boxes show again if the user unchecks the checkbox and make the comments box hide again.

Here is the code I am using to do the hide:

Code:

function HideComments() 
{
  var a1 = document.getElementById("crmForm_answer1").checked; 
  var a8 = document.getElementById("crmForm_answer8").checked;
  var a2 = document.getElementById("crmForm_answer2").checked; 
  var a3 = document.getElementById("crmForm_answer3").checked; 
  var a4 = document.getElementById("crmForm_answer4").checked; 
  var a5 = document.getElementById("crmForm_answer5").checked; 
  var a6 = document.getElementById("crmForm_answer6").checked; 
  var a7 = document.getElementById("crmForm_answer7").checked;
  var a9 = document.getElementById("crmForm_answer9").checked;
  var a10 = document.getElementById("crmForm_answer10").checked;
 
  if(a1==true)
  {
    document.getElementById("crmForm_answer1_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }
  else
    document.getElementById("crmForm_answer1_value").parentNode.parentNode.style.display = 'none';

  if(a8==true)
  {
    document.getElementById("crmForm_answer8_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }
  else
    document.getElementById("crmForm_answer8_value").parentNode.parentNode.style.display = 'none';

  if(a2==true)
  {
    document.getElementById("crmForm_answer2_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }

  else
    document.getElementById("crmForm_answer2_value").parentNode.parentNode.style.display = 'none';

  if(a3==true)
  {
    document.getElementById("crmForm_answer3_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }

  else
    document.getElementById("crmForm_answer3_value").parentNode.parentNode.style.display = 'none';

  if(a4==true)
  {
    document.getElementById("crmForm_answer4_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }

  else
    document.getElementById("crmForm_answer4_value").parentNode.parentNode.style.display = 'none';

  if(a5==true)
  {
    document.getElementById("crmForm_answer5_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';    
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }

  else
    document.getElementById("crmForm_answer5_value").parentNode.parentNode.style.display = 'none';

  if(a6==true)
  {
    document.getElementById("crmForm_answer6_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }

  else
    document.getElementById("crmForm_answer6_value").parentNode.parentNode.style.display = 'none';

  if(a7==true)
  {
    document.getElementById("crmForm_answer7_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }

  else
    document.getElementById("crmForm_answer7_value").parentNode.parentNode.style.display = 'none';

if(a9==true)
  {
    document.getElementById("crmForm_answer9_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }

  else
    document.getElementById("crmForm_answer9_value").parentNode.parentNode.style.display = 'none';

if(a10==true)
  {
    document.getElementById("crmForm_answer10_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
  }

  else
    document.getElementById("crmForm_answer10_value").parentNode.parentNode.style.display = 'none';
}

Thanks in advance for the help,
Sam.

Show / Hide Issue

Similar Tutorials

View Content

Hi Chaps,
I have a table of data, grouped by Month, Year and then ProjectID:

- Month, Year
- ProjectID
- Job1
- Job2

The Month, Year row controls a collapsable row (ProjectID) and in turn, the ProjectID row controls the Job row(s).

The problem I'm having is that if the Job row(s) is open, then 'close' the Month, Year row, the Job row(s) stay visible. How can I control all 'child' rows from the 'parent' Month, Year control?

PHP Code:
      <?php
      $previousProject = '';
      $previousMonth ='';
      if ($totalRows_rsInvPending > 0) {
      // Show if recordset not empty
      do {
      if ($previousProject != $row_rsInvPending['projid']) {
      if ($previousMonth != $row_rsInvPending['themonth']) {
      // for every Project, show the Project ID
      ?>
      <tr>
    <td colspan="18" class="highlight"><span class="blueBold"><a href="#" onclick="toggle2('month1<?php echo $row_rsInvPending['themonth'] ?>', this)"><img src="../../Images/plus.gif" border="0" /></a> <?php echo $row_rsInvPending['theyear'] ?> - </a></span><span class="blueNOTBold"><em><?php echo $row_rsInvPending['themonth'] ?></em></span></td>
    </tr>
    <?php $previousMonth = $row_rsInvPending['themonth']; } ?>
      <tr class="month1<?php echo $row_rsInvPending['themonth'] ?>" style="display:none">
    <td colspan="20" class="highlight1"><span class="blueBold"><a href="#" onclick="toggle2('proj1<?php echo $row_rsInvPending['projid'] ?>', this)"><img src="../../Images/plus.gif" border="0" /></a> <?php echo $row_rsInvPending['projid'] ?> - </a></span><span class="blueNOTBold"><em><?php echo $row_rsInvPending['projtitle'] ?></em></span></td>
    </tr>
    <?php $previousProject = $row_rsInvPending['projid']; } ?>
    <tr class="proj1<?php echo $row_rsInvPending['projid'] ?>" style="display:none">
        <td><?php echo $row_rsInvPending['jobname']; ?></td>

Code:

function toggle2(id, obj) {
   var matchingElements = new Array();
   
   if (document.getElementsByClassName) {
      matchingElements = document.getElementsByClassName(id);
   } else {
      var elements = document.getElementsByTagName("tr");
      for (i = 0; i < elements.length; i++) {
         if (elements[i].className == id) {
            matchingElements[matchingElements.length] = elements[i];
         }
      }
   }
   
    for (i = 0; i < matchingElements.length; i++) {
      toggleDisplay(matchingElements[i], obj);
   }
}

function toggleDisplay(element, obj) {
   if (element.style.display == "none") {
      element.style.display = "block";
      obj.innerHTML = "<img src=\"../../Images/minus.gif\" border=\"0\">";
   } else {
      element.style.display = "none";
      obj.innerHTML = "<img src=\"../../Images/plus.gif\" border=\"0\">";
   }
}

Show Hide Div With Drop Down

Similar Tutorials

View Content

I have a previous post where I asked about showing or hiding a div based on user answers in a form, and I got a great response that let me do that with radio buttons ... but can I do that with drop down lists too? Is there an equivalent to on click for drop down list? Thanks for all the help.

Beginner Needs Help With Hide/show

Similar Tutorials

View Content

I am quite confident with html but don't know javascript.

I have some script to hide/unhide a div when clicking a link but it isn't quite what I want. Any help to modify it would be great.

Code:

<script type="text/javascript">
 function unhide(divID) {
 var item = document.getElementById(divID);
 if (item) {
 item.className=(item.className=='hidden')?'unhidden':'hidden';
 }
 }
 </script>

I understand that this checks if a div is hidden or not and changes it.

What I actually want is:-

I have a string called $hiddendiv

I want the function to
hide the div $hiddendiv
let $hiddendiv = (DivID)
unhide(DivID)

The code for this would be great.

Thanks in advance.

Ady

Help With Show/hide Isue

Similar Tutorials

View Content

hi all,
i'm new here. i'm designing websites.
here is address where i need little help:
http://raftingtara.com/sajt5/
i want to make action: when top sub-menu disappear, that gray background disappear too!!?? anyone can help me with that? i can send all source code if you need? THANKS