Issues with Bootstrap Columns when toggling hide and show functionality

Currently utilizing Bootstrap 4.3.1, attempting to switch between two divs where one is displayed and the other is hidden.

Functionality is as expected, however, there seems to be an issue with Bootstrap columns not rendering properly within the initially hidden div due to the CSS used to hide it (display:none;)

So - form1 is initially hidden while form2 is visible.
Clicking a button toggles their visibility.

The toggle works, but form1's display appears like:
blah blah
blah blah
blah blah

Instead of being in three columns (col-md-4):
blah blah | blah blah | blah blah

Here is the code snippet:

        $('.togglebutton').on('click', function (e) {
            var frm = $(this).closest('.frm');
            frm.find('.form1').toggle(200, 'swing');
            frm.find('.form2').toggle(200, 'swing');
        });
    
        .hidden {display:none !important;}
    
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.min.css" integrity="sha256-D9AvR0EzkNZoWZVSvI3ch+uf/Z5izrIpcbsykVphwPU=" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css" integrity="sha256-dARYuC3pd0wa/7R4Hkt/sR2zfLHCgbnVAQ2sPwhNe0A=" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <div class="row frm">
            <div class="row form1 hidden">
                <div class="col-md-4">  
                    1blah blah   
                </div>
                <div class="col-md-4">  
                    1blah blah 
                </div>
                <div class="col-md-4">
                    1blah blah
               </div>
           </div>
           <div class="row form2">
               <div class="col-md-4">
                   2blah blah
               </div>
               <div class="col-md-4">
                    2blah blah
                </div>
                <div class="col-md-4">
                    2blah blah
                </div>
            </div>
         </div>
         <button class="btn btn-outline-success togglebutton" type="submit">Edit</button>

Tried various methods such as using '.d-none' from Bootstrap instead of '.hidden', and utilizing 'collapse' with jQuery, but none have resolved the column display issue in form1.

Any insights or suggestions would be highly appreciated.

jqueryhtmlcssbootstrap-4

Answer №1

Make sure to include the row class in each form division.

Note 1: I have adjusted the column size to small for easier snippet readability, but you can keep it as per your requirements.

Note 2: I have made changes to the JavaScript code to ensure the toggle button functions correctly in the example.

$(".togglebutton").on("click", function(e) {
    $(".form1").toggleClass("hidden");
    $(".form2").toggleClass("hidden");
  });
.hidden {display:none !important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">
<button class="togglebutton">TOGGLE ME!!</button>
<div class="frm">  
        <div class="form1 row hidden">  
            <div class="col-sm-4">  
    blah blah1  
     </div>
    <div class="col-sm-4">
    blah blah1
    </div>
    <div class="col-sm-4">
    blah blah1
    </div>
    </div>
    <div class="form2 row">
    <div class="col-sm-4">
     blah blah2
    </div>
    <div class="col-sm-4">
    blah blah2
    </div>
    <div class="col-sm-4">
    blah blah2 
    </div>
    </div>
    </div>

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

Is it necessary to include extra spaces following the input?

My HTML code looks like this: <label> <input type="checkbox"> Print document </label> One issue I am facing is that the "Print document" text is always stuck to the checkbox. I am unable to add "Print Document" in a new element or contr ...

htmlcss

The art of organizing information: Tables and data management

Looking for a solution with a table: <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> Trying to format the cells to display as: 1 2 3 4 ...

htmlcss

Having trouble with a JavaScript function and tag that don't seem to be working in Chrome, but function well in Mozilla Firefox. Can anyone provide assistance with

Below is the code for creating two dropdowns: one for "Property Type" and the second for "Property Sub Type". This code works fine in Firefox but not in Chrome. When selecting "residential" as the property type, only residential values will appear in the ...

javascripthtmlgoogle-chromejspbootstrap-4

Creating a dynamic and adaptive horizontal SVG line for your website

Understanding how SVGs function is still a bit unclear to me. I know that the viewBox property plays a role in scaling SVGs, and I have come across advice suggesting not to specify height and width attributes when creating responsive SVGs. While there are ...

htmlcsssvg

Automate the population of input fields

I am working on a React application that utilizes Bootstrap. I have an input field that I want to automatically fill with a name when the user clicks a button. Initially, this input field should be empty, as the variable name = "". When the butto ...

javascriptreactjsbootstrap-4react-bootstrap

The function of window.location is not responsive when used in conjunction with an ajax

The main page redirect occurs in 2 scenarios: When the user clicks logout When the session expires Code for logout functionality: $("#logoutLink").click(Logout); function Logout() { $.post("Logout", { antiCSRF: '{{acsrf}}&apo ...

javascriptjqueryajax

The JSON output from a C# WebMethod does not impact the functionality of a JQuery DataTable

I've hit a roadblock with this persistent issue, encountering different errors each time that hinder my progress towards the end goal. My current challenge involves using a jQuery table plug-in and struggling to receive a proper Json response from my ...

c#jqueryasp.netdatatableswebmethod

How can I verify the submitHandler function using the JavaScript id?

Is there a way to implement a submitHandler on an id for validation purposes? I would like to specify a specific id to handle the validation. Here is an example of the current code: $("#validate").validate({ rules: { "name-contact": { ...

javascriptjqueryjquery-validate

CodeMirror - Issue with setting AutoComplete "options" correctly

I've been using CodeMirror and trying to style the autocomplete pop up with CSS. It's been a challenge because the pop up disappears when I inspect styles and make changes. I came across some code in show-hint.js that looks like this: if (optio ...

cssautocompletecodemirror

Getting JSON with duplicate keys in JavaScript can be achieved by parsing the data using a custom function

I am attempting to retrieve JSON from a URL, but I have encountered an issue where the response object is removing duplicate keys. Is there a way to fetch the JSON without eliminating these duplicates? Below is my JavaScript code: $('document'). ...

javascriptjqueryhtmljson

How can the title of a link be hidden in a popup panel?

Seeking assistance for a popup panel issue. When you click on the black ffff button, a popup panel appears with the text ffff having a blue shadow in the top left corner that disappears when clicked. How can I remove this? Here's the link: <a class ...

javascripthtml

How can one retrieve an element based on its attribute?

Below is a custom tag/directive that I am using: <tile class="ng-scope gridster-item" tilevalue="1" gridster-item="tile" row="0" col = "0" ng-repeat="tile in selectedTiles"> </tile> I'm trying to figure out how to set focus on this eleme ...

javascriptjqueryhtmlcssangularjs

The canvas map has an unseen boundary on the right, causing all other div sections to be

When I set the width of my google map canvas to 80%, the map itself fills that percentage but leaves a wide space to the right of the canvas, taking up the remaining 20% of the screen. This creates an issue because my div cannot be placed in that space. ...

htmlcsscanvasmaps

Conceal the div element without revealing it beforehand

Is there a method to conceal a div without it initially loading? When I attempt to hide the div, it briefly appears for about 0.5 seconds before disappearing, which makes the animation look unattractive. Is there a way to prevent this, or am I approaching ...

javascriptjquery

Rearrange the order of items on mobile devices

I currently have a row in Bootstrap with two columns that stack on top of each other for larger screens. However, the order of the columns is reversed on desktop, with 'one' appearing before 'two'. Is there a simple way to rearrange the ...

htmlcsstwitter-bootstrapbootstrap-4

Resolving TokenMismatchException when deleting with Laravel and AJAX

I am attempting to send a delete request using ajax. However, I am encountering a persistent issue where I always receive a TokenMismatchException even after including X-CSRF-TOKEN in the request header. Can anyone provide insight into what I might be do ...

phpjqueryajaxlaravel

What is the reason behind the functionality of inline-block?

As a beginner in html and css, I am facing an issue with displaying two h3 elements on the same line. I have tried using display:inline-block, but it's not working as expected. You can check out an example on jsfiddle here. I have provided 4 different ...

htmlcss

Restoring list item to standard CSS styling

I am having trouble with the alignment of my links. They are currently displayed in a horizontal manner instead of vertically like this: First link Second link Third link The current layout shows the links next to each other as follows: Firs ...

htmlcsshtml-listsitems

What is the best way to dynamically adjust the size of a Google map on my website automatically

I need assistance with placing a Google map on a webpage along with textboxes in the div below it: <div id="map_area"> <div id="map_canvas"></div> </div> <div id="date_range"> <input type="text" id= ...

csshtmlheight

The mobile website is not adjusting to the viewport size as expected

I'm currently working on a website and experimenting with responsive design. Unfortunately, I'm facing an issue where every mobile browser is not scaling the site properly. Regardless of the browser, the site appears as 1000px or wider. I have at ...

htmlmobileresponsive-design