Скрыть/показать div с нажатием кнопки

Question

Я пытаюсь скрыть/показать div на основе щелчка кнопки, но я не могу заставить его работать.

Ниже приведен мой код. Я могу получить предупреждение, чтобы узнать, что я получаю правильный ID из DOM, но я не могу показать/скрыть содержимое div.

function toggleContent(id) { 
 
    var e = document.getElementById(id); 
 
    //if(e.style.display == null || e.style.display == "none") 
 
    if (e.style.visibility == null || e.style.visibility == "hidden") { 
 
    //e.style.display = "block"; 
 
    e.style.visibility: "visible"; 
 
    } else { 
 
    //e.style.display = "none"; 
 
    e.style.visibility: "hidden"; 
 
    } 
 
}

<form> 
 
    <button onclick="alertData();">Get Alerts</button> 
 
    <button onclick="toggleContent('chart');">Chart</button> 
 
    <hr> 
 
    <div id="chart" style="visibility: hidden;"> 
 
    my chart 
 
    </div> 
 
</form>

Answer 1

Вам нужно установить e.style.visibility с помощью =, не :, как вы сделали бы в файле CSS.

Кроме того, обратите внимание, что значение null эквивалентно visible, а не hidden.

function toggleContent(id) { 
 
    var e = document.getElementById(id); 
 
    
 
    if (e.style.visibility == "hidden") { 
 
    e.style.visibility = "visible"; 
 
    } else { 
 
    e.style.visibility = "hidden"; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <button onclick="alertData();">Get Alerts</button> 
 
    <button onclick="toggleContent('chart');">Chart</button> 
 
    <hr> 
 
    <div id="chart" style="visibility: hidden;"> 
 
    my chart 
 
    </div> 
 
</form>

Answer 2

function toggleContent(id) { 
 
event.preventDefault(); 
 
var e = document.getElementById(id); 
 
    
 
    e.style.visibility=="hidden" || e.style.visibility=="" ? e.style.visibility="visible": e.style.visibility="hidden"; 
 
    }

#chart{visibility:hidden;}

<form> 
 
    <button onclick="toggleContent('chart');">Chart</button> 
 
    <hr> 
 
     <div id="chart"> 
 
      my chart 
 
     </div></form>