Dropdown

by Arjun Singh

HTML

<div class="dropdown">
  <span class="label">Sort by </span>
  <span class="arrow">&#x25BE;</span>
  <div class="option" data-value="1">
  Newest First
  </div>
  <div class="option" data-value="2">
  Oldest First
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}

.dropdown{
  user-select: none;
  cursor: pointer;
  position: relative;
  
  background-color: tomato;
  padding: 16px;
  
  border: 5px solid grey;
  border-radius: 32px;
  
  width: 150px;
  height: 20px;
  
  overflow: hidden;
  
  .label{
    position: absolute;
    top: 0;
    left: 0;
    
    display: block;
    height: 100%;
    width: 100%;
    
    padding: 8px;
  }
  
  .arrow{
    position: absolute;
    
    padding: 8px;
    
    top: 0;
    right: 0;
  }
  
  .option:first-of-type{
    margin-top: 20px;
  }
  
  .option{
    border: 1px solid white;
    width: 100%;
    
    padding: inherit;
    
    background-color: rebeccapurple;
    color: white;
    
    overflow: hidden;
  }
  
  &.opened{
    overflow: visible;
  }
}

JavaScript

let value = null;

const dropdown = document.querySelector(".dropdown");
const label = document.querySelector(".label");

dropdown.onclick = function(){
	this.classList.toggle("opened");
}

Array.from(dropdown.children).filter(curr => curr.classList.contains("option")).forEach((curr) => {
	curr.onclick = () => {
		value = curr.getAttribute("data-value");
    label.innerText = curr.innerText;
	}
});