JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<select class="form-control " id="dropDownSelect" onchange="location = this.value;">
                                    <option value="#" hidden>Hotel Selection</option>
                                    <option value="#ecoHotel">EcoName</option>
                                    <option value="#luxuryHotel">LuxuryName</option>
                                </select>
  <nav>
   <ul> 
   <li>
   <span class="target-click">Hotel Selection</span>  
   <ul class="hidden-drop">
      <li><a href="#ecoHotel">EcoName</a></li>
   <li><a href="#luxuryHotel">LuxuryName</a></li>
   </ul>
   </li>
  
</ul>
</nav>
                                
                  <div id="ecoHotel" class="page">Eco Hotel Section</div>
                  <div id="luxuryHotel" class="page">Luxury Hotel Section</div>

CSS

select {
  margin-bottom: 30px;
}
#ecoHotel {
  background-color: lightgreen;
}
#luxuryHotel {
  background-color: lightgrey;
}
.page {
    display: block;
  height: 100vh;
    width: 100%;
    transition: all .3s ease;
}
.hidden-drop {
  display: none;
}
ul li {
  cursor: pointer;
}

JavaScript

$(document).ready(function(){

  $('.target-click').click(function(){
   $('.hidden-drop').show();
  })
        $('nav  li a').click(function() {
    $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top
    }, 600);
    return false;
  });
  });