i'm new in HTML and JavaScript and I am having a little problem I have 3 DIVs

<div id="div1"> I'm div1 </div>
<div id="div2"> I'm div2 </div>
<div id="div3"> I'm div3 </div>

and I have 3 buttons and each one of them enables the corresponding DIV and disables the others to show only 1 DIV at a time

<input type="button" name="Showdiv1" value="Show Div 1" onclick="showDiv1()" />
<input type="button" name="Showdiv2" value="Show Div 2" onclick="showDiv2()" />
<input type="button" name="Showdiv3" value="Show Div 3" onclick="showDiv3()" />

I've searched multiple solutions and they only show how to enable, and I don't know why, I can't disable them.

i'm new in HTML and JavaScript and I am having a little problem I have 3 DIVs

<div id="div1"> I'm div1 </div>
<div id="div2"> I'm div2 </div>
<div id="div3"> I'm div3 </div>

and I have 3 buttons and each one of them enables the corresponding DIV and disables the others to show only 1 DIV at a time

<input type="button" name="Showdiv1" value="Show Div 1" onclick="showDiv1()" />
<input type="button" name="Showdiv2" value="Show Div 2" onclick="showDiv2()" />
<input type="button" name="Showdiv3" value="Show Div 3" onclick="showDiv3()" />

I've searched multiple solutions and they only show how to enable, and I don't know why, I can't disable them.

• javascript
• html
• hide
• show

• You should probably show your efforts (the showDiv functions) so people can let you know where you went wrong and help you improve. – Smern Commented Nov 5, 2013 at 13:34
• Yes and you'll probably need to explain what you mean by disable/enable a div. Are you hiding them from view? – Chris B Commented Nov 5, 2013 at 13:35
• Are you want to hide others 2 divs or something else? – BhushanK Commented Nov 5, 2013 at 13:40
• I've a menu on the left side with categories. At the beggining the center is blank, and when i select a category i want to show a table or text in the center of the screen, and when i select another category, it show's up another element in the center, removing the previous one – Elsendion Commented Nov 5, 2013 at 13:59

6 Answers 6

Take a look at visibility options. In short in your functions you should call getElementById(for the if of the div you want to modify) and than change the visibility property of the style of the found element to hidden(to hide the element) or visible(to show it).

function showDiv1(){
    document.getElementById('div1').style.display = 'block';
    document.getElementById('div2').style.display = 'none';
    document.getElementById('div3').style.display = 'none';
}

To Just Hide the Div - and if you want to occupy the Div space

function Hide()
{
document.getElementById('div1').style.visibility="hidden";
}

To Hide and remove the occupied space of the Div element

    function Hide()
    {
    document.getElementById('div1').style.display="none";
    }

There are several ways you could do this, a step in reducing repeated code would be something like this:

<div id=div1> I'm div1 </div>
<div id=div2> I'm div2 </div>
<div id=div3> I'm div3 </div>
<input type="button" name="Showdiv1" value="Show Div 1" onclick="showDiv('1')" />
<input type="button" name="Showdiv2" value="Show Div 2" onclick="showDiv('2')" />
<input type="button" name="Showdiv3" value="Show Div 3" onclick="showDiv('3')" />

JS:

function showDiv(num) {
    document.getElementById('div1').style.display='none';
    document.getElementById('div2').style.display='none';
    document.getElementById('div3').style.display='none';
    document.getElementById('div'+num).style.display='block'
}

Fiddle

Here is a simple solution with pure js:

<div id=div1> I'm div1 </div>
<div id=div2> I'm div2 </div>
<div id=div3> I'm div3 </div>


<input type="button" name="Showdiv1" value="Show Div 1" onclick="showDiv('div1')" />
<input type="button" name="Showdiv2" value="Show Div 2" onclick="showDiv('div2')" />
<input type="button" name="Showdiv3" value="Show Div 3" onclick="showDiv('div3')" />

<script>
function showDiv(id) {
  var divs = document.querySelectorAll("div");

  for (var i = 0; i < divs.length; i++) {
      divs[i].style.display = "none";
  }
  var divToShow = document.getElementById(id);
  divToShow.style.display = "block";
}
</script>

JSFiddle

Here is a simple version of show/hide HTML:

<input type="button" name="Showdiv1" value="div1" />
<input type="button" name="Showdiv2" value="div2" />
<input type="button" name="Showdiv3" value="div3" />
<div id="div1">I'm div1</div>
<div id="div2">I'm div2</div>
<div id="div3">I'm div3</div>

JQuery:

$('input[type="button"]').on('click', function () {
    var div = "#" + $(this).val();
    $('div').hide()
    $(div).show()
})

JSFiddle

Updates: Since you mentioned in pure js here is approach

<input type="button" name="Showdiv1" value="div1" onclick="showDiv(this)" />
<input type="button" name="Showdiv2" value="div2" onclick="showDiv(this)" />
<input type="button" name="Showdiv3" value="div3" onclick="showDiv(this)" />
<div id="div1">I'm div1</div>
<div id="div2">I'm div2</div>
<div id="div3">I'm div3</div>

JS:

function showDiv(that) {
    var len = document.getElementsByTagName('div').length;
    for (var i = 0; i < len; i++) {
        document.getElementsByTagName('div')[i].style.display = "none";
    }
var val =  that.value;
 document.getElementById(val).style.display = "block";
}

JSFiddle