bootstrap - hide/show

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>
mikha eAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

MishaProgrammerCommented:
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
0
Julian HansenCommented:
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
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mikha eAuthor 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>
0
Determine the Perfect Price for Your IT Services

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

Julian HansenCommented:
Just make the table width 100% - it will scale to fit the width of the parent.
1
mikha eAuthor 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) ?
0
Julian HansenCommented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.