"Struggling with a Bootstrap problem in my Accordion Table

I'm working with a Bootstrap table that includes an accordion feature.

My goal is to have the second row hidden by default.

However, when I click to reveal it, the table shifts.

How can I smoothly animate the opening without causing any shifting?

<table class="table table-hover">
<tbody>
    <tr data-bs-toggle="collapse" href="#collapse">
        <td>Info</td>
        <td>Some more Info</td>
        <td>And some Info</td>
    </tr>
    <tr id="collapse" class="collapse">
        <td>Hidden by default</td>
        <td>Hidden by default</td>
        <td>Hidden by default</td>
    </tr>
</tbody>

Check out this demo

jquerycssbootstrap-5bootstrap-tablebootstrap-accordion

Answer №1

I suggest using jQuery's fadeToggle() function along with the selector attribute

To implement this, simply delete the 

data-bs-toggle="collapse"
from the first tr element

$("tr[href$='#collapse']").click(function() {
  $(this).next("tr#collapse:first").fadeToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64060b0b10171016051424514a554a57">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa9a5b8af8af8e4fbfae4f8">[email protected]</a>/dist/umd/popper.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23414c4c57505751425363160d120d10">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-hover">
<tbody>
    <tr href="#collapse">
        <td>Info</td>
        <td>Some more Info</td>
        <td>And some Info</td>
    </tr>
    <tr id="collapse" class="collapse">
        <td>Hidden by default</td>
        <td>Hidden by default</td>
        <td>Hidden by default</td>
    </tr>
</tbody>

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

The div element continuously wraps its content when the browser size is reduced

Is there a way to prevent a div from wrapping or shifting below when resizing the browser to the left? I want this specific box to remain fixed in its position, causing the user to use the horizontal scroll bar to view it while everything else on the pag ...

htmlcss

Font Awesome solely alters the font size within html, rather than css

<i class="fa fa-graduation-cap" aria-hidden="true" style="font-size: 50px;"></i> It's functioning properly. .fa-graduation-cap { margin-top: 38px; color: #E46A6B; font-size: 50px; } Not working too well. This issue is new to me. Any th ...

cssfont-awesome

Tips on anchoring a footer to the bottom of a webpage following a loop in PHP

After running a PHP file with some HTML, I noticed that the footer is not staying at the bottom of the page as intended. It seems to be overlapping with the products or leaving empty space after them due to changes in the DOM. If anyone has insight on how ...

phphtmlcsswhile-loopfooter

Consolidating multiple inputs into a single saved value

How can I combine three input values into one input field using onchange event in JavaScript? <script type="text/javascript"> function updateInput($i){ $('updateval').val($i); } </script> <input type="text" onchange="updat ...

javascriptjquery

Clever method for enabling image uploads upon image selection without needing to click an upload button using JQuery

Is there a way to automatically upload the file without having to click the upload button? Detail : The code below shows an input field for uploading an image, where you have to select the file and then click the "Upload" button to actually upload it: & ...

javascriptphpjqueryhtmlcss

Manipulating an HTML <div> element to display its value as a suffix in another <div> within the HTML code

I'm attempting to combine and show text along with content from another <div> as the modal-header, but it's not displaying correctly. When I give an ID to the modal-header, the *&times;* symbol disappears. This is how my modal-header l ...

htmlcss

Enhancing navigation with creative hover effects

I've noticed a trendy effect on several websites and I'm curious about how it's done For example: When you hover over one of the navbar links, it appears as a button rather than a differently colored text link. How can I achieve this? I am ...

htmlcssreactjstwitter-bootstrapbootstrap-5

Encountering an Unexpected Token Error While Parsing JSON with jQuery

Utilizing the Envato API with jQuery to collect user stats is my current project. An example JSON response that I will display is as follows: { "new-files-from-user":[ { "thumbnail":"http://3.s3.envato.com/files/60560.jpg", "tags":"", "use ...

javascriptjqueryjsonapi

Shifting the MUI DataGrid Pagination table to the left with CustomPagination: A step-by-step guide

Hey everyone, I am currently diving into the MUI data grid to gain a better understanding. In order to meet my design requirements for a table view, I have incorporated the DataGrid component from MUI. For pagination, I am utilizing their custom implementa ...

javascriptcssreactjsmaterial-ui

Retrieving the ID and value of a specific dropdown list using jQuery from an array of dropdown lists

My HTML structure looks like this: <?php foreach($active_brand as $brand) { ?> <select name="selector" id="selector"> <?php foreach($options as $option) { ?> <option <?php if($brand['State'] == $option) { ?& ...

javascriptjqueryselectlist

Utilizing a switch statement in Jquery to target specific input elements for focus

My Objective As a user presses enter, I want to target specific input elements with a data-index attribute value between 0-2 and of type text. Then, I plan to check their attribute values using a switch statement to perform certain actions. Presented bel ...

javascriptjquery

The comparison between createElement() and AJAX response

Currently, my website has a login form that updates the page with user data through AJAX after successful login. To maintain semantic integrity, I use JavaScript to remove the login form from the page once the user is logged in. However, when the user lo ...

javascriptjqueryhtmlajax

How to smoothly fade out content when hovering over a menu item in HTML<li> tags

Hi there, I have encountered a problem and could really use your assistance. I am attempting to create a menu that displays content when you hover over an li tag. The first content should always be visible when hovering over the first li option or if no l ...

javascriptjqueryhtmlcss

The dynamically created array length is indicating as null

Although this question has been asked numerous times, most answers are in plain JavaScript. I have a function that generates an array with product data. This array is then utilized in another function to retrieve new data via JSON. $(function(){ var p ...

jqueryjson

Include a model attribute when making an AJAX POST request

I made an ajax POST call with JSON data and attempted to set a model attribute in the POST method, but unfortunately it doesn't seem to be working as expected. Here's the request in the controller: @RequestMapping(value="reubicar/idhu", method= ...

jqueryajaxspring-mvc

Dealing with a 404 error when using the JQuery AJAX PUT method in ASP.NET MVC

My issue arises when attempting to update my data in ASP.NET MVC using jQuery AJAX with the PUT method. I am encountering a 404 error, indicating that my controller cannot be found. However, everything works fine when I use the GET or POST methods. What ...

jqueryajaxasp.net-mvc

Executing several Ajax requests involving MySQL queries and session variables

Within my company, I created a portal that contains numerous ajax calls. Each ajax call, in turn, utilizes mysql and session variables within the target script. The process for each script involves: page.php $.ajax({ type:"POST", ...

phpjquerymysqlajaxsession

Adjust the Bootstrap flex settings to display only 3 cards instead of the default 4 cards - HTML

We currently have a bootstrap setup that displays 4 horizontal scroll cards by default. However, we are looking to only show 3 cards in view and allow the 4th card to be viewed by scrolling. Code On mobile view, the code is still displaying 4 tiles even ...

htmlcsstwitter-bootstrapbootstrap-4

Select an HTML element that does not have a class or ID attribute

Is there a way to select and apply styles to a div that is nested within another div without any id or class? <div class="wrapper"> <div> </div> <div> </div> <div> </div> </div> Wh ...

htmlcss

What is the process for verifying that a checkbox is unchecked through the use of Ajax and PHP?

I am working with a checkbox element in my form. Here is the code: <input type="checkbox" value="yes" id="checkBox"> This checkbox is part of my form, and I am sending the form data to a PHP file using Ajax: var check = $('#checkBox').v ...

phpjqueryhtmlajax