JSFiddle - React, Tailwind, and code Playground

by abbaspanjwani

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<select class="form-control" id="myList">
  <option  id="sec" value="">Please select</option>  
  <option  id="sec" value="1">1</option>
  <option  id="sec" value="2">2</option>
  <option  id="sec" value="3">3</option>
  <option  id="sec" value="4">4</option>
  <option  id="sec" value="5">5</option>
  <option  id="sec" value="6">6</option>
  <option  id="sec" value="7">7</option>
  <option  id="sec" value="8">8</option>
  <option  id="sec" value="9">9</option>
  <option value="">
    <div id="loadMore">Load more</div>
  </option>
</select>

CSS

#sec{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
#showLess {
    color:red;
    cursor:pointer;
    display:none;
}
#showLess:hover {
    color:black;
}

JavaScript

$(document).ready(function () {
    size_li = 10;//$("#sec").size();
    alert(size_li);
    x=3;
    $('#sec:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $(' #sec:lt('+x+')').show();
        if(x == size_li){
            $('#loadMore').hide();
        }
    });
   
});