Custom dropdown

With using UL List and JS, CSS

by rupesx

HTML

<div id="dropdown-1" class="dropdown">
  <a class="dropdown-link" href="#"><span class="active">Options1</span> <span class="arrow">  </span> </a>
  <div class="dropdown-container">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-2" class="dropdown">
  <a class="dropdown-link" href="#"><span class="active">Options2</span> <span class="arrow">  </span></a>
  <div class="dropdown-container">
    <ul>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
    </ul>
  </div>
</div>

<div id="dropdown-3" class="dropdown">
  <a class="dropdown-link" href="#"> <span class="active">Options3</span> <span class="arrow">  </span></a>
  <div class="dropdown-container">
    <ul>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
    </ul>
  </div>
</div>

CSS

.dropdown-container {
  display: none;
}
.dropdown {
  margin: 10px;
  float: left;
}
.dropdown ul{
  margin:0;
  padding: 0;
}
.dropdown li {
  padding: 3px;
  border: 1px solid;
  list-style: none;
}
.dropdown li:hover{
  background: #eee;
  cursor:pointer;
}

.dropdown-link {
  background: #ccc;
  padding: 10px 15px;
  display: inline-block;
  min-width: 150px;
  position: relative;
  color: #333;
  text-decoration: none;
}
.arrow{
  height:10px;
  width: 10px;
  background: #ff0000;
  display: inline-block;
  transition:all .2s ease-in-out;
  position: absolute;
  right:10px;
  top: 15px;
}

.rotate{
  border-radius:50%;
  background-color:green;
}

JavaScript

$(document).ready(function() {
//1st event for droplist
  $("a.dropdown-link").click(function(e) {
    e.preventDefault();
    var $div = $(this).next('.dropdown-container');
     $('.arrow').removeClass('rotate');
    $(".dropdown-container").not($div).hide();
    if ($div.is(":visible")) {
      $div.hide();
    } else {
      $div.show();
			$(this).find('.arrow').addClass('rotate');
    }
  });

//hide other activities
  $('.dropdown-link').click(function(e) {
    var otherTabs = $(e.target).closest('.dropdown');
    if (!otherTabs) {
      $(".dropdown-container").hide();
    }
    // active selected text
    var selected = $(this).next().find('li');
    $(selected).on('click', function() {
      var listText = $(this).text();
      var activeText = $(this).closest('.dropdown').find('.dropdown-link').find('.active');
      activeText.text(listText);
      $(".dropdown-container").hide();
      $('.arrow').removeClass('rotate');
    })
  });
  
});