Показать и скрыть <div> через ссылку, input type="radio", "checkbox", "select", button

Показать и скрыть <div> через ссылку.


<script>

function viewdiv(id){
var el=document.getElementById(id);
if(el.style.display=="block"){
el.style.display="none";
} else {
el.style.display="block";
}
}

</script>
<a href="javascript:void(0);" onclick="viewdiv('mydiv');">Скрыть/Показать блок</a>
<div id="mydiv" style="display:none;">Содержимое блока</div>


Скрыть/Показать блок

Показать и скрыть <div> через input type="radio"


<div>
<div>
<input type="radio" name="view_block" id="show">Показать блок
<input type="radio" name="view_block" id="hide">Скрыть блок
</div>
</div>

<div id="block" style="display: none;"> Содержимое блока </div>

<script>
document.querySelectorAll("#show, #hide").forEach(function(el) {
el.addEventListener("change", function() {
if (document.getElementById("show").checked) {
document.getElementById("block").style.display = "block";
} else if (
document.getElementById("hide").checked) {
document.getElementById("block").style.display = "none";
}
});
});
</script>


Показать и скрыть <div> через input type="checkbox"


<script>
function showHide (id)
{
var style = document.getElementById(id).style
if (style.visibility == "hidden")
style.visibility = "visible";
else
style.visibility = "hidden";
}
</script>

<input type="checkbox" onclick="showHide('whatever');" />Показать блок
<div id="whatever" style="visibility:hidden">Содержимое блока</div>


Показать и скрыть <div> через input type="select"


<select id="select_block">
<option class="hide">Скрыть блок</option>
<option class="show">Показать блок</option>
</select>
<div id="div_block" style="display: none;">Содержимое блока</div>
<script>
document.getElementById('select_block').addEventListener('change', function(){
if(this.options[this.selectedIndex].classList.contains("show" )){
document.getElementById('div_block').style.display ="block"
}else{
document.getElementById('div_block').style.display ="none"
};
});
</script>

Скрыть блок Показать блок

Показать и скрыть <div> через button

Показать Скрыть