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"),
  $citySelector = $('#city-selector'),
  $flag = true;
  
  $(document).on('click','#choose-city', function(){
  	$citySelector.slideToggle(function() {
    if ($flag == true) {
      alert("Открыто первый раз");
      $flag = false;
      }
    });
  });

});