JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<button id="toggle-collapse">Expand/Collapse</button>
<div id="collapse-list" class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
<a href="#" class="list-group-item">Fourth item</a>
<a href="#" class="list-group-item">Fifth item</a>
<a href="#" class="list-group-item">Six item</a>
</div>

JavaScript

var hideElements = function(){
	$('#collapse-list a').each(function(i){
        if(i > 2){
            $(this).slideToggle(200);
        }
    });
};

hideElements();
var toggleStatus = true;
$('#toggle-collapse').click(function(){
    if(toggleStatus){
		$('#collapse-list .list-group-item:not(:visible)').slideToggle(200);
    } else {
    	hideElements();
    }
    alert('');
    toggleStatus = !toggleStatus;
});