Radio button with tabs

by Zsanett Tamás

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container pb-5">
  <div class="form-group mb-0 pt-5">
    <h4 class="text-uppercase dark-purple-text pt-5"><strong>Válassza ki a kívánt kalkulátort!</strong></h4>
    <ul class="ml-0 mb-5 mt-3 nav" id="calculatorTabs" role="tablist">
      <li class="custom-control custom-radio custom-control-inline mr-5 active">
        <input type="radio" class="custom-control-input" id="vat" value="1" name="calc" checked>
        <label class="custom-control-label pr-1 text-uppercase" for="vat">
           <strong>Bruttó</strong>
        </label>
      </li>
      <li class="custom-control custom-radio custom-control-inline">
        <input type="radio" class="custom-control-input" value="2" id="net" name="calc">
        <label class="custom-control-label text-uppercase" for="net">
           <strong>Nettó</strong>
        </label>
      </li>
    </ul>
  </div>
  <div id="calcContent">
    <div id="calcPanel-A">
      <div class="row mt-5">
        <div class="col-12">
          <div class="calc-card card">
            <div class="card-header">
              <div class="row">
                <div class="col-12 col-md-6">
                  <h4 class="text-center"><strong>Megnevezés</strong></h4>
                </div>
                <div class="col-12 col-md-3">
                  <h4 class="text-center"><strong>Értékek</strong></h4>
                </div>
                <div class="col-12 col-md-3">
                  <h4 class="text-center"><strong>Adatok</strong></h4>
                </div>
              </div>
              <!-- row end -->
            </div>
            <!-- card-header end -->
            <section class="row pl-5 pl-md-3 pr-5 pr-md-3 pt-3 pb-3 pb-md-0">
              <div class="col-12 col-md-6">
               ...

SCSS

$link: #563d7c;
$bg-container: #ddd;
$bg-header: #25baed;
$bg-card: #fff;
$card-color: #000;

.container {
  background-color: $bg-container;
  a {
    color: $link;
  }
  .calc-card.card {
    .card-header {
      background-color: $bg-header;
    }
    background-color: $bg-card;
    color: $card-color;
  }
}

JavaScript

function showCalculatorContent () {
    let tabA = $('#calcPanel-A');
    let tabB = $('#calcPanel-B');
    tabB.hide();
    $('#calculatorTabs .custom-radio input:radio').change(function () {
        if ($(this).val() === '1') {
            tabA.show();
            tabB.hide();
        } else {
            tabA.hide();
            tabB.show();
        }
    });
}

$( document ).ready(function() {
    showCalculatorContent();
});