JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="city-selector" class="city-selector">
                <div class="container">
                    <div class="row">
                        <a href="#" id="close-selector"><i class="fa fa-times-circle-o"></i></a>
                        <p>your city</p>
                        <p class="h1">Moscow</p>
                      
                    </div>
                    
                </div>
            </div>
            <div class="row rel">
                          
                            <div class="col-md-offset-8">
                                <a href="#" id="choose-city" class="current-city"> 
                                    <span>Select city</span>
                                    <i class="fa"></i>
                                </a>
                            </div>
                        
                        </div>

CSS

.city-selector{
  display:none;
}

JavaScript

jQuery( document ).ready(function($) {
  
    var $cityToggler=$("#choose-city");


    function showSelector(){
        var $citySelector=$("#city-selector");
    
        if ($citySelector.hasClass("opened")){
            $citySelector.slideDown().removeClass("opened");
            $cityToggler.addClass("pressed");
        } else {
            $citySelector.slideUp("fast").addClass("opened");
            $cityToggler.removeClass("pressed");

        }
    }
    $("#choose-city, #close-selector").on("click", function(e){
        e.preventDefault();
        showSelector();
    });

});