JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="f_drop">
<div class="f_select">Please Select</div>
<ul id="f_items">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<input type="hidden" name="whatever" id="f_drop1">
</div>


<div id="hello">

</div>


<ul id="some-container">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

CSS

.f_select {display:inline-block;padding:5px 10px;border:solid #999999;border-width:1px 1px 0px 1px;}
.f_drop ul {list-style-type:none;margin:0;padding:0;border:1px solid #999999;max-height:100px;overflow-y:auto;}
.f_drop ul li {padding:5px 10px;}

JavaScript

function id(x) {var y = document.getElementById(x);return y;}

var lis = document.querySelectorAll("li");

var count = 1;


lis.forEach(function(item) {
  item.addEventListener("click", function() {
    // do something when the button is clicked
var hello = id('hello');
    hello.innerHTML = "test " + count;
    count = (count + 1);
    
  });
});



document.querySelector('#some-container').addEventListener('click', evt => {
  if (!evt.target.closest('.close')) return;
  closeSlide('about');
  closeSlide('work');
  closeSlide('contact');
});