JavaScript - Show/hide Toggle On Multiple Divs

Hello all, I'm still learning java. I have the concept of hide/show down, but want I want to do is when a div is shown, all the other divs are hidden, and when I click on another div to show, the other one hides, etc.

This is my code for jquery show/hide:

Code:

<script type="text/javascript">
 $(document).ready(function(){
 $('#{field_label}').hide();
$('input#show{field_label}').click(function(){
$('#{field_label}').show('fast');
 });

$('input#close{field_label}').click(function(){
$('#{field_label}').hide('fast');
})
});
</script>

What do I need to add so that the previous DIV that was open, auto closes when a NEW DIV is enabled to show.

Much appreciated Coders!

I am trying to create a questionnaire that only reveals some of the questions when certain answers to previous questions are given.

i.e. if the answer to question 1 is Yes, then question 2 appears under it. If the answer is No then question 3 appears instead.

At the moment, however, is does nothing. I know the javascript I'm using should work, as I have used it on a website before, but not in this context.
Can anyone see what I'm doing wrong?

The javascript I have writen for this is:

Code:

<script>
function showdiv(name){
var obj = (document.getElementById)? document.getElementById(name) : eval("document.all[name]");
if (obj.style.display=="none"){
obj.style.display="";
}else{
obj.style.display="none";
}
}
</script>

The CSS is:
Code:

#q1 {
}

#q2 {
	display:none;
	margin-top: 10px;	
}

#q3 {
	display:none;
	margin-top: 10px;	
}

and the HTML is:

Code:

    	<div id="main">
    		            
            <div id="q1">
            	<p>This is question 1</p>
                <input type=button value="No" onclick="showdiv('q2');"/>
                <input type=button value="Yes" onclick="showdiv('q3');"/>
            </div>
                        
            <div id="q2">
                <p>This is question 2</p>
                <input type=button value="Yes"/>
                <input type=button value="No"/>
            </div>

            <div id="q3">
                <p>This is question 3</p>
                <input type=button value="Yes"/>
                <input type=button value="No"/>
                <input type=button value="Maybe"/>
            </div>
        </div>

I have a page where it has anchors going to different parts of the page and i have a list of links at the top to go to each anchor. when you click on the links to each part of the page it shows the "back to top, next, back" buttons. I have 7 different links, so i need to have this happen 7 times, I only want the "back to top, next, and back" buttons to be shown when the user clicks on the link to that specific anchor, or the next/back button to that anchor from another one. I have been doing this with the div hide/show javascript however it makes me have to change sooo much information to do this.. There has got to be an easier way.. It would take me forever to finish doing this to all of them, i need a better way to achieve this. There's too much code that its confusing.

this is my current javascript:

var ie = (document.all) ? true : false;
function hideID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="none"
}
function showID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="block"
}

And this is just one of the links:

<li><a onclick="showID('1939top'); showID('1939next');hideID('1940top'); hideID('1941top'); hideID('1942top'); hideID('1943top'); hideID('1944top'); hideID('1945top');" href="#1939">1939</a></li>

And this is one of the back to top/next button codes:

<a href="#1940"><span id="1939next" class="next-back" onclick="hideID('1939next'); hideID('1939top')"><div class="arrow-down"></div></span></span></a>
<a href="#top"><span id="1939top" class="timeline-b2top" onclick="hideID('1939top')">Top</span></a><a name="1939" id="1939"></a>


This code has always been a huge problem for me, not only does it take forever to change the effects and all, but it is VERY messy and I really need some help on how to code it lol. Thanks so much.

Hi ya all,
how can I show / hide the content of sub divs based on whether the input is != or =

and be able to repeat this.

I tried to hide the sub divs using , onclick if bla bla = '' ;
Code:

document.getElementById('hideme').innerHTML = '';

which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input

thx

Trying to get the divs to switch style properties when selected form select menu. Any help would be great!

Code:

<script type="text/javascript">
function showstuff(element){
        if(document.getElementById(element).style.display = 'block')
                  {
                        document.getElementById(have).style.visibility="block";
                        document.getElementById(look).style.visibility="none";
                  }
        else if(document.getElementById(element).style.visibility = 'block')
                  {
                        document.getElementById(look).style.visibility="block";
                        document.getElementById(have).style.visibility="none";
                  }
}
</script>

<select name="type" onchange="showstuff(this.value);">
          <option value="look">Look</option>
          <option value="have">Have</option>
</select>
<div id="have" style="display:block;">Have</div>
<div id="look" style="display:none;">Look</div>

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 have a page that has 26 divides one for each letter A-Z.

I have the script written so that when you click on the link for one letter it shows that divide and hides the rest. However, I think there has got to be an easier way to do this because the code is so long! It works great but takes forever to write! Does anyone have any suggestions to reduce the size of this code?

Code:

Javascript: (Short and simple code)
function showstuff(divID){
   document.getElementById(divID).style.visibility="visible";
    document.getElementById(divID).style.display="block";
	window.location.hash="names"; 
}

function hidestuff(divID){
   document.getElementById(divID).style.visibility="hidden";
   document.getElementById(divID).style.display="none";
}

HTML: (WHAT A CLUSTER!)

<a href="javascript:showstuff('adivide');hidestuff('bdivide');hidestuff('cdivide');hidestuff('ddivide');">A</a>

So I have 26 functions being called for each click! There must be a simpler way to do this. Perhaps I can write a function that calls all 25 hidestuff() functions and then I can add the one showstuf().

Hello,

I'm working on a top menu consisting of MENU A, MENU B and MENU C each with it's own drop down submenu on a separate layer. I'm using ShowContent and HideContent to display the submenus onmouseover. So on mouseover it shows "LayerA" and hides "LayerB" and "LayerC."

The problem I'm having is that it will only hide one of the layers. Which ever one is listed first. I'm sure the problem lies in HideContent('LayerB','LayerC') but I don't know how to resolve it. Any help would be much appreciated.

Here is the script I'm using:
<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script> And here is my menu:
<td><a href="XXXX" onmouseover="ShowContent('LayerA'); HideContent('LayerB','LayerC')">MENU A</a>
</td>
<td><a href="XXXX" onmouseover="ShowContent('LayerB'); HideContent('LayerA','LayerC')">MENU B</a>
</td>
<td><a href="XXXX" onmouseover="ShowContent('LayerC'); HideContent('LayerA','LayerB')">MENU C</a>
</td>

So I am trying to hide content and show it when selected with a select box. The first select box works fine no problems.

However I added a second one with two options, and it will not work at all. If I use the same name it messes up, and if I make a new name, it does nothing at all.

ShowNext function is the new one I added that doesn't work.

PHP Code:
<script type="text/javascript">

function ShowReg(op) {
  document.getElementById('public').style.display='none';
  document.getElementById('alliance').style.display='none';

  switch (op) {
    case 1 : document.getElementById('public').style.display="block"; break;
    case 2 : document.getElementById('alliance').style.display="block"; break;

    default : break;
  }
}

function ShowNext(op) {
  document.getElementById('randomwin').style.display='none';
  document.getElementById('setentry').style.display='none';
  document.getElementById('highestlevel').style.display='none';
  document.getElementById('question').style.display='none';


  switch (op) {
    case 1 : document.getElementById('randomwin').style.display="block"; break;
    case 2 : document.getElementById('setentry').style.display="block"; break;
    case 3 : document.getElementById('highestlevel').style.display="block"; break;
    case 4 : document.getElementById('question').style.display="block"; break;


    default : break;
  }
}
</script> 


PHP Code:
<tr><td><b>Privacy:</b></td><td>
        <select name="privacy" id="choice" onChange="ShowReg(this.selectedIndex)">
       <option value="error">Select One</option>
       <option value="public">Public</option>
        <option value="alliance">Alliance Only</option>
        </select>
        </td></tr></table><br />
        
<div id="public" style="display:none">
<p><b>Contest will be made Public for all players to use.</b>
</div>
<div id="alliance" style="display:none">
  <p><b>Contest will be made available to only alliance members.</b>
</div>


<tr><td><b>Type:</b></td><td>
        <select name="contype" id="choice" onChange="ShowNext(this.selectedIndex)">
        <option value="error">Select One</option>
        <option value="randomwin">Random Draw</option>
        <option value="setentry">Marked Entry</option>
        <option value="highestlevel">Highest Level</option>
        <option value="question">Answer Question</option>
        </select></td></tr></table><br />

<div id="randomwin" style="display:none">
<p>Random draw selected
</div>

<div id="winner" style="display:none">
<p>Select Entry number to auto win:
<select name="entrypick">
<option value="5">Entry 5</option>
<option value="6">Entry 6</option>
<option value="7">Entry 7</option>
<option value="8">Entry 8</option>
<option value="9">Entry 9</option>
<option value="10">Entry 10</option>
<option value="11">Entry 11</option>
<option value="12">Entry 12</option>
<option value="13">Entry 13</option>
<option value="14">Entry 14</option>
<option value="15">Entry 15</option>
<option value="16">Entry 16</option>
<option value="17">Entry 17</option>
<option value="18">Entry 18</option>
<option value="19">Entry 19</option>
<option value="20">Entry 20</option>
<option value="21">Entry 21</option>
<option value="22">Entry 22</option>
<option value="23">Entry 23</option>
<option value="24">Entry 24</option>
<option value="25">Entry 25</option>
<option value="26">Entry 26</option>
<option value="27">Entry 27</option>
<option value="28">Entry 28</option>
<option value="29">Entry 29</option>
<option value="30">Entry 30</option>
</select>
</div> 

So, I'm using a lot of js and I needed to find a work around to get it all working together, so I'm using InsertContent and RemoveContent to control several divs that I have. In this case it is 4 divs, but in other situations I'll have up to 10.

My problem is that when the user starts with the first div displayed, the other 3 swap just fine, however, when clicking through the set of links, once the user gets to the 3rd link that is supposed to swap out the divs all the divs show up except the first, and the same happens on the fourth link.

This is my js for the div swap functionality:
Code:

<script type="text/javascript">
<!--
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
	document.getElementById(tid).style.display = "";
	}
else {
	document.getElementById(tid).style.display = "none";
	}
}

function RemoveContent(tid) {
if(document.getElementById(tid).style.display == "") {
	document.getElementById(tid).style.display = "none";
	}
	
else {
	document.getElementById(tid).style.display = "";
	}
}

//-->
</script>

These are the html links:
Code:

 <div class="listimg"><a href="javascript:RemoveContent('view2','view3','view4'); InsertContent('view1'); swapimg(0);  " ><img src="../assets/images/nokia/nokia01_thumb.jpg" id="item0" alt="" style="opacity:.99;" /></a></div>
    
     <div class="listimg"><a href="javascript:RemoveContent('view1','view3','view4');  InsertContent('view2'); swapimg(1); "><img src="../assets/images/nokia/nokia02_thumb.jpg" id="item1" alt="" /></a></div>
      
     <div class="listimg"><a href="javascript:RemoveContent('view1','view2','view4'); InsertContent('view3'); swapimg(2);"><img src="../assets/images/nokia/nokia03_thumb.jpg" id="item2" alt=""/></a></div>
     
     <div class="listimg"><a href="javascript:RemoveContent('view1','view2','view3'); InsertContent('view4'); swapimg(3);"><img src="../assets/images/nokia/nokia04_thumb.jpg" id="item3" alt=""/></a></div>

And these are the divs that are being removed and added:
Code:

<div id="view1" style="display: "  > 
<a href="../assets/images/nokia/nokia01_big.jpg" class="thickbox" title="Windowcling" rel="gallery-art" >view larger1</a> 
</div>
<div id="view2" style="display:none"  > 
<a href="../assets/images/nokia/nokia02_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art2" >view larger2</a>
</div>
<div id="view3" style="display:none" > 
<a href="../assets/images/nokia/nokia03_big.jpg" class="thickbox" title="Windowcling3" rel="gallery-art3" >view larger3</a>   
</div>
<div id="view4" style="display:none" > 
<a href="../assets/images/nokia/nokia04_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art4" >view larger4</a> 
</div>

Any help would be greatly appreciated. Thank you in advance!

Hi to All,

I have a table that contains many rows,
some in italian with code <td nome='riga_i'>
and some in english with code <td name='row_e'>.
I have created two buttons with different background flags: italy and uk,
so when one pushes the button with flag uk, the html page will be reloaded with only english rows,
and when one pushes the button with flag it, the same page is reloaded containing only italian rows.
All the code posted here works well, but I think that the code can be better because to reach this result I had to dupplicate the same function and I don' t like this.

Here the code:

<html>
<head>
<script type="text/javascript">
function toggle(name) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(name)){
if (tr[i].style.display=='none'){tr[i].style.display = '';}
else {tr[i].style.display = 'none';}
}
}
}
//
function toggle(nome) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(nome)){
if (tr[i].style.display=='none'){tr[i].style.display = '';}
else {tr[i].style.display = 'none';}
}
}
}
</script>
</head>

<body onload="toggle('name');">
<table>
<tr nome="riga_i">
<td>REQUISITI RELATVI AL SERVIZIO</td>
<td> </td>
<td><input type="button" onclick="toggle('nome');toggle('name');" style="background-image: url(../images/flag_uk.jpg); background-color:Transparent;" /></td></tr>
<tr name="row_e">
<td> </td>
<td>REQUIREMENTS RELATED TO THE SERVICE</td>
<td><input type="button" onclick="toggle('name');toggle('nome');" style="background-image: url(../images/flag_italy.jpg); background-color:Transparent;" /></td></tr>
....
.... and so on....
.....
</table></html>


To better the code I have tried in this way but without success ...

<html>
<head>
<script type="text/javascript">
function toggle(this) {
if (this=='nome' || this=='name'){ tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(this)){ if (tr[i].style.display=='none'){tr[i].style.display = '';}
else {tr[i].style.display = 'none';}
}
}
}
}
</script>
</head>


Thanks in advance !!!

Hi

I am trying when a user chooses an airline from dropdown seen here that two additional drop downs appear for departing airport and arrival airport. I have coded it to work when one chooses American Airlines from drop down, but I need different departing and arrival airports to appear for the various a user may choose.

Anyone know how that can be done?

thanks

plzz help!!!!


i am struck wit one of my task.... in html/jscripts .. i have to design a page which dynamically generates a table and inserts the values submited.... in which i have 3 radio buttons ... which should toggle the visibility of the table..

Requirement:

-design a page to keep the track of payments
-select box which holds two types (payments /adjustments)
-data when submitted to be saved in the table
-by default "all" radio box to be checked
if payment radion button is checked the fields of nly payments to be displayed
if adjustments radion button is checked the fields of nly adjustments to be displayed
-



this the code i developed soo far


[CODE]

<html>
<head>
<title> Payments/Adjustments
</title>
<script>



var num1=0;
function Output(srcHolder)
{
alert("haiiii");
//var srcTable = document.createElement("resultTable");

srcTable = document.getElementById("resultTable");
srcTable.deleteRow(srcTable.rows.length-1);
tmpRow = srcTable.insertRow();

tmpCell = tmpRow.insertCell();
tmpCell.innerText = f.date.value;

tmpCell = tmpRow.insertCell();
tmpCell.innerText = f.type.value+"-"+f.name.value;


tmpCell = tmpRow.insertCell();
tmpCell.innerText = f.amount.value;
num1=f.amount.value;
var total=add();



tmpRow = srcTable.insertRow();
tmpCell = tmpRow.insertCell();
tmpCell.innerText = "amount";
tmpCell = tmpRow.insertCell();
tmpCell.innerText = total;

srcHolder.appendChild(srcTable);

if(flag==1)
{
tmpRow = srcTable.insertRow();
tmpCell = tmpRow.insertCell();
tmpCell.innerText = f.date.value;
}

}
var sum=0;
function add()
{
num1=parseInt(num1);
sum=sum+num1;
return sum;
}

</script>




</head>


<body>
<form name="f">
<table align="center">
<tr>
<td>
DATE:<input type="name" id="date" title="enter date in mm/dd/yyyy format" size="20" maxlength="10"/>
</td>
<td>
For:<input type="name" id="name" title="Entername" size="40" />
</td>
<td>
Amount:<input type="name" id="amount" title="amount" size="10" />
</td>
</tr>
<tr>
<td colspan="3">
Type:<select name="type">
<option value="">--Select--</option>
<option value="adjust" >adjustments</option>
<option value="payments">payments</option>
</select>
<td>
</tr>
</table>
<br><center>
<input type="button" name="Save" value="Save" onclick="Output(srcHolder)"/>
<input type="reset" name="Cancel" value="Cancel"/>
</center>
<hr>

<center>
<label for="type">Type</label>
<input type="radio" name="type1" value="pa"/>payments

<input type="radio" name="type1" value="ad"/>adjustments

<input type="radio" name="type1" value="all" />all

<table border="3" id="resultTable">
<thead>

<th>Date
</th>

<th>For
</th>
<th>Amount
</th>

</thead>




<tbody>

<tr>
</tr>

<tr>
</tr>
<th>
</tr>


</tbody>


</table>
<div id="srcHolder" >

</div>
</form>
</body>
</html>

[CODE]

I have a script that will slide a div up from the bottom of the page. The toggle button for this div however is going to be right on top of the sliding div. But, when the button is pressed and the div starts to slide down, the script hides the button. Here's an example...

http://www.codekraken.com/dashpad/testing/test2.html

How can I get the toggle button to slide with it, but not disappear?

Hi all,

I have a number of images placed on a map (the images are dots indicating a location)

When clicked, that displays different textual information somewhere on the page. View here and click the dots on the map for what I am trying to explain:

http://www.garethhardy.com/Shine/?page_id=6

What I want to do now is to toggle these dots so that when clicked, the dot turns white. This I could do with some code I found on the net. However, I need it to toggle all images. In that if one image has been clicked and turned white, and then the user clicks a different black ot, then that black dot should turn white, and the white dot should turn back clack.

Hope that makes sense!

Thanks in advance

Dan