JavaScript - Hide And Display Divs Via Insertcontent And Multiple Removecontent Not Working

Hi everyone, was wondering if someone would be able to help me out, and correct this, or suggest an alternative.

I have hidden divs, and I have achieved easily and simply this with the following, but on click I want the other divs to hide so that they all can't be displayed at once, at the moment they just stack up on top of each other. I'm trying to keep it as simple as possible as i'm much the novice

Code:

<script> 
function showhide(id){ 
if (document.getElementById){ 
obj = document.getElementById(id); 
if (obj.style.display == "none"){ 
obj.style.display = ""; 
} else { 
obj.style.display = "none"; 
} 
} 
} 
}
</script>


and then 

<a href="#" onclick="showhide('divname'); return(false);">

Thanks in advance

Hi guys,

another day, another problem I have a select:

Code:

<label for="tiers">Number of tiers</label>
<select name="tiers" id="tiers" onchange="showtiers()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

So depending what the user will choose, I want to show below divs:

Code:

                    	<div class="tier" id="tier_1" style="display:block">
                    	<label for="tier1">Tier 1</label>
                        <select name="item" id="tier1" onchange="recalculate(this)">
                        <option value="0">Please choose1</option>
                        </select>
                        </div>
                        
                        <div class="tier" id="tier_2" style="display:none">
                        <label for="tier2">Tier 2</label>
                        <select name="item" id="tier2" onchange="recalculate(this)">
                        <option value="0">Please choose2</option>
                        </select>
                        </div>
                        
                        <div class="tier" id="tier_3" style="display:none">
                        <label for="tier3">Tier 3</label>
                        <select name="item" id="tier3" onchange="recalculate(this)">
                        <option value="0">Please choose3</option>
                        </select>
                        </div>
                        
                        <div class="tier" id="tier_4" style="display:none">
                        <label for="tier4">Tier 4</label>
                        <select name="item" id="tier4" onchange="recalculate(this)">
                        <option value="0">Please choose4</option>
                        </select>
                        </div>

As you can see, on page load you can only see select/div nr 1, three others are hidden. How can I make that happen? I'm trying with below code placed in the head:

Code:

function showtiers() {
var dropdownIndex = document.getElementById('tiers').selectedIndex;
var dropdownValue = document.getElementById('tiers')[dropdownIndex].value;
									
if (dropdownValue == 2) { 
									
document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'none';
document.getElementById(tier_4).style.display = 'none';
										
}
									
if (dropdownValue == 3) { 
									
document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'block';
document.getElementById(tier_4).style.display = 'none';
									
}
									
if (dropdownValue == 4) { 
									
document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'block';
document.getElementById(tier_4).style.display = 'block';
									
      }
}

If someone could point out what am I doing wrong I'd really appreciate it.

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'm creating a website where I would like to create some kind of tabbed pages.
To do that I wrote a javascript where I create an array of all the divs I use to create the pages and then sets them all on style="display: none;" except the one I clicked which should get style="display: block;"
But I can't seem to get it to work...

This is the script itself:
Code:

var state = 'none';
var i;
var divs = new Array();
divs[0] = document.getElementById(div1);
divs[1] = document.getElementById(div2);
divs[2] = document.getElementById(div3);
divs[3] = document.getElementById(div4);
divs[4] = document.getElementById(div5);


function showhide(layer_ref) {
	
	divs[0].innerHTML="some contents";
	for (i=0;i<divs.length;i++)
	{	
		if(divs[i] == document.getElementById(layer_ref))
		{
			state = 'block';
			
		}
		else
		{
			state = 'none';
		}
		if (document.all) { //IS IE 4 or 5 (or 6 beta)
			eval( "document.all." + divs[i] + ".style.display = state");
		}
		if (document.layers) { //IS NETSCAPE 4 or below
			document.layers[divs[i]].display = state;
		}
		if (document.getElementById &&!document.all) {
			hza = document.getElementById(divs[i]);
			hza.style.display = state;
		}
	}
}

And this is part of the html of the page:
Code:

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

 <div id="navigation">
	<ul class="tabContainer2">
		<li><a  class="orange" href="#" onclick="showhide('div1');">Tab1</a></li>
		<li><a  class="orange" href="#" onclick="showhide('div2');">Tab2</a></li>
        	<li><a  class="orange" href="#" onclick="showhide('div3');">Tab3</a></li>
        	<li><a  class="orange" href="#" onclick="showhide('div4');">Tab4</a></li>
        	<li><a  class="orange" href="#" onclick="showhide('div5');">Tab5</a></li>
        </ul>
 </div>

<div id="div1" style="display: block;">This is the content of tab1</div> 
<div id="div2" style="display: none;">This is the content of tab2</div>
<div id="div3" style="display: none;">This is the content of tab3</div> 
<div id="div4" style="display: none;">This is the content of tab4</div> 
<div id="div5" style="display: none;">This is the content of tab5</div>

Can anyone help me plz, I've been staring at this for hours...

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.

I have an javascript coding issue with regards to a tabbed menu.

The code is supposed to hide the unselected divs and show the selected div, but all divs are showing and no tab is selected when the page initialises.

The source code is viewable he http://www.kenaani.co.uk

I was following this tutorial: http://www.elated.com/articles/javascript-tabs/

Which works fine in this example: http://www.elated.com/res/File/artic...ript-tabs.html

I have tried commenting out the other scripts, and the divs still show on the page, so I don't think its a conflicting issue.

Am hoping that someone can spot whatever is going wrong.

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.

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>

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().

Im using the following script:
Code:

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

.unhidden { display: block; }
.hidden { display: none; }
</style>

to hide and unhide a block of text on my page, using onclick events.

the problem is its not allowing me to use it multiple times in a page.
when i use a second instance of it, both stop working.

the above demonstrated script is working with the following elements:

middle (approx) of page:
Code:

<td class="desc_cell"><strong>Download Station</strong><br /> 
                17&quot; Macbook Pro<br /><a href="javascript:unhide('itemlist');" onclick="changeText(this,'Hide Item List');" id="text1link"]Old Text>Click Here For Full Item List</a><div id="hiddentext" class="hidden">list of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes here</div>
</td>

bottom of page:
[code]<p align="center" style="citylist">Allen Park MI, Anchor Bay Gardens MI, Anchor Bay Harbor MI, Anchor Bay Shores MI, Andersonville MI,<a href="javascript:unhide('hiddentext');" onclick="changeText(this,' View Less...');" id="text1link"]Old Text>View More...</a></p><div id="hiddentext" class="hidden">Armada MI, Auburn Heights MI, Auburn Hills MI, Austin Corneorth Farmington MI, Northville MI, Norton MI, Novi MI, Oak MI, Oak Grove MI, Oak Park MI, Oakley Park MI, Oakwood MI, Orchard Lake MI, Ortonville MI, Oxbow MI, Oxford MI, Perry Lake Heights MI, Pleasant Ridge MI, Plymouth MI, Point Lakeview MI, Pontiac MI, Preston Coom MI, Wolcott Mills MI, Wolverine Lake MI, Wood Creek Farms MI, Woodhaven MI, Wyandotte MI, Yates MI, and many more!</div>

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> 

Hi,

I have a problem with my script, I have a php request and the result is shown in a div, so there is several divs and their id is the "id" in the database, and I want that if we click on a link, it hides every divs...


Here is how I tried to do that:

Code:

<script type="text/javascript">
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
targetElement.innerHTML = "" ;
}
</script>

Code:

$hide = "";
while($ligne=mysql_fetch_array($ress)){


$hide.= "visibilite('$ligne[id]'); ";


$return.= "<tr><td>$ligne[heure] - $ligne[fin]</td><td>$ligne[sport]</td><td>$ligne[salle]</td><td>$ligne[ville]</td><td>$dispo/$ligne[place]</td><td><div id=$ligne[id]>";

$return.= "<a href=# onClick=\"maFonctionAjax($ligne[id],$tennis); $hide return false\">Reserver</a>";

$return.= "</div></td></tr>";
}

Every div'id is the id in the database, with the onClick we call an ajax function and $hide which is the call for the function visibilite for each div

It works for some request, I don't know how is it possible because I can have the same number of results and sometimes it works, and sometimes not...

Does somebody can help me?

Thanks a lot!

Jeff