JSFiddle - React, Tailwind, and code Playground

by karthick Chandran

HTML

<div class="cd-container" >
   <ul name="category_group"   class="cd-dropdown" > 
		<li value="0"> All categories </li>   	   	
		<li value='101'   > text2 </li>     	
        <li value='102'   > text3 </li>
        <li value='103'   > text4 </li>  
        <li value='104'   > text5 </li>  
        <li value='105'   > text6 </li>  
        <li value='106'   > text7 </li>  
        <li value='107'   > text8 </li>  
        <li value='108'   > text9 </li>  
        <li value='109'   > text10 </li>  
        <li value='110'   > text11 </li>  
        <li value='111'   > text12 </li>  
        <li value='112'   > text13 </li>  
        <li value='113'   > text14 </li>  		
</ul>
</div>

CSS

.overflow{
     overflow-x: hidden;
     overflow-y: hidden;
}
.cd-dropdown{
    height:30px;position:absolute;
}
.cd-container{ height:200px;width:300px ; position:relative;}

JavaScript

$(document).ready(function(){
        $('.cd-dropdown').addClass( "overflow");
         $('.cd-dropdown select').on('click',function(){
                        $(this).addClass( "overflow");
             });
         $('.cd-dropdown li').on('click',function(){
             if( $(this).parent().hasClass("overflow"))
             {
                        $(this).parent().removeClass( "overflow");
                        $(this).parent().css( "overflowY","scroll" );
             }
             else
             {
                  $(this).parent().css( "overflowY","" );
             $(this).parent().addClass( "overflow");
             }
             });
    
    });