My goal is to utilize jQuery and CSS to display the initial paragraph out of a set of four, and insert a link or button at the conclusion of the first paragraph. Upon clicking on the link or button, my aim is to reveal the remaining three paragraphs in a smooth slide-down motion, while hiding the initial link/button and replacing it with a new one to trigger a slide-up animation for the last three paragraphs. Despite sounding simple, I am unable to successfully implement this functionality. The following is the only HTML code available for me to work with:
<div class="wrapper">
<p>here is first p</p>
<p>here is second p</p>
<p>here is third p</p>
<p>here is forth p</p>
</div>
I have been experimenting for hours with no success. Any ideas on how I can achieve this?