JSFiddle - React, Tailwind, and code Playground

by aburayane

HTML

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  
  <script src="https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"></script>
  
  <!-- enlever cette ligne -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      

<div class="form-group">
               
                <label class="control-label" for="categoryID">Catégorie</label>
                <div class="input-group" id="categories">
                    <input type="search" name="categories" class="chkField searchBox form-control" id="searchBox-categories" title="categories" placeholder="Choisir une catégorie">
                    <div class="input-group-addon">
                    <i class="fa fa-angle-down" id="cats-scats-arrows" style="font-size:18px; font-weight: bolder;">
                    </i>
                    </div>
                </div>
                
    <ul class="listItems listHiddenItems" id="list-cats-scats"><li class="list-group-item disabled" style="font: 16px bolder; ">Divers<span class="badge badge-default badge-pill">9</span></li><li class="list-group-item">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Idées de cadeaux<span class="badge badge-default badge-pill"></span></li><li class="list-group-item">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Inclassables<span class="badge badge-default badge-pill"></span></li><li class="list-group-item">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mariage<span class="badge badge-default badge-pill"></span></li><li class="list-group-item">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pharmacie<span class="badge badge-default...

CSS

.listItems{
  position: absolute;
  display: none;
    width: auto;
    width: 90%;
    height: auto;
    max-height: 350px;
    overflow-y: scroll;
    overflow-x: hidden;
    list-style-type: none;
    list-style-position: inside;
    margin: 2px 0px 0px 0px;
    padding: 2px 0px 0px 3px;
    line-height: 1em;
    cursor: pointer;
    background-color: white;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-box-shadow: 2px 2px 3px 2px #666;
    -webkit-box-shadow: 2px 2px 3px 2px #666;
    box-shadow: 2px 2px 3px 2px #666;
}

.listItems>li:hover {
    font-size: 16px;
    font-weight: bolder;
    background-color: #FD961C;
    padding-left: 20px;
}

.listHiddenItems{
    //display: none;
    background-color: #ccffff;
}

JavaScript

$('#categories').on('click', function(){
    
    //$('.listItems').hide();
    //$('#cats-scats').slideToggle();
    
    
    if($(".listItems").is(":hidden")){
  	console.log('Opened');
  //$('#cats-scats-arrows').html('<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-16.png">');
  $('#cats-scats-arrows').removeClass('fa-angle-down').addClass('fa-angle-up');
  } else {
        console.log('Closed');
    $('#cats-scats-arrows').removeClass('fa-angle-up').addClass('fa-angle-down');

  //$('#cats-scats-arrows').html('<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-16.png">');
  }
  
$('.listItems').slideToggle();


    //var getID   = $(this).attr('id');
    //console.log(getID);
    
    

}); // end click