Jquery show hide div if radio selected-Twitter bootstrap

kmldlc
May 14, 2020
120 views
2 votes
3 Answers

i’m working on some project,
is what i’m trying possible ?
the code i try to write is below and this is what i’m trying to do:

i will generate much more collapses from my-db and row id’s and href’s will be generated automatically.

i want to write jquery script to show hide related div’s via radio buttons in each row.

thanks in advance.

$('.row').each(function() {
  var rowID = $(this).data('row-id');
  var radioType = $(this).children().data('radio-type');
  $('input[type="radio"]').on('change', function() {
    if (radioType == 'personal') {
      $('#personal-div').show();
    } else if (radioType == 'business') {
      $('#business-div').show();
    } else{
    return;
    }
  }).trigger('change');
});

.radio-hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div clas="col">
      <div class="title">
        <a href="#row01" data-toggle="collapse">Title - 1</a>
      </div>
      <div class="title">
        <a href="#row02" data-toggle="collapse">Title -2</a>
      </div>
    </div>
  </div>
  <div class="row collapse" data-row-id="0" id="row01">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-1" data-radio-type="personal" checked>
      <label>Business</label>
      <input type="radio" name="radio-1" data-radio-type="business">
      <div class="radio-hide" id="personal-div">
        personal information
      </div>
      <div class="radio-hide" id="business-div">
        business information
      </div>
    </div>
  </div>
  <div class="dropdown-divider"></div>
  <div class="row collapse" data-row-id="0" id="row02">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-2" data-radio-type="personal">
      <label>Business</label>
      <input type="radio" name="radio-2" data-radio-type="business" checked>
      <div class="radio-hide" id="personal-div">
        personal information
      </div>
      <div class="radio-hide" id="business-div">
        business information
      </div>
    </div>
  </div>
</div>

Answers

Chosen as BEST ANSWER

i have come up with, it's working but any help still appreciated if it is incorrect.

$('.row').each(function () {
        var row = $(this);
        row.find('input[type=radio]').on('change', function () {
            var radioType = $(this).data('radio-type');
            if ( $(this).is(':checked')){
                row.find('.radio-hide').hide();
                row.find('.' + radioType).show('slow');
            }else {
                return;
            }
        }).trigger('change');
    });

.radio-hide{display:none;}

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div clas="col">
      <div class="title">
        <a href="#row01" data-toggle="collapse">Title - 1</a>
      </div>
      <div class="title">
        <a href="#row02" data-toggle="collapse">Title -2</a>
      </div>
    </div>
  </div>
  <div class="row collapse" data-row-id="0" id="row01">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radiotype" data-radio-type="personal" checked="checked">
      <label>Business</label>
      <input type="radio" name="radiotype" data-radio-type="business">
      <div class="radio-hide personal">
        personal information
      </div>
      <div class="radio-hide business">
        business information
      </div>
    </div>
  </div>
  <div class="dropdown-divider"></div>
  <div class="row collapse" data-row-id="0" id="row02">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radiotype-2" data-radio-type="personal">
      <label>Business</label>
      <input type="radio" name="radiotype-2" data-radio-type="business" checked="checked">
      <div class="radio-hide personal">
        personal information
      </div>
      <div class="radio-hide business">
        business information
      </div>
    </div>
  </div>
</div>

(Edit)

You can control the radio buttons to show or hide specific divs in CSS like this:

$('.row').each(function() {
  var rowID = $(this).data('row-id');
  var radioType = $(this).children().data('radio-type');
  $('input[type="radio"]').on('change', function() {
    if (radioType == 'personal') {
      $('#personal-div').show();
    } else if (radioType == 'business') {
      $('#business-div').show();
    } else{
    return;
    }
  }).trigger('change');
});

.radio-hide {
  display: none;
}

input#id1:checked ~ #personal-div{
  display:block;
}

input#id2:checked ~ #business-div{
  display:block;
}

input#id3:checked ~ #personal-div{
  display:block;
}

input#id4:checked ~ #business-div{
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div clas="col">
      <div class="title">
        <a href="#row01" data-toggle="collapse">Title - 1</a>
      </div>
      <div class="title">
        <a href="#row02" data-toggle="collapse">Title -2</a>
      </div>
    </div>
  </div>
  <div class="row collapse" data-row-id="0" id="row01">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-1" data-radio-type="personal" id="id1" checked>
      <label>Business</label>
      <input type="radio" name="radio-1" data-radio-type="business" id="id2">
      <div class="radio-hide" id="personal-div">
        personal information
      </div>
      <div class="radio-hide" id="business-div">
        business information
      </div>
    </div>
  </div>
  <div class="dropdown-divider"></div>
  <div class="row collapse" data-row-id="0" id="row02">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-2" data-radio-type="personal" id="id3">
      <label>Business</label>
      <input type="radio" name="radio-2" data-radio-type="business" id="id4" checked>
      <div class="radio-hide" id="personal-div">
        personal information
      </div>
      <div class="radio-hide" id="business-div">
        business information
      </div>
    </div>
  </div>
</div>

I added a conditional for each radio group and it works though it is not as dynamic as you may be looking for.

$('.row').each(function() {  
  $('input[type="radio"]').change(function() {    
    if($('input[name=radio-1]:checked').val() === "personal"){
    console.log($(this).val());
      $('#personal-div').show();
      $('#business-div').hide();
    }else if($('input[name=radio-1]:checked').val() === "business"){
    console.log($(this).val());
      $('#business-div').show();
      $('#personal-div').hide();
    }
  });
  $('input[type="radio"]').change(function() {    
    if($('input[name=radio-2]:checked').val() === "personal"){
    console.log($(this).val() + '2');
      $('#personal-div2').show();
      $('#business-div2').hide();
    }else if($('input[name=radio-2]:checked').val() === "business"){
    console.log($(this).val());
      $('#business-div2').show();
      $('#personal-div2').hide();
    }
  });
});

.radio-hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div clas="col">
      <div class="title">
        <a href="#row01" data-toggle="collapse">Title - 1</a>
      </div>
      <div class="title">
        <a href="#row02" data-toggle="collapse">Title - 2</a>
      </div>
    </div>
  </div>
  <div class="row collapse" data-row-id="0" id="row01">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-1" value="personal">
      <label>Business</label>
      <input type="radio" name="radio-1" value="business">
      <div class="radio-hide" id="personal-div">
        personal information
      </div>
      <div class="radio-hide" id="business-div">
        business information
      </div>
    </div>
  </div>
  <div class="dropdown-divider"></div>
  <div class="row collapse" data-row-id="0" id="row02">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-2" value="personal">
      <label>Business</label>
      <input type="radio" name="radio-2" value="business">
      <div class="radio-hide" id="personal-div2">
        personal information
      </div>
      <div class="radio-hide" id="business-div2">
        business information
      </div>
    </div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.