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

Здесь представленна коллекция скриптов, которая поможет показать и скрыть div с помощью ссылки, input type="radio", "checkbox", "select".


Показать и скрыть <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



Содержимое блока


Понравилась страница? Поделитесь ссылкой в социальных сетях. Поддержите проект!