...

View Full Version : Resolved Unhiding specific div when pressing button



jkurrle
08-01-2012, 08:12 PM
I'm trying to set up a group of buttons which will each unhide a certain div, while hiding the rest of the divs in a set. This is what I have, but it doesn't work:



<style>
.hidden {display:none;}
</style>
<script type="text/javascript">
function hideDivs()
{
for(i=1;i<=5;i++)
{
divName="div" + i;
document.divName.style.display="hidden";
}
}

function unhide(selectedDiv)
{
document.getElementById(selectedDiv).style.display='block';
}
</script>

<button class="menuButton" onClick="hideDivs();unhide('div2');">test div 2</button>
<button class="menuButton" onClick="hideDivs();unhide('div3');">test div 3</button>
<button class="menuButton" onClick="hideDivs();unhide('div4');">test div 4</button>

<div name="div1" class="hidden">DIV 1</div>
<div name="div2" class="hidden">DIV 2</div>
<div name="div3" class="hidden">DIV 3</div>
<div name="div4" class="hidden">DIV 4</div>
<div name="div5" class="hidden">DIV 5</div>


Can someone give me an idea of what I'm doing wrong?

Thanks in advance...

Philip M
08-01-2012, 09:06 PM
You have assigned names to your divs, but not ids. display property is "none" not hidden. You are mixing Javascript and CSS which is often a problem. There is no need for two functions.




<script type="text/javascript">

function hideDivs(selectedDiv) {
for (var i=1; i<=5; i++) {
divName="div" + i;
document.getElementById(divName).style.display="none"; // hide all divs
}
document.getElementById(selectedDiv).style.display='block'; // show the selected div
}
</script>

<button class="menuButton" onclick="hideDivs('div2')">test div 2</button>
<button class="menuButton" onclick="hideDivs('div3')">test div 3</button>
<button class="menuButton" onclick="hideDivs('div4');">test div 4</button>

<div id="div1" style="display:none">DIV 1</div>
<div id="div2" style="display:none">DIV 2</div>
<div id="div3" style="display:none">DIV 3</div>
<div id="div4" style="display:none">DIV 4</div>
<div id="div5" style="display:none">DIV 5</div>


"Knowledge is of no value unless you put it into practice.” - Anton Chekhov (Russian playwright and master of the modern short story, 1860-1904)

jkurrle
08-02-2012, 01:46 AM
That did the trick, thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum