JSFiddle - React, Tailwind, and code Playground

by leonharris

HTML

<a id="get-here-btn" href="#map-wrap">How to get here</a>
<div id="map-wrap">
    <p>xxxx</p>
    <p>xxxx</p>
</div>

CSS

#get-here-btn {
    width:100%;
    height:200px;
    border:1px solid #ccc;
    float:left;
    display:block;
}

#map-wrap {
    width:100%;
    height: 200px;
    background-color: #eee;
    display:block;
    float:left;
}

JavaScript

$('#map-wrap').slideUp("fast");

$('#get-here-btn').click(function() {
    
    if (!$("#map-wrap").is(":visible"))
    $('#get-here-btn').addClass("active").html('Close');
    
    $("#map-wrap").slideToggle("fast","linear",function() { 
    if (!$("#map-wrap").is(":visible"))
        $('#get-here-btn').removeClass("active").html('How to get here');
       });  
    
 });