0

I have a row with three columns and a button. When I click on a button, the second column hides and the third one takes it place. How can I force the third column to remain on the same position where it was before hiding the second one? Here is my code:

 <div class="row">
  <div class="col-3">
   Column 1
  </div>
  <div class="col-3 test">
   Column 2
  </div>
  <div class="col-3">
   Column 3
  </div>
 </div>
<button id="btn">
 Hide column 3
</button>

$('#btn').click(function(){
 $('.test').hide();
});
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Felicity
  • 63
  • 1
  • 1
  • 8
  • Instead of hide, change visibility, this will hide but preserve the space it takes up - google css visibility for more details - have a look at this: https://stackoverflow.com/questions/9614622/equivalent-of-jquery-hide-to-set-visibility-hidden – StudioTime Mar 29 '20 at 11:36

1 Answers1

2

Instead of hide use

 $('.test').css('visibility', 'hidden');

you can also use .css('opacity', '0')

Hagai Wild
  • 1,904
  • 11
  • 19