CODEWITHSUNDEEP
javascriptonclicktoggle
pauldx
pauldx

Reputation: 1004

Toggle OnClick to dynamically change CSS

I have a button to show and hide certain part by calling CSS stylesheet change with onClick button. I want the same onclick to toggle in between hide and show. And it is hiding the content with .HeaderContainer {display:none;} but can I get help how to toggle it ? I want same button if click again then it should override the .HeaderContainer with just {} ;

I have made the code like this to hide. I need how the same button can show this again.

<script type="text/javascript">
    function loadToggleAction() {
    var sheet = document.createElement('style')
    sheet.innerHTML = ".HeaderContainer {display:none;}";
    document.body.appendChild(sheet);
    }
  </script>
  <form>
    <input type="button" id="dxp" class="button"  value="Hide top Pane" onclick='javascript: loadToggleAction();' />
  </form>

Upvotes: 0

Views: 2869

Answers (1)

NoLoHo
NoLoHo

Reputation: 76

You could do it like this:

var isHidden = false;

function loadToggleAction() {
    var sheet = document.createElement('style')
    if(!isHidden){
        sheet.innerHTML = ".HeaderContainer {display:none;}";
    }else{
        sheet.innerHTML = ".HeaderContainer {display:block;}";
    }
    document.body.appendChild(sheet);
    isHidden = !isHidden; //This will change the value to the opposite
}

Or like I would to it:

 var isHidden = false;
 function toggleVisibility() {
    var div = document.getElementsByClassName("test")[0];
    if(!isHidden){
      div.style.display = "none";
    }else{
      div.style.display = "block";
    }
    isHidden = !isHidden;
}
.test {
  display: block;
  width: 100px;
  height: 100px;
  background: #ff0000;
}
<div class="test"></div>
<button onclick="toggleVisibility()">Click me</button>

Upvotes: 1

Related Questions