0

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>
1252748
  • 14,597
  • 32
  • 109
  • 229
pauldx
  • 833
  • 1
  • 12
  • 22

1 Answers1

1

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>
NoLoHo
  • 76
  • 8
  • I am getting one small problem with this code. The vertical space say pixel 100px that I get with this with display:none is causing the additional vertical white space at bottom . – pauldx Feb 23 '17 at 06:03
  • That could have todo with other css on you page. As you can read here there is no space allocated to a tag with `display:none` http://stackoverflow.com/a/133064/5173585 Also if this answered your question please mark my post as answer, thank you! – NoLoHo Feb 24 '17 at 00:20
  • 1
    you might right because not being able to figure out what is causing the scrollbar not functional with display:none as the purpose of hiding top pane is not giving me the space back to bottom part of the page. Some how this vertical scroll getting some extra white space below . Do you by any chance know what is causing this ? Its a common issue for page scroll with any browser though . Thanks and appreciate your help ... bTw I have already marked it as answered – pauldx Feb 25 '17 at 05:40
  • Sorry for the late response. If you could post the your css and the html code around your `
    `I'll look into it and try to figure out what is casuing your problem :) Thank you!
     – NoLoHo Feb 26 '17 at 15:55
  • Thanks @NoLoHo.... I have posted the separate question below in another thread with screenshot : The problem is I am using a tool and the screenshot is from the predefined css and html code that tools generated : See if you can figure out the issue from screenshot. Any help is definitely appreciated ! http://stackoverflow.com/questions/42465559/portal-header-hide-causing-extra-vertical-white-space – pauldx Feb 27 '17 at 01:33