Geek asks and answers

Show / hide div with javascript on button click (and first all hidden divs)

I am new to javascript and I tilt the seam to hide the div to start, I can make the divs switch among themselves, any help would be great

<script type="text/javascript">
function show(elementId) { 
 document.getElementById("id1").style.display="none";
 document.getElementById("id2").style.display="none";
 document.getElementById("id3").style.display="none";
 document.getElementById(elementId).style.display="block";
}
</script>


<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>
+3
source share
7 answers

You can hide all divs by adding inline styles:

<script type="text/javascript">
function show(elementId) { 
 document.getElementById("id1").style.display="none";
 document.getElementById("id2").style.display="none";
 document.getElementById("id3").style.display="none";
 document.getElementById(elementId).style.display="block";
}
</script>


<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1"  style="display:none">text 1</div>
<div id="id2"  style="display:none">text 2</div>
<div id="id3"  style="display:none">text 3</div>

See how it works here: http://jsbin.com/suhok/2/

+6
source 
<script type="text/javascript">
function show(elementId) { 
 document.getElementById("id1").style.display="none";
 document.getElementById("id2").style.display="none";
 document.getElementById("id3").style.display="none";
 document.getElementById(elementId).style.display="block";
}
</script>
<style>
 div{
  display:none;
 }
</style>

<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>

All divs will be hidden on the first pass, the code will work this way, empty buttons and div under the <body> tag and <script> and <style> under the <head> tag

here is jsfindle link

+1
source

CSS JavaScript : http://jsfiddle.net/maximgladkov/XaMzB/1/

JavaScript

window.show = function(elementId) { 
    var elements = document.getElementsByTagName("div");
    for (var i = 0; i < elements.length; i++)
        elements[i].className = "hidden";

    document.getElementById(elementId).className = "";
}

CSS

.hidden {
    display: none;
}

HTML

<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1">text 1</div>
<div id="id2" class="hidden">text 2</div>
<div id="id3" class="hidden">text 3</div>
+1
source

You can use pure CSS to hide divs to start with:

#id1, #id2 #id3 {
 display: none;
}
0
source

Your code is ok. You just need to put the block scriptafter everything else.

Demo

<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>
<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>
<script type="text/javascript">
    function show(elementId) {
        document.getElementById("id1").style.display = "none";
        document.getElementById("id2").style.display = "none";
        document.getElementById("id3").style.display = "none";
        document.getElementById(elementId).style.display = "block";
    }
</script>
0
source 
<script type="text/javascript">
function hideAll(){
     document.getElementById("id1").style.display="none";
     document.getElementById("id2").style.display="none";
     document.getElementById("id3").style.display="none";    
}
function show(elementId) { 
    hideAll();
    document.getElementById(elementId).style.display="block";
}
</script>


<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>

<script type="text/javascript">
    hideAll();
</script>

jsfiddle: http://jsfiddle.net/y7YKV/

-1
source

Declare the show method globally. Watch the violin. I think you need to.

window.show= function(elementId) { 
 document.getElementById("id1").style.display="none";
 document.getElementById("id2").style.display="none";
 document.getElementById("id3").style.display="none";
 document.getElementById(elementId).style.display="block";
}

Jsfiddle

-2
source

More articles:


All Articles