JavaScript Show Hide Content
Show Hide Div Generator. Toggle button show hide div generator, radio button show hide div, checkbox show hide content, toggle link show hide
1
Enter content HTML/Text
2
Set Content Style
Show or hide content page on load
JavaScript Toggle Button Show Hide Function Code
Click on the edit button and try it yourself.
<button type="button" id="sh_toggle_button" onclick="ShowHide()">show</button>
<div id="show_hide_content" style="display:none">
your content here
</div>#show_hide_content {
margin-top: 10px;
width: 500px;
height: 200px;
padding: 5px;
border: solid 1px #000000;
background-color: #FFFFFF;
overflow: auto;
}const ShowHide = () => {
let button = document.getElementById("sh_toggle_button");
let content = document.getElementById("show_hide_content");
if(button.innerText == "show"){
button.innerText = "hide";
content.style.display = "block";
}else{
button.innerText = "show";
content.style.display = "none";
}
}