Laravel Bootstrap 4 - 2 options using buttons as radio checks, showing relevant field depending on choice

As you can see below I have (in my opinion) two nicely styled options to choose from. These are radio buttons displayed as bootstrap buttons.

Two sections below should be hidden and only displayed when appropriate option is selected.

That's where I hit the wall. I tried via CSS, JQuery, JavaScript onClick, Bootstrap collapse. Nothing works.

Creating user view

data-toggle="buttons" seems to be the culprit. However... Without it hiding/showing, collapsing works but than buttons don't remain in selected/checked state. With it in place buttons behaviour is fine but showing/hiding relevant sections don't work.

Has anyone overcome similar issue or knows the answer?

Code:

    <div class="row justify-content-center">
          <div class="form-group col-md-4">
            <label for="type">User type:</label>
            <div class="row justify-content-center btn-group-toggle" data-toggle="buttons">
              <label class="col-4 btn btn-outline-primary">
                <input type="radio" name="type" value="Employee" autocomplete="off">Employee
              </label>
              <label class="col-4  offset-1 btn btn-outline-primary">
                <input type="radio" name="type" value="External" autocomplete="off">External
              </label>
            </div>
          </div>
        </div>
        <div id="employee" class="row justify-content-center">
          <div class="form-group col-md-4">
            <label for="staff_number">Employee number:</label>
            <input type="text" class="form-control" name="staff_number">
            <small class="form-text text-muted">example: 7xxxxx</small>
          </div>
        </div>
        <div id="external" class="row justify-content-center">
          <div class="form-group col-md-4">
            <label for="company_name">Company name:</label>
            <input type="text" class="form-control" name="company_name">
            <small class="form-text text-muted">Who is this person working for?</small>
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="form-group col-md-4 text-center">
            <button type="submit" class="btn btn-success">Add user</button>
            <a href="{{route('users-list')}}"><button type="button" class="btn btn-dark">Back</button></a>
          </div>
        </div>
  </form>
</div>

Edit 07/01/2019

This is interesting. Created simple index.html file on desktop and pasted this code in:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<h1>JQuery tests</h1>
<form>
Please choose but one: 
<input type="radio" name="portion_selection" value="button_one"/>
...or the other: 
<input type="radio" name="portion_selection" value="button_two"/>
  <div id="portion_one" style="display:none">
    Input the one: <input type="text" name="reference"/>
  </div>
  <div id="portion_two" style="display:none">
    Tell me the other: <input type="text" name="reference"/>
  </div>
</form>

<script type="text/javascript">
  $("input[name='portion_selection']:radio")
    .change(function() {
      $("#portion_one").toggle($(this).val() == "button_one");
      $("#portion_two").toggle($(this).val() == "button_two"); });
</script>

It does exactly what I wanted to achieve. Radio buttons can be styled later I assume. So I pasted same code to the blade file and guess what? Toggling doesn't work again!!

I think I found the conflict:

<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="{{ asset('js/app.js') }}" defer></script>
</head>

So when I comment Laravel's js line radios work and toggle relevant sections, but as expected all Laravel Bootstrap elements relaying on js are not working, ie. I can't close alerts.

Solution

Solution:

Laravel 5.6 - Do I need to include JQuery or is it already included in the app.js?

defer attribute in <script src="{{ asset('js/app.js') }}" defer></script> makes the js load after the whole page is loaded and scripts I used must be loading before that.

That worked for me.