Toggle OnClick для динамического изменения CSS

Question

У меня есть кнопка для отображения и скрытия определенной части, вызывая изменение таблицы стилей CSS с помощью кнопки onClick. Я хочу, чтобы тот же onclick переключался между шкурой и шоу. И он скрывает содержимое с .HeaderContainer {display:none;}, но могу ли я получить помощь, как его переключить? Я хочу, чтобы кнопка была нажата, тогда она должна переопределить .HeaderContainer с помощью только {};

Я сделал код, как это, чтобы скрыть. Мне нужно, как одна и та же кнопка может показать это снова.

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

Answer 1

Вы можете сделать это следующим образом:

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 
} 

Или, как я к нему:.

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>