How to make a closable blog post - html

Question

I have a "What's New" page on my website, and I want users to be able to hide and show the post using a button/a href link text. The code has been edited into the post below.
HTML:
<p>Post name</p>
<button class="visi" onclick="toggleVis()">+</button>
<div id="post-container" hidden>
<p class="post-text">Test sample paragraph = srve function private</p>
<img src="error.jpeg" alt="error" style="width:auto;height:200px">
</div>
JavaScript:
function toggleVis() {
var x = document.getElementById("post-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
CSS:
.visi {
width:auto;
-webkit-border-radius:10px;
height:auto;
background-color:#79E119;
border:5px solid #FFFFFF;
}

Answer 1

Surround the entire blog post with a <div> element, and use jQuery's .toggle() function to show and hide it when users click on a related link or button.
HTML:
<div id="clickme">
Click here
</div>
<div id="blogpost"><h3>my blog title</h3><p>my blog content</p></div>
Javascript:
$( "#clickme" ).click(function() {
$( "#blogpost" ).toggle( "slow", function() {
// Animation complete.
});
});