Collapse Cards based on the radio button selection - html

Question

I have this .cshtml page where I am just adding in a functionality. Based on a radio button selection the cards should collapse. So basically if Existing user selected then collapseone opens, if New user selected collapsetwo opens. I even want to see how can i align both the cards horizontally. Let me add snippets & images.
<div class="login-box align-content-center">
<div class="login-logo">
<b>Registration</b>
</div>
<div class="card" style="width: 600px">
<div class="card-body login-card-body">
<p class="login-box-msg"></p>
<div class="card-header">
<h3 class="card-title">Select User Type</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary1" name="r1" checked>
<label for="radioPrimary1">
Existing User
</label>
</div>
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary2" name="r1">
<label for="radioPrimary2">
New User
</label>
</div>
</div>
</div>
</div>
</div>
<form action="~/Home/Index" method="post">
<section class="content">
<div class="row">
<div class="col-sm-6">
<div class="card card-primary" id="collapsetwo">
<div class="card-header">
<h3 class="card-title">Existing Company</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="form-group">
<label for="inputCompanyList">Company List</label>
<select id="inputCompanyList" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>Company1</option>
<option>Company2</option>
<option>Company3</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
<div class="card card-secondary" id="collapsetwo">
<div class="card-header">
<h3 class="card-title">Register</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="form-group">
<label for="inputName">Company Name</label>
<input type="text" id="inputName" class="form-control">
</div>
<div class="form-group">
<label for="inputDescription">Zip</label>
<input type="text" id="inputZip" class="form-control">
</div>
<div class="form-group">
<label for="inputCountry">Country</label>
<select id="inputCountry" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>India</option>
<option>Malaysia</option>
<option>Germany</option>
</select>
</div>
<div class="form-group">
<label for="inputCity">City</label>
<select id="inputCity" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>Bangalore</option>
<option>Delhi</option>
<option>Mumbai</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Search</button>
</div>
<!-- /.card-body -->
</div>
</div>
</div>
</section>
</form>
</div>
</div>
<!--Register Card-->
</div>
Some snaps:
current output:
Expected output:
Collapsing based on the radio button selection. Thanks for your help !!

Answer 1

You can try to add <div class="col-sm-6"> separately outside card1 and card2 so that you can align both the cards horizontally.And you can use js to open collapses.Here is a demo:
html:
<div class="login-box align-content-center">
<div class="login-logo">
<b>Registration</b>
</div>
<div class="card" style="width: 600px">
<div class="card-body login-card-body">
<p class="login-box-msg"></p>
<div class="card-header">
<h3 class="card-title">Select User Type</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary1" name="r1" checked onchange="show(this)">
<label for="radioPrimary1">
Existing User
</label>
</div>
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary2" name="r1" onchange="show(this)">
<label for="radioPrimary2">
New User
</label>
</div>
</div>
</div>
</div>
</div>
<form action="~/Home/Index" method="post">
<section class="content">
<div class="row">
<div class="col-sm-6">
<div class="card card-primary" id="collapsetwo">
<div class="card-header">
<h3 class="card-title">Existing Company</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body collapse show" id="collapse1">
<div class="form-group">
<label for="inputCompanyList">Company List</label>
<select id="inputCompanyList" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>Company1</option>
<option>Company2</option>
<option>Company3</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
<!-- /.card-body -->
</div>
</div>
<div class="col-sm-6">
<!-- /.card -->
<div class="card card-secondary" id="collapsetwo">
<div class="card-header">
<h3 class="card-title">Register</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body collapse" id="collapse2">
<div class="form-group">
<label for="inputName">Company Name</label>
<input type="text" id="inputName" class="form-control">
</div>
<div class="form-group">
<label for="inputDescription">Zip</label>
<input type="text" id="inputZip" class="form-control">
</div>
<div class="form-group">
<label for="inputCountry">Country</label>
<select id="inputCountry" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>India</option>
<option>Malaysia</option>
<option>Germany</option>
</select>
</div>
<div class="form-group">
<label for="inputCity">City</label>
<select id="inputCity" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>Bangalore</option>
<option>Delhi</option>
<option>Mumbai</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Search</button>
</div>
<!-- /.card-body -->
</div>
</div>
</div>
</section>
</form>
</div>
</div>
<!--Register Card-->
</div>
js:
<script>
function show(radio) {
if ($(radio).is(':checked')) {
if ($(radio).attr("id") == "radioPrimary1") {
$("#collapse1").addClass("show");
$("#collapse2").removeClass("show");
} else {
$("#collapse1").removeClass("show");
$("#collapse2").addClass("show");
}
}
}
</script>
result: