Ggtcf

I have a Grid view which is divided horizontally. Having 3 buttons which will expand and collapse grids accordingly. But it is not adjusting to the width of the page. I mean when I hide each grids, it should occupy entire page. Also the buttons i need to place in top of each place as shown in image. Also button should change + and - (Expand collapse).

What I have is

What I need is

Grid is as below

<button class="btnShowHide1">First</button> 
<button class="btnShowHide2">Second</button> 
<button class="btnShowHide3">Third</button> 
<div class="row col-lg-12">
 <div class="col-lg-3">
 <h3>Section 1</h3>
 </div>
 <div class="col-lg-3">
 <h3>Section 2</h3>
 </div>
 <div class="col-lg-3">
 <h3>Section 3</h3> 
 </div>
 <div class="col-lg-3">
 <h3>Section 4</h3> 
 </div>
 </div>

My detailed code is : Code

I changed the classes to use xs for StackOverflow.

Essentially, you need to derive the class to put on the cells by the number of visible columns left.

$(document).ready(function() 
 var $columns = $('.row > div');
 
 $('.btnShowHide').on('click', function () 
 var columnIndex = $(this).data('column');
 var classToRemove = 'col-xs-'+ (12 / $columns.not('.hidden').length);
 
 $columns.removeClass(classToRemove);
 $columns.eq(columnIndex).toggleClass('hidden');
 $columns.addClass('col-xs-'+ (12 / $columns.not('.hidden').length));
 );
);

.hidden 
 display: none;


.row div 
 border: 1px red solid;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btnShowHide" data-column="0">First</button>
<button class="btnShowHide" data-column="1">Second</button>
<button class="btnShowHide" data-column="2">Third</button>
<div class="row">
 <div class="col-xs-3">
 <h3>Column 1</h3>
 </div>
 <div class="col-xs-3">
 <h3>Column 2</h3>
 </div>
 <div class="col-xs-3">
 <h3>Column 3</h3>
 </div>
 <div class="col-xs-3">
 <h3>Column 4</h3>
 </div>
</div>

You can't just toggle col-lg-3 and col-lg-4. The items would also need to be 6 or 12 columns depending on the count. You need to count the number of visible classes and apply the appropriate class to all:

$(document).ready(function()
 $('.btnShowHide1').on('click', function()
 $('.row div:first-child').toggleClass('hidden');
 updateClasses();
 );
 $('.btnShowHide2').on('click', function()
 $('.row div:nth-child(2)').toggleClass('hidden');
 updateClasses();
 );
 $('.btnShowHide3').on('click', function()
 $('.row div:nth-child(3)').toggleClass('hidden');
 updateClasses();
 );
);

function updateClasses() 
 var visibleDivs = $('.row div').filter(function() 
 return !$(this).hasClass('hidden');
 );
 var colClass = 'col-lg-' + (12 / visibleDivs.length);
 $(visibleDivs).attr('class', colClass);