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
3

Select Show Hide Function

Show Hide
Show Hide
CSS
JavaScript

JavaScript Toggle Button Show Hide Function Code

Click on the edit button and try it yourself.
HTML
<button type="button" id="sh_toggle_button" onclick="ShowHide()">show</button>

<div id="show_hide_content" style="display:none">
your content here
</div>
CSS
#show_hide_content {
  margin-top: 10px;
  width: 500px;
  height: 200px;
  padding: 5px;
  border: solid 1px #000000;
  background-color: #FFFFFF;
  overflow: auto;
}
JavaScript
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";
  }
}
Try it Yourself