CODEWITHSUNDEEP
javascripthtmlbuttonhideshow
Obon
Obon

Reputation: 85

Show/hide div's with javascript on a button press (and switch between the buttons)

I'm looking to make a button function to Show/hide div's with javascript and have the buttons switch between each other.

I can get them to show and hide but can't get the buttons to switch between each other without the other div showing.

<script type="text/javascript" language="javascript">
function showHide() {
var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") {
        ele.style.display = "none";
  }
else {
    ele.style.display = "block";
}
}

function showHide1() {
var ele = document.getElementById("showHideDiv1");
if(ele.style.display == "block") {
        ele.style.display = "none";
  }
else {
    ele.style.display = "block";
}
}
</script>

<button onclick="return showHide();">box1</button>
<button onclick="return showHide1();">box2</button>
<div id="showHideDiv" style="display:none;">text1</div>
<div id="showHideDiv1" style="display:none;">text2</div>

Upvotes: 0

Views: 3039

Answers (1)

Ovidiu
Ovidiu

Reputation: 1407

If I got the question right, this might be of use

<script type="text/javascript" language="javascript">
    function showHide() {
        var ele = document.getElementById("showHideDiv");
        var ele1 = document.getElementById("showHideDiv1");
        ele1.style.display = "none";
        if(ele.style.display == "block") {
                ele.style.display = "none";             
          }
        else {
            ele.style.display = "block";            
        }
    }

    function showHide1() {
        var ele = document.getElementById("showHideDiv");
        var ele1 = document.getElementById("showHideDiv1");
        ele.style.display = "none";
        if(ele1.style.display == "block") {
                ele1.style.display = "none";
          }
        else {
            ele1.style.display = "block";
        }
    }
</script>

<button onclick="return showHide();">box1</button>
<button onclick="return showHide1();">box2</button>
<div id="showHideDiv" style="display:none;">text1</div>
<div id="showHideDiv1" style="display:none;">text2</div>

Upvotes: 1

Related Questions