Checked radio button is not showing DIV content by default

I managed to get the radio buttons working for showing DIV-content and hiding it, when a different one is selected. However I am having an issue. I want to display the Google search by default. I tried adding "checked" to it, however it doesn't work (probably because it's not in there).

I created a JSFiddle for this here: https://jsfiddle.net/f2kk3a8c/

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".box").not(targetBox).hide();
        $(targetBox).show();
    });
});

As you can see the Google radio button is checked, however the corresponding DIV is not being shown by default. When you press the Google radio button it will show the DIV contents correctly (same with the other radio buttons).

Is there an easy workaround for this? Can someone explain what the best method would be to achieve this? If you need more information, please ask. Thanks in advance.

Sidenote: I am using Bootstrap and was using the collapse function first, but I didn't like the effect (slow and didn't like how it loaded the DIV). So that's why I am using the current 'code'.

Solution

You can use trigger() to click the first radio button, below is the updated code:

$('input[type="radio"]').on('click', function() {
  var inputValue = $(this).attr("value");
  var targetBox = $("." + inputValue);
  $(".box").not(targetBox).hide();
  $(targetBox).show();
});

$(document).ready(function() {
  $('input[type="radio"]:first').trigger('click');
});

.box {
  display: none;
}

.control {
  display: inline;
  position: relative;
  padding-left: 15px;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 14px;
}

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control__indicator {
  position: absolute;
  top: 5px;
  left: 0;
  height: 14px;
  width: 14px;
  background: #e6e6e6;
}

.control--radio .control__indicator {
  border-radius: 50% !important;
}

.control:hover input~.control__indicator,
.control input:focus~.control__indicator {
  background: #ccc;
}

.control input:checked~.control__indicator {
  background: #2aa1c0;
}

.control:hover input:not([disabled]):checked~.control__indicator,
.control input:checked:focus~.control__indicator {
  background: #0e647d;
}

.control input:disabled~.control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}

.control input:checked~.control__indicator:after {
  display: block;
}

.control--radio .control__indicator:after {
  left: 4px;
  top: 4px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #fff;
}

.control--radio input:disabled~.control__indicator:after {
  background: #7b7b7b;
}

.select {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  width: 100%;
}

.select select {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding: 10px 15px;
  outline: 0;
  border: 0;
  border-radius: 0;
  background: #e6e6e6;
  color: #7b7b7b;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.select select::-ms-expand {
  display: none;
}

.select select:hover,
.select select:focus {
  color: #000;
  background: #ccc;
}

.select select:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.select__arrow {
  position: absolute;
  top: 16px;
  right: 15px;
  width: 0;
  height: 0;
  pointer-events: none;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #7b7b7b transparent transparent transparent;
}

.select select:hover~.select__arrow,
.select select:focus~.select__arrow {
  border-top-color: #000;
}

.select select:disabled~.select__arrow {
  border-top-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-7">

    <div>
      <label class="control control--radio"> Google
            <input type="radio" name="colorRadio" value="google" checked="checked" />
            <div class="control__indicator"></div>
        </label>

      <label class="control control--radio"> Ondertitels
            <input type="radio" name="colorRadio" value="subtitleseeker" />
            <div class="control__indicator"></div>
        </label>

      <label class="control control--radio"> NZBgrabit
            <input type="radio" name="colorRadio" value="nzbgrabit" />
            <div class="control__indicator"></div>
        </label>

      <label class="control control--radio"> NZBindex
            <input type="radio" name="colorRadio" value="nzbindex" />
            <div class="control__indicator"></div>
        </label>

      <label class="control control--radio"> PostNL
            <input type="radio" name="colorRadio" value="postnl" />
            <div class="control__indicator"></div>
        </label>

      <label class="control control--radio"> MaxMind
            <input type="radio" name="colorRadio" value="maxmind" />
            <div class="control__indicator"></div>
        </label>
    </div>

  </div>

  <div class="col-md-5">

    <div class="google box">
      <div class="google">
        <form action="/action_page.php">
          <input type="text" name="firstname" value="Google">
          <input type="submit" value="Zoeken">
        </form>
      </div>
    </div>

    <div class="subtitleseeker box">
      <div class="subtitleseeker">
        <form action="/action_page.php">
          <input type="text" name="firstname" value="Subtitleseeker">
          <input type="submit" value="Zoeken">
        </form>
      </div>
    </div>

    <div class="nzbgrabit box">
      <div class="nzbgrabit">
        <form action="/action_page.php">
          <input type="text" name="firstname" value="NZBgrabit">
          <input type="submit" value="Zoeken">
        </form>
      </div>
    </div>

    <div class="nzbindex box">
      <div class="nzbindex">
        <form action="/action_page.php">
          <input type="text" name="firstname" value="NZBindex">
          <input type="submit" value="Zoeken">
        </form>
      </div>
    </div>

    <div class="postnl box">
      <div class="postnl">
        <form action="/action_page.php">
          <input type="text" name="firstname" value="PostNL">
          <input type="submit" value="Zoeken">
        </form>
      </div>
    </div>

    <div class="maxmind box">
      <div class="maxmind">
        <form action="/action_page.php">
          <input type="text" name="firstname" value="MaxMind">
          <input type="submit" value="Zoeken">
        </form>
      </div>
    </div>

  </div>
</div>