JSFiddle - React, Tailwind, and code Playground

by Abhimanyu Kumar Vatsa

HTML

<div id="showLocalityMenu">
    Select Locality
    <div id="showLocalityMenuIcon">
        &nbsp;
    </div>
</div>

<div class="localityMenu">
    <a href="#">Bokaro</a>  
    <a href="#">Jamshedpur</a>  
    <a href="#">Golmuri</a>  
    <a href="#">Ranchi</a>
</div>

CSS

body{
    background-color:gray;
}
#showLocalityMenu {
    position: absolute;
    margin-top: 10px;
    cursor:pointer;
    border:1px solid black;
    padding:5px;
}
.localityMenu{
    display:none;
    padding-top:60px;
}
.showSelectedOpen {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
#showLocalityMenuIcon {
  background-image: url('http://3.bp.blogspot.com/-Wm3WQQbRATQ/VS0vh82_FdI/AAAAAAAAFqM/UvFEH-CxSkk/s1600/open-citylist.png');
  background-repeat: no-repeat;
  background-position: center;
}

JavaScript

$(document).ready(function () {
    $('#showLocalityMenu').click(function () {
        $('.localityMenu').slideToggle("fast");
        $('#showLocalityMenuIcon').toggleClass("showSelectedOpen");
    });
});