Condense card displays according to the radio button chosen

I have been working on this .cshtml page and I am trying to implement a new functionality. The goal is to collapse cards based on the selection of a radio button. If an Existing User is selected, then "collapseone" should open; if a New User is selected, then "collapsetwo" opens. Additionally, I want to align both cards horizontally. I will also be adding some code snippets and images for reference.

<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>

Here are some screenshots for reference:

Current Output: https://i.sstatic.net/JsGFL.png Expected Output: https://i.sstatic.net/45kBT.png

The collapsing feature based on radio button selection is the key focus here. Thank you for your support!

htmlcssasp.net-mvcasp.net-corebootstrap-4

Answer №1

To ensure both card1 and card2 are aligned horizontally, you can add 

<div class="col-sm-6">
outside of them separately. Additionally, use JavaScript to control the collapses. Here is a demonstration:

HTML:

<div class="login-box align-content-center">

    <div class="login-logo">
        <a href=""><b>Registration</b></a>
    </div>
    
    // Continue with the rest of the HTML code

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>

Check out the result in this demo: https://i.sstatic.net/XMQKG.gif

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method for connecting my HTML to jQuery code?

Apologies for my lack of experience in coding, but I will try to keep this brief. To put it simply, when I insert my jQuery code directly into the HTML file below the content, it works perfectly - the element I want to animate 'hides' and then & ...

javascriptjqueryhtml

Utilize the JMX HTML adapter in conjunction with Apache Camel's JMX capabilities

I'm currently utilizing the Sun HTML JMX Adapter to display Camel's exposed JMX beans in an HTML format. I've been working with Spring XML to achieve this, but I'm struggling to establish a connection between the adapter and the JMX age ...

javahtmladapterapache-cameljmx

There was a Type Error that was not caught - The property 'owlcarousel' could not be read because it was null

This issue has been addressed previously, but despite implementing the suggestions provided, I am still encountering the same problem. Uncaught typeError: Cannot read property 'owlCarousel' of null I have a Magento store using the Ultimo templat ...

javascriptjquerycssmagento

Offspring of a parent with a "flex: 1" attribute and a grandparent with a "min-height" property defying the "width: 100%" rule

Is it possible to have a hidden footer just below the screen's bottom and allocate the remaining height to content children without inheriting max-height all the way down? The "Grand child" element is not occupying the full height: body { marg ...

htmlcss

The navigation bar components created with Bootstrap are experiencing issues with their active state functionality

I created a Navbar using Bootstrap code but I am facing an issue where the 'active' state is not being applied to the Navbar elements on my webpage. I have been attempting to add and remove the active class on the Navbar elements, but I have bee ...

htmlcssbootstrap-4navbar

What causes the inconsistency in time intervals in the loop?

My goal was to create a simple slider that loops through 3 images, with each image staying visible for 3 seconds before fading out and the next one fading in. However, I encountered an issue: The first image can stay for 3 seconds, but once the loop star ...

javascriptjqueryhtmlcss

integrating html within an input element

I need help adding break tags at the end of each line of code in my input box to prevent it from appearing as one continuous line. I tried encoding the break tag as HTML, but it's not displaying correctly when I type it in. Here is a snippet of what ...

javascriptjqueryhtml

Troubleshooting: The issue with the Inline Styling in the component not working with style={{maxHeight: '443 px', maxWidth: '443 px'}}

Thank you so much for the help in advance! I am currently enrolled in a popular React course on Coursera! In App.js, the menu is rendered as a component. The code for MenuComponent.js is shown below: import React, { Component } from 'react'; ...

reactjsbootstrap-4react-bootstrapinline-styles

Reimagining scrolling through content with a stylish unordered list (a sleek alternative to a select box

After having our company website redesigned by a professional designer, our site now looks much more visually appealing. However, I have encountered difficulties when trying to implement their design using HTML and CSS. One particular challenge is the heav ...

javascripthtmlcssselectdrop-down-menu

Issue with linking CSS file to EJS file in Express.js

After carefully reviewing the setup of my folders and code structure, I am confident that I have correctly linked the CSS to the EJS file. Despite this, I am still facing issues as it is not working properly. To provide a visual reference, I have include ...

javascriptcssnode.jsexpressejs

Resetting the value of a radio button input option to null using Angular2 ngModel

In my Angular2 application, I am attempting to implement radio button inputs using ngModel and value. The goal is to have three options: true, false, and null. However, I am struggling to assign a value of null to one of the inputs. Ideally, when nothing ...

htmlformsangularradio-buttonngmodel

Text encoded in UTF-8 emerges from the surrounding frame

As someone who is relatively new to frontend development, I recently created a blog using a template that utilizes Next.js, Tailwind, and React. However, when I input UTF-8 text in Korean, the text overflows outside of the parent frame on mobile devices. ...

cssreactjsnext.jstailwind-cssprism

What is the best way to customize the appearance of the initial row in each tr cluster?

Looking to add a button for expanding child rows within a datatable, with each group in the table having the same child elements.... The provided CSS currently displays the icon on every row throughout the entire table. td.details-control { backg ...

htmlcssdatatablesgrouping

What is the best way to alter the class of a <div> element with a specific ID?

In the web app, I have a tabbed page that allows users to filter restaurants based on budget and cuisine. The search results are categorized into meals, snacks, and drinks tabs. Each tab is designed as a button with a corresponding window displayed below ...

javascriptjqueryhtmlcsstabs

PHP code within PHP script

I'm currently working on a project with a Wordpress Theme and I could use some assistance. How can I dynamically set the page slug name as the PHP import file name? Example: ( <?php echo basename(get_permalink()); ?> - This code retrieves the ...

phphtmlwordpress

Having difficulty aligning the SVG in the navbar component

Struggling with centering the SVG icon in a sideways navbar using React.js. Despite trying various solutions and researching similar issues, I can't seem to make it work. Any insights on why this is happening? Apologies if the solution is straightforw ...

cssreactjsbootstrap-4

Issue with Div not fully occupying the remaining space on the page

Despite seeming like an easy HTML page and CSS setup, I have run into an issue. My goal is to make a DIV fill up the remaining space on the page and meet with another DIV at the bottom. I've scoured the web and tried various solutions that I found, b ...

htmlcsspositionabsolute

Having trouble with submitting a form using an external button in React?

class Index extends React.Component { state = {isLoading: false} onSubmit = (event) => { console.log('here we go'); event.preventDefault(); // this.checkEmailExistance(); }; render() { return ( ...

javascripthtmlreactjsforms

Developing alternatives for CSS Grid

Currently, I am faced with an intriguing challenge involving a layout that includes a container containing 9 div elements. Each of these divs is assigned one of three classes: column-1, column-2, or column-3. <div class="grid cols-3"> <div cl ...

htmlcssflexboxcss-grid

How can you create a jQuery fade in effect for a single <li> element

I'm in the process of developing a task management app that generates a new li element every time a user adds an item. However, I am facing an issue where fadeIn() is activating for every li on the page whenever a new item is added. Does anyone have s ...

javascriptjqueryhtmlcss