Hopefully this is an easy question. I have a `div` that I want to toggle hidden/shown with a button

```
<div id="newpost">

```
['https://Stackoverflow.com/questions/4528085', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/547794/']
Since toggling using `style` like:

```js
myElement.style.display = someBoolState ? "block" : "none"  

```

is a really bad idea, here are some examples in JS, jQuery, HTML, CSS:

JavaScript [.classList.toggle()](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
====================================================================================================

```js
const elToggle  = document.querySelector("#toggle");
const elContent = document.querySelector("#content");

elToggle.addEventListener("click", function() {
  elContent.classList.toggle("is-hidden");
});
```

```css
.is-hidden {
  display: none;
}
```

```html
<button id="toggle">TOGGLE</button>
<div id="content" class="is-hidden">Some content...</div>
```

The beauty of the above is that the styling is purely handled where it should, and that's in your stylesheet. Also, by removing the `.is-hidden` class your element will regain its original *`display`* mode, being it `block`, `table`, `flex`, or whatever.

jQuery .toggle()
================

[`.toggle()`*Docs*](http://api.jquery.com/toggle/)  

[`.fadeToggle()`*Docs*](http://api.jquery.com/fadetoggle/)  

[`.slideToggle()`*Docs*](http://api.jquery.com/slidetoggle/)

```js
$("#toggle").on("click", function(){
  $("#content").toggle();                 // .fadeToggle() // .slideToggle()
});
```

```css
#content{
  display:none;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>
```

jQuery - Toggle [`.toggleClass()`*Docs*](http://api.jquery.com/toggleclass/)
============================================================================

`.toggle()` toggles an element's `display` `"block"/"none"` values

```js
$("#toggle").on("click", function(){
  $("#content").toggleClass("show");
});
```

```css
#content{
  display:none;
}
#content.show{
  display:block; /* P.S: Use `!important` if missing `#content` (selector specificity). */
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>
```

HTML5 - Toggle using `<summary>` and `<details>`
================================================

(unsupported on IE and Opera Mini)

```html
<details>
  <summary>TOGGLE</summary>
  <p>Some content...</p>
</details>
```

HTML - Toggle using `checkbox`
==============================

```css
[id^=toggle],
[id^=toggle] + *{
  display:none;
}
[id^=toggle]:checked + *{
  display:block;
}
```

```html
<label for="toggle-1">TOGGLE</label>

<input id="toggle-1" type="checkbox">
<div>Some content...</div>
```

HTML - Switch using `radio`
===========================

```css
[id^=switch],
[id^=switch] + *{
  display:none;
}
[id^=switch]:checked + *{
  display:block;
}
```

```html
<label for="switch-1">SHOW 1</label>
<label for="switch-2">SHOW 2</label>

<input id="switch-1" type="radio" name="tog">
<div>1 Merol Muspi...</div>

<input id="switch-2" type="radio" name="tog">
<div>2 Lorem Ipsum...</div>
```

CSS - Switch using `:target`
============================

(just to make sure you have it in your arsenal)

```css
[id^=switch] + *{
  display:none;
}
[id^=switch]:target + *{
  display:block;
}
```

```html
<a href="#switch1">SHOW 1</a>
<a href="#switch2">SHOW 2</a>

<i id="switch1"></i>
<div>1 Merol Muspi ...</div>

<i id="switch2"></i>
<div>2 Lorem Ipsum...</div>
```

---

Animating class transition
--------------------------

If you pick one of JS / jQuery way to actually toggle a `className`, you can always add animated transitions to your element, here's a basic example:

```js
const elToggle  = document.querySelector("#toggle");
const elContent = document.querySelector("#content");

elToggle.addEventListener("click", () => {
  elContent.classList.toggle("is-hidden");
});
```

```css
#content {
  display: inline-flex; /* or whatever */
  transition: 0.6s;
}

.is-hidden {
  position: relative;
  visibility: hidden;
  opacity: 0;
  transform: scale(0);
}
```

```html
<button id="toggle">TOGGLE</button>
<div id="content" class="is-hidden">Some Togglable content...</div>
```
This is how I hide and show content using a class. changing the class to nothing will change the display to block, changing the class to 'a' will show the display as none.

```
<!DOCTYPE html>
<html>
<head>
<style>
body  {
  background-color:#777777;
  }
block1{
  display:block; background-color:black; color:white; padding:20px; margin:20px;
  }
block1.a{
  display:none; background-color:black; color:white; padding:20px; margin:20px;
  }
</style>
</head>
<body>
<button onclick="document.getElementById('ID').setAttribute('class', '');">Open</button>
<button onclick="document.getElementById('ID').setAttribute('class', 'a');">Close</button>
<block1 id="ID" class="a">
<p>Testing</p>
</block1>
</body>
</html>

```