bootstrap - hide/show

mikha
mikha used Ask the Experts™
on
I am new to bootstrap. I have a page set up with a bootstrap grid and form controls  (example below) .
I have two sets of user input controls, applicable in two different scenarios.


if only set of first input controls is applicatble to a user, I would like to hide the second col, and
expand first column to take the full width inside the container?

how can i achieve this  


<div class="container">
  <div class="row">
    <div class="col-sm-6">    
       .... <-- first set of input controls -->
    </div>
    <div class="col-sm-6">
      ... <-- second  set of input controls -->
    </div>  
  </div>
</div>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Try this code:

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#YourFirstControls" aria-expanded="false" aria-controls="collapseExample">
    YourButton
  </button>
 <div class="col-sm-6" id="YourFirstControls">    
       .... <-- first set of input controls -->
    </div>

Open in new window


Or you can use multiple targets for collapse
Look this example for more information:
https://getbootstrap.com/docs/4.0/components/collapse/#multiple-targets
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Using BS 4
HTML
<div class="d-flex">
	<div class="flex-grow-1 bg-primary text-white a-user">User A content</div>
	<div class="flex-grow-1 bg-success text-white b-user">User B Content</div>
</div>
<button class="btn btn-primary hide-user" data-user="a-user">Toggle A</button>
<button class="btn btn-primary hide-user" data-user="b-user">Toggle B</button>

Open in new window

jQuery
<script>
$(function() {
  $('.hide-user').click(function() {
    var sel = '.' + $(this).data('user');
    $(sel).toggle();
  });
});
</script>

Open in new window

Working sample here

Author

Commented:
@Julian - thanks. this is perfect.

if we place a table or grid inside, like below, what would be best approach to make their width also expand and collapse , when the user B Content is hidden/shown.

<div class="flex-grow-1 bg-primary text-white a-user">
    <table>...
    </table>
</div>
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Just make the table width 100% - it will scale to fit the width of the parent.

Author

Commented:
@Julian - thanks . That works .

I placed the doc with the class flex inside a row/col as such

<div class =row
  <div class=col-12
     <div class=flex- grow-1

And looks like <div> with flex class is bigger than the col.

Can we use inside a column, or how we control the size of the paren div ( div with flex class) ?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are mixing flex and col / row layouts - you don't need to do that - you should use flexbox only for the layout we are discussing.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial