|
JavaScript - Show / Hide Textbox
Hi,
I am using a show / hide radiobuttons on my website but by default the YES box is shown, I need to swap this if there is content in my textarea name="Owner" here is my code: Code: <p>
<label>Owner</label>
<label>
<input type="radio" name="group_name" value="Yes" id="group_name_0" />
Yes</label>
<label>
<input type="radio" name="group_name" value="No" id="group_name_1" />
No</label>
<br />
<div id="yes_box">
<input class="text-input small-input" type="text" id="small-input" name="Owner" value="Yes" />
</div>
<div id="no_box">
<p>
<label>Landlords address</label>
<textarea class="text-input small-input" id="small-input" name="Owner"><?php echo $row5['Owner']; ?></textarea>
</p>
</div>
</p>
<script>
$(document).ready(function(){
$("input[name$='group_name']").click(function(){
var radio_value = $(this).val();
if(radio_value=='Yes') {
$("#yes_box").show("slow");
$("#no_box").hide("fast");
}
else if(radio_value=='No') {
$("#no_box").show("slow");
$("#yes_box").hide("fast");
}
});
$("#yes_box").show();
$("#no_box").hide();
});
</script>
Similar TutorialsHello, 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 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. 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> 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 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> 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 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? 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>
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! Hi, I'll explain my situation: I'm completely new to javascript so what i want to do is make a script that shows a specific div when the visitor is at the homepage but hide it when hes in another page of my website. i've read some people trying to explain it to someone else but it seems that i need to learn many aspects of the javascript language to edit it to my needs. I'm a med student and im really tight in my schedule and have almost no extra time to sit and read about javascript just so i can do this one specific thing. Would you please help me out? I've been trying to figure this out on my own for the past 3 days with no success. I will greatly appreciate it if someone helps me. PLEASE... Let me start by saying I'm a noob to JavaScript. What I'm trying to do for my website is have a select menu that shows the number of div's that's selected. I found a JS that I could do that with, but it only toggles, not change specifically what's selected. So if you click the wrong one, it doesn't work right. Here's what I got: Code: <body>
<script type="text/javascript">
function toggle_visibility(){
for(var i = 0,len = arguments.length;i < len; i++){
var e = document.getElementById(arguments[i]).style,d = e.display;
e.display = (d == "block") ? "none" : "block";
}
}
</script>
<select name="select" id="select">
<option>0</option>
<option onclick="toggle_visibility('1');" >1</option>
<option onclick="toggle_visibility('1','2');">2</option>
<option onclick="toggle_visibility('1','2','3');">3</option>
<option onclick="toggle_visibility('1','2','3','4');">4</option>
</select><br>
<div id="1" style="display: none;">Test1</div>
<div id="2" style="display: none;">Test2</div>
<div id="3" style="display: none;">Test3</div>
<div id="4" style="display: none;">Test4</div>
</body>
Any help would be appreciated, cause I'm lost. 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. 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\">";
}
}
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 Hi there, I have a site which consists of the html page and css page. I have been trying to get the image at the top of the page to dissapear when the user clicks on the footer. Any suggestions on how I can do this? Below is my code, Thanks in advance. HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { background-color: #CC6; } </style></head> <body> <div id="header-wrap"> <div id="header-container"> <div id="header"> <h1>JavaScript</h1> </div> </div> </div> <div id="ie6-container-wrap"> <div id="container"> <DIV STYLE="font-size:12pt" onmouseover="this.style.fontSize='16pt'" onmouseout="this.style.fontSize='12pt'"> <div id="content"> <h1>Mainframe</h1> <p>Enter the content of your website within this area.</p> </div></DIV> </div> </div> <div id="footer-wrap"> <div id="footer-container"> <div id="footer"> <center> <body onLoad="dateandtime()"> <script> var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday") var montharray=new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December") function getthedate(){ var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym<10) daym="0"+daym var hours=mydate.getHours() var minutes=mydate.getMinutes() var seconds=mydate.getSeconds() var dn="AM" if (hours>=12) dn="PM" if (hours>12){ hours=hours-12 } if (hours==0) hours=12 if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds var cdate="<small><font color='#87ac6d' font size='2.5' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn +"</b></font></small>" if (document.all) document.all.clock.innerHTML=cdate else document.write(cdate) } if (!document.all) getthedate() function dateandtime(){ if (document.all) setInterval("getthedate()",1000) } </script> <span id="clock"></span> </center> </div> </div> </div> </body> </html> CSS: body { font: 62.5% Arial, Helvetica, sans-serif; color: #597347; margin: 0; padding: 0; background: #beffbf; } h1, h2 { color: #87ac6d; font-family: Tahoma, Arial, Geneva, sans-serif; margin: 20px 0 10px; } h1 { font-size: 2.5em; } p { margin: 10px 0; padding: 0; } blockquote { font-style: italic; } #header-wrap { position: fixed; top: 0; left: 0; width: 100%; } #header-container { height: 90px; background: url(../images/banner.jpg) repeat-x left bottom; } #header { width: 940px; margin: 0 auto; position: relative; } #header h1 { color: #beffbf; text-align: right; width: 290px; margin: 0; position: absolute; left: 476px; top: 32px; } #header h1 em{ color: #90b874; font-size: small; display: block; } #header ul { margin: 0; padding: 0; list-style: none; position: absolute; top: 35px; right: 0; } #header ul li { float: left; margin-right: 5px; } #header ul li a{ color: #90b874; font-weight: bold; font-size: 1.4em; margin-right: 5px; text-decoration: none; } #header ul li a:hover { color: #beffbf; } #container { width: 940px; margin: 0 auto; font-size: 1.4em; overflow: auto; padding: 90px 0 40px; } #content { float: left; width: 100%; } #sidebar { float: right; width: 275px; margin-top: 10px; } #footer-wrap { position: fixed; bottom: 0; left: 0; width: 100%; } #footer-container { height: 40px; background-color: #000; } #footer { width: 940px; margin: 0 auto; position: relative; } How can i make a function that a div container is hiding when i move with my mose over and it should be showed when i move with my mouse out. i tried it like that: <script type = text/javascript> function show() { document.getElementById("sidebar").style.visibility = "hidden"; } function hide() { document.getElementById("sidebar").style.visbility = "visible"; } </script> <div id ="sidebar"> <a href ="#" onmouseover = "show()"; onmouseout = "hide()"> </div> please tell me how i can solve this problem. and sorry for my english, i am from austria ;-) thanks 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. Hi, onClick on a select element, I am trying to hide or show two different table rows. It does not seem to be working on internet explorer Thanks for any help! Code: function showMe (a, box) {
document.getElementById(a).style.display = "table-row";
document.getElementById(a+"2").style.display = "table-row";
}
function hideMe (a, box) {
document.getElementById(a).style.display = "none";
document.getElementById(a+"2").style.display = "none";
}
Code:
<tr><td><b>Account Type:</b><br><small>(If you are both a club and college coach, please select college coach)</small>:</td><td><SELECT NAME="type" size="3"><OPTION VALUE="coach" onClick="hideMe('hide', this)" >Coach/Manager</OPTION><OPTION VALUE="college_coach" onClick="showMe('hide', this)">College Coach</OPTION>
</SELECT></div>
</td></tr>
<tr id="hide" style="display:none;"><td><b>College:</b></td><td colspan="2"><input type="text" name="college" value=""></td></tr>
<tr id="hide2" style="display:none;"><td><b>Title:</b></td>
<td><select name="gender" size="1">
<option VALUE="men" >Men's</option><option VALUE="women" >Women's</option><option VALUE="both" >Men's and Women's</option>
</select></div>
</td>
<td><select name="title" size="1"><OPTION VALUE="head" >Head Coach</OPTION><OPTION VALUE="assistant" >Assistant Coach</OPTION>
</select></div>
</td></tr>
here is the live demo if you would like to see it: http://new.maddogmania.com/application/register.php 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. |
|||||||