Choppy Animation in Bootstrap 4 Collapsible Card Design

Creating a card using Bootstrap 4 with a .card-header and .card-block:

<div class="card">
    <div class="card-header">
        <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
            card header
        </a>
    </div>
    <div id="test-block" class="card-block">
        card block
    </div>
</div>

Trying to toggle the card block by clicking the card header using Bootstrap's collapse mechanism, but experiencing choppy animation.

Investigating the reason for this issue. Check out the example on codepen.

javascriptcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Answer №1

Delay issue:

The delay is due to the default padding of 1.25rem added by the .card-block class.

To resolve the delay, remove the card-block class from div#test-block and instead create a nested div with the same class to maintain the necessary padding. This should eliminate the laggy behavior.

Click problem:

Your #test-block does not have the "collapse" class initially, causing the need to add it first. This explains why it works correctly on the second attempt.

To fix this click issue, simply assign the class "collapse" to div#test-block. Adding the "in" class will ensure the panel is open by default e.g. "collapse in".

The code snippet I suggest using:

<div class="card">
    <div class="card-header">
        <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
            card header
        </a>
    </div>
    <div id="test-block" class="collapse">
        <div class="card-block">
            card block
        </div>
    </div>
</div>

Answer №2

Bootstrap 4 is currently in alpha, which may explain why it still has issues. These will likely be resolved in the future.

One workaround I discovered is to collapse the card-block by using the class collapse, and then remove its padding with the following CSS:

.card-block{ padding:0; }

Answer №3

The element with the ID #test-block is initially set to its default state:

    <div id='test-block' class='card block'>

Upon first click, the class transitions to the expanded version like this:

    <div id='test-block' class="card-block collapse in" aria-expanded="true">

This means that the initial state of the div is incorrect. Adjust it to display the correct states collapse in and aria-expanded=true, ensuring that only 1 click is needed.

The reason behind the choppy animation remains a mystery to me. :/

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

In what circumstances should one utilize either the "this" keyword or an event argument?

$("span").on("click",function(event){ event.stopImmediatePropagation(); }) $("span").on("click",function(event){ $(this).stopImmediatePropagation(); }) Can you explain the distinction between these two code snippets and why only one of them is ...

javascriptjquery

Make the navigation bar stay at the top of the page when scrolling past another element with a top position of 100vh

Trying to explain a unique concept here. I want a nav bar fixed in the position of top:100vh, so that as I scroll down and reach the next section, the navbar sticks at the top rather than staying stuck at the beginning with position:fixed top:0. The aim is ...

javascripthtmlcsssass

Tips for ensuring that your website can recall which call-to-action (CTA) has been selected for redirection

I'm attempting to create a bilingual webpage in Spanish and English. My goal is to have a main page where the user selects the language, and once chosen, the page remembers the language preference for future visits instead of prompting the choice agai ...

javascripthtmlcssbutton

remove the text inside a div when the browser window is resized

I am trying to arrange three divs on my website <div class="col-md-4"> Some content #1 </div> <div class="col-md-1></div> <div class="col-md-6"> Some content #2 </div> The first div (col-md-4) contains a g ...

htmltwitter-bootstrapbootstrap-4computer-science

How can escape characters be utilized in the JavaScript split function?

Here are two examples that achieve the same result. I'm curious as to why Option 1 was included in a code example I came across instead of Option 2? What is the significance of the forward/backward slashes in '/\&/'? Option 1: ...

javascript

Hide all div elements except one by toggling them at the same position

I’m diving into the world of jQuery and facing some challenges with the .toggle() function. My goal is to have multiple <div> elements displayed in the same position, but only one visible at a time. When a new <div> is opened, the previous o ...

javascriptjqueryhtmlcsstoggle

Remove inline CSS from HTML elements

Having a large HTML file structured like this: <div style="min-height: 32px; padding: 5px; width: 800px; margin: 50px auto; overflow: auto; font-size: 12px;" class="selectable clearfix selected_layer" id="wrap"> <div class="selectable" id="l1" st ...

javascriptjqueryhtmlcss

Error: The fetch request was unsuccessful [NextJS API]

I keep encountering an error - TypeError: fetch failed after waiting for 300 seconds while requesting an optimization server that requires a response time longer than 300 seconds. The request is being sent from the provided API in NextJS. Is there a way ...

javascriptnext.jsfetch-api

Why isn't the flash message appearing until after I refresh the page or make a second post?

After revisiting Sails.js, I decided to implement flash messages in my app for errors, successes, and alerts. While searching for a solution, I came across this discussion which provided some helpful suggestions that I integrated into my code. Although th ...

javascriptnode.jsexpresssails.js

Mastering the art of utilizing icons in HTML/CSS within Bootstrap

We are in the process of creating a web application using Bootstrap Studio for the frontend. One issue we are facing is that when the window is resized, the icons start overlapping each other. Is there a way to make one icon go under the other? https://i. ...

htmlcsstwitter-bootstrapbootstrap-studio

Unable to disable webpack HMR

I have set up my project using express version 4.14.0, webpack version 1.14.0 with babel and its presets. I obtained this sample webpack configuration from a reliable source: var path = require('path'); module.exports = { entry: './main. ...

javascriptnode.jswebpack

Assigning a Value to a Select Option in a Dynamically Generated Form

I've developed a dynamic form that includes a dropdown menu. I would like this dropdown to display fiscal weeks, and to achieve this, I need to implement a loop within a TypeScript function. form.ts - <div class="col-md-9" [ngSwitch]="field.type ...

javascriptangularangular6dynamic-forms

Utilizing interpolation in Angular to apply CSS styling to specific sections of a TypeScript variable

Suppose I have a variable called data in the app.component.ts file of type :string. In the app.component.html file, I am displaying the value of data on the UI using string interpolation like {{data}}. My question is, how can I apply some css to specific ...

cssangulartypescriptstring-interpolation

Activate the Navbar by clicking on the bar and change the color of the icon

Is it possible to change the background color and icon color when clicking on the bar (active bar)? If not, is there an option to switch the icon with a different color? I've tried modifying my code but haven't seen any changes. Instead of using ...

javascriptphphtmlcssbootstrap-4

Curves are unable to form on borders using the border-radius property

While working on a webpage, I encountered an issue with CSS attributes and table borders. Despite using the border-radius attribute, the border didn't round along with the background; it just stayed at a corner. Below is my code snippet, any help is g ...

htmlcsshtml-table

Exploring the possibilities of using the typeof operator within an Event

I want to log some information if the input value is a number. However, I am facing an issue where it's not working and no bugs are appearing. Here is a snippet of code from CodePen (https://codepen.io/matoung/pen/KBNmPP) let button = document.que ...

javascript

Utilize JavaScript to insert image attributes

I've encountered this issue multiple times, where I face difficulties when attempting to use appendChild to add an img to a div. Below is the code snippet that showcases the problem: var picture = document.createElement("img"); picture.id= "xmark"; ...

javascripthtmlappendchildsetattributecreateelement

Continuous polling with Ajax in Rails does not trigger the display of an alert box

Trying to implement ajax polling using the RailsCast tutorial on ajax polling (#229) but encountering an issue where the alert box doesn't pop up after running the server. Here's the code in app/views/quotes/index.js.erb: alert('Hey') ...

javascriptruby-on-railsajaxruby-on-rails-5ajax-polling

Get ready for 10 AM with the RxJS timer function

I am trying to figure out how to schedule a method in my code using rxjs/timer. Specifically, I want the method to run at precisely 10 AM after an initial delay of 1 minute. However, my current implementation is running every 2 minutes after a 1-minute d ...

javascriptangulartypescriptrxjsobservable

Why won't angularjs interpret my object accurately?

Currently, I am in the process of developing an angularjs application and I have encountered a minor issue. The problem arises when I populate a list of projects and then apply filtering based on certain conditions. Visually, everything appears fine on the ...

javascriptangularjs