CODEWITHSUNDEEP
javascripthtmlhideshow
Elsendion
Elsendion

Reputation: 187

Show / Hide DIVs with JavaScript

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.

Upvotes: 0

Views: 15629

Answers (6)

Ivaylo Strandjev
Ivaylo Strandjev

Reputation: 70929

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

Upvotes: 1

Praveen
Praveen

Reputation: 56501

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

Upvotes: 0

Artem
Artem

Reputation: 432

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

Upvotes: 0

Smern
Smern

Reputation: 19066

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

Upvotes: 0

Sudhakar Tillapudi
Sudhakar Tillapudi

Reputation: 26209

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

Upvotes: 0

Shahe Masoyan
Shahe Masoyan

Reputation: 177

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

Upvotes: 0

Related Questions