Show / Hide DIVs with JavaScript

Question

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.

You should probably show your efforts (the showDiv functions) so people can let you know where you went wrong and help you improve. — Smern
– 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
– Chris B, Commented Nov 5, 2013 at 13:35
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
– Elsendion, Commented Nov 5, 2013 at 13:59

BenMorel · Accepted Answer · 2013-12-06 14:53:41Z

1

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

edited Dec 6, 2013 at 14:53

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Nov 5, 2013 at 13:35

Ivaylo Strandjev

71.4k18 gold badges130 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shahe Masoyan · Accepted Answer · 2013-11-05 13:37:31Z

0

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

answered Nov 5, 2013 at 13:37

Shahe Masoyan

1834 gold badges4 silver badges15 bronze badges

Comments

Sudhakar Tillapudi · Accepted Answer · 2013-11-05 13:40:00Z

0

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";
    }

edited Nov 5, 2013 at 13:40

answered Nov 5, 2013 at 13:34

Sudhakar Tillapudi

26.3k5 gold badges43 silver badges70 bronze badges

2 Comments

some_coder Over a year ago

why not document.getElementById(...).style.display='none'

BhushanK Over a year ago

visibility="none" ! it should be display="none".

Smern · Accepted Answer · 2013-11-05 13:43:58Z

0

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

answered Nov 5, 2013 at 13:43

Smern

19.1k22 gold badges77 silver badges93 bronze badges

Comments

Artem · Accepted Answer · 2013-11-05 13:51:05Z

0

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

answered Nov 5, 2013 at 13:51

Artem

4321 gold badge4 silver badges13 bronze badges

1 Comment

Elsendion Over a year ago

any way i can start the divs disabled?

Praveen · Accepted Answer · 2013-11-05 13:51:32Z

0

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

edited Nov 5, 2013 at 13:51

answered Nov 5, 2013 at 13:40

Praveen

56.7k35 gold badges138 silver badges170 bronze badges

3 Comments

Praveen Over a year ago

@smerny Just to give a hint that jQuery has a easy approach. Here is a pure js approach fiddle jsfiddle.net/RvhZ8/1

Elsendion Over a year ago

OP here, i don't know very well, how jquery works, but to test that example do i just do <script> jquery here </script>. i don't need to do anything else to make jquery works?

Praveen Over a year ago

@Elsendion for jquery you need to a script file like <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Collectives™ on Stack Overflow

Show / Hide DIVs with JavaScript

6 Answers 6

Comments

Comments

2 Comments

Comments

1 Comment

JSFiddle

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

2 Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related