Collapse Cards based on the radio button selection

user_16044437 0
Viewed 161

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">
        <a href=""><b>Registration</b></a>
    </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: Current output

Expected output: Expecting the output to be something like this

Collapsing based on the radio button selection. Thanks for your help !!

bootstrap-4 asp.net-core asp.net-mvc css html
1 Answers

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">
        <a href=""><b>Registration</b></a>
    </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: enter image description here

user_135937360
Related