JSFiddle - React, Tailwind, and code Playground

by Talsja

HTML

<a href="#" id="menu">click me for menu</a>

<div id="cont">
<div id="test">this is my test</div>
</div>


<div class="cookie">    
  <div class="cookie__content">
    <h4>Cookie</h4>
    <p>
      We gebruiken enkele essentiële cookies en vergelijkbare tools om onze website goed te laten werken, om te begrijpen hoe u onze site gebruikt en om uw winkelervaring te verbeteren.
    </p>
  </div>
  <div class="cookie__settings" data-cookie="prefs">
    
  
    <p>
      Deze instellingen zijn nodig om de basisfuncties van de website mogelijk te maken.
    </p>
  
    <p>
Wij gebruiken deze gegevens om analyses uit te voeren en zo onze website te verbeteren.
    </p>
    
    <a class="btn btn-dark btn-sm" href="#">Opslaan</a>
    <a class="btn btn-sm" href="#">Afwijzen</a>
    
  </div>
  
  <div class="cookie__footer">         
    <a class="btn btn-dark btn-sm" href="#">Aanvaarden</a>
    <a class="btn btn-sm" href="#">Afwijzen</a>
    <a class="btn btn-sm" href="#" data-action="cookie-adjust">Aanpassen</a>
  </div>
</div>

SCSS

#cont{
	position: fixed;
	left: 0;
	top: auto;
	right: auto;
	bottom: 0;
	z-index: 3;
	display: block;
	width: 100%;
	max-width: 49.5em;
	padding: 4.5em;
	background-color: silver;  
	font-size: .9em;
}
#test{

	height: auto; 
	background-color: #000; 
	display: none; 

}


.cookie {
	position: fixed;
	left: 0;
	top: auto;
	right: auto;
	bottom: 0;
	z-index: 3;
	display: block;
	width: 100%;
	max-width: 49.5em;
	padding: 4.5em;
	background-color: silver;
	font-size: .9em;

	&__content{
		margin-bottom:2em;

		h4{
			font-size:1.5rem;
		}
	}

	&__settings{
		overflow: hidden;
		margin-bottom: 0;
		height: auto;
		display: none;

		p{
			margin-bottom:1em;
			margin-left:3.5rem;
		}
	}
}

JavaScript

$('#menu').click(function() {
        $('.cookie__settings').animate({
            height: 'toggle'
            }, 290, function() {
        });
    });