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/']
Look at [jQuery Toggle](http://api.jquery.com/toggle/)

**HTML:**

```
<div id='content'>Hello World</div>
<input type='button' id='hideshow' value='hide/show'>

```

**jQuery:**

```
jQuery(document).ready(function(){
    jQuery('#hideshow').live('click', function(event) {        
         jQuery('#content').toggle('show');
    });
});

```

For versions of jQuery 1.7 and newer use

```
jQuery(document).ready(function(){
    jQuery('#hideshow').on('click', function(event) {        
        jQuery('#content').toggle('show');
    });
});

```

For reference, kindly check this [**demo**](http://jsfiddle.net/vVsAn/1/)
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>

```