JSFiddle - React, Tailwind, and code Playground
HTML
<div id="cta-end">
<h1>Modification</h1>
</div>
<div id="bloc1"><h3>BLOC 1</h3></div>
<div id="bloc2"><h3>BLOC 2</h3></div>
CSS
#cta-end {
width:100%;
background-color:red;
text-align:center;
color:white;
}
#cta-end:hover {
cursor:pointer;
}
#bloc1, #bloc2 {
width: 100%;
height: 50px;
margin: 5px 0;
display:none;
color:white;
text-align:center;
}
#bloc1 h3,#bloc2 h3
{
padding: 12px 0;
}
#bloc1 {
background-color:blue;
}
#bloc2 {
background-color:grey;
}
JavaScript
jQuery(document).ready(function () {
jQuery('#cta-end').click(function () {
$('#bloc1,#bloc2').toggle();
});
});