JSFiddle - React, Tailwind, and code Playground

by jojaba

HTML

<article>
    <h1>Test slideUp - slideDown</h1>
    <p>Ceci est la section "article"</p>
    <p>Merci pour votre aide ! </p>
</article>
<aside>
      <header>
            <h3><span id="contact-toggle" title="Toggle the contact form">Nous contacter</span></h3>
      </header>
    
          <div class="cont"> 
              <div id="contact">
                  <h4>Le formulaire de contact</h4>
                  <p>Je l'agrandi pour voir...</p>
                  <p>Je l'agrandi pour voir...</p>
                  <p>Je l'agrandi pour voir...</p>
                  <p>Je l'agrandi pour voir...</p>
                  <p>Je l'agrandi pour voir...</p>
                  <p>Je l'agrandi pour voir...</p>
                  <p>Je l'agrandi pour voir...</p>
                  <p>Je l'agrandi pour voir...</p>
              </div>
        </div>

</aside>
    
<footer>Le footer</footer>

CSS

.cont {
    position: relative;
}

aside h3 {
    margin: 0;
    padding: 0 5%;
    color: #FFF;
    font-size: 1.5em;
}

aside h3 span#contact-toggle {
    color: rgb(89, 20, 44);
    padding: 2px 1%;
    border-left: rgb(89, 20, 44) solid 5px;
}
aside h4, aside p {
    margin: 0;
}

#contact {
    width: 100%;
    background: rgb(211, 211, 211);
}

footer {
    background: #000;
    color: #FFF;
}

JavaScript

$(document).ready(function(){ 
 
    /* *********************************** */
	/* Contact form toggle */
	/* ********************************** */
	/* Get the container height for later */
    var contHeight = $(".cont").css("height");
        
    /* The behaviour when clicking the toggle button */
    $("#contact-toggle").on("click", function() {
        if ($(".cont").css("height") != "0px") {
            $("#contact").animate({"height":"0px"}, 500, function() {
                $(".cont").hide();
            });
        }
        else {$(".cont").show();
            $("#contact").animate({"height":contHeight}, 500);
        }
    });    
});