JSFiddle - React, Tailwind, and code Playground

HTML

<div class="filter_container"> <!-- main container -->
            <div class="list_btn"> <!-- button to be clicked -->
               <button>Show List</button>
            </div>
            <div class="info_list"> <!-- list to be opened on click of button -->
               <ul class="clearfix">
                 <li>Country</li>
                 <li>Program</li>
                 <li>Department</li>
                 <li>University</li>
               </ul>
            </div>
    </div>

CSS

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
.list_btn{
	float: left;
}
.list_btn button { /*style of button*/
   background-color: #00af50;
    border: medium none;
    border-radius: 23px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    width: 130px;
    height: 40px;
}
.info_list { /*initially list is hidden*/
    display: none;
    float: left;
}
.info_list ul {  /*style of list*/
    max-width: 900px;
    margin: 0 auto;
    list-style: none;
}
.info_list ul li {
    width: 40%;
    float: left;
    margin: 10px 10px 0 0;
    background: #fff;
    border: 1px solid #85A3D8;
    border-radius: 8px;
    color: #4471C4;
    padding: 8px 0;
    font-size: 20px;
    text-align: center;
}

JavaScript

var abc = 1;
$(".list_btn button").click(function() {
  if (abc==1) {
    $(".list_btn button").text("Hide List");
    abc=0;
  }else{
    $(".list_btn button").text("Show List");
    abc=1;
  }
  $(".info_list").toggle();
 
});