Collapse in Bootstrap without any Animation

How can I add animation to the Bootstrap Collapse feature on my website? I am using an icon from the Font Awesome library to trigger the collapse effect, but currently, it just pops up without any animation. What could be causing this issue?

You can view my code here

<div class="container col-sm-12 banner">
    <i class="fa fa-plus" aria-hidden="true" data-toggle="collapse" data-target="#moreInfo"></i>
</div>
<div id="moreInfo" class="collapse">
    <div class="hiddenInfo">
                123
    </div>
</div>
htmlcsstwitter-bootstrap

Answer №1

The issue you are facing is due to an incorrect implementation of Bootstrap's Grid system. The classes .container and .col-sm-12 should not be used together as it leads to floating errors that conflict with the transition effect.

By properly utilizing Bootstrap's Grid and fixing any float related problems, the transition will animate correctly.

.banner {
  background-color: #1194f0;
  padding: 20px;
}

.banner i {
  font-size: 40px;
  float: right;
  line-height: 50px;
}

.hiddenInfo {
  background-color: black;
  color: white;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="banner clearfix">
        <i class="fa fa-plus" aria-hidden="true" data-toggle="collapse" data-target="#moreInfo"></i>
      </div>
    </div>
    
    <div class="col-sm-12">
      <div id="moreInfo" class="collapse">
        <div class="hiddenInfo">
          123
        </div>
      </div>
    </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

Retrieve numerical data from the element and enclose it within a span tag

My goal was to indent a number, but the HTML generated from my CMS is making it difficult to target the number and apply a specific style. <div class="content"> <b>01. Header</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

jquerycsstexttextnode

Looking for a smart way to extract all the selected elements from a form?

I am attempting to retrieve all the checked items from this form using JavaScript. I have looked at previous solutions, but none of them fit my requirements. <form id="checkform" class="container" style="margin-top:20px;"> <input type="checkb ...

javascriptjqueryhtml

How to retrieve a value from an Angular form control in an HTML file

I have a button that toggles between map view and list view <ion-content> <ion-segment #viewController (ionChange)="changeViewState($event)"> <ion-segment-button value="map"> <ion-label>Map</ion-label> & ...

javascripthtmlangulartypescriptionic4

What is the best way to arrange form inputs in a single row?

My form consists of three input boxes. While the first two inputs are single line, the third is a description field with 10 rows set as default. However, for some reason, this third box is not aligned properly with the other two. Please refer to the screen ...

htmlcss

What is the best way to remove headers and footers programmatically in print pages on Safari using JavaScript?

Struggling with eliminating the header and footer on print pages in Safari using JavaScript? While disabling the header and footer manually can be done through print settings in most browsers, my aim is to automate this process with code to ensure that use ...

javascriptcsssafari

The dropdown menu is not appearing in the correct position when clicked

https://i.stack.imgur.com/fMyZQ.jpg Hello there, this link appears normal before clicking on it. But once clicked, it moves to the top of the page like so: https://i.stack.imgur.com/yZ0R0.jpg You can clearly see the difference. I have also provided the c ...

javascripthtmlcss

Tips for utilizing PrependTo dynamically on every element

I am facing a requirement that involves prepending an element with a specific class to its sibling with another class. While I have managed to accomplish this for the first occurrence, it seems to fail for all other elements within the same div. Below is t ...

htmljquery

Transferring an HTML file to a destination stream

Currently, I'm in the process of constructing a proxy server. One of the tasks I'm tackling involves blocking specific URLs. I have developed a simple HTML page that is supposed to display whenever a blocked URL is requested, but unfortunately, ...

javahtmlproxyserver

What is the best way to arrange a bootstrap .container?

I've been struggling to position a content DIV on a bootstrap carousel, but so far I haven't been successful in figuring it out. Below is a screenshot of the current output from my code, which is not what I am aiming for. What I'm trying t ...

htmlcsstwitter-bootstrapcss-position

Running PHP code within an HTML file served by PHP

A unique and innovative approach was taken by incorporating a DIV element in the HTML code, which dynamically populates with content from the main_login.php file. The main_login.php file plays a crucial role in loading the homepage with member-specific con ...

phphtml

Create an XPath by utilizing the class and text attributes of a div element

Struggling to create a relative xpath for use with webdriver, none of the ones I've attempted seem to be working. Here is my Web Element: <div class="pa-PrimaryNavWidget-hyperlink" style="color: rgb(255, 255, 255); cursor: default; background-col ...

htmlxpathselenium-webdriverautomation

Is there a way to locate classes containing underscores within them using Selenium?

Having trouble scraping a webpage with a class name containing an underscore, specifically this element: <span class="s-item__time-left">30m</span> == $0 I attempted to locate it by class name: time = driver.find_elements_class_name("s-item_ ...

pythonhtmlseleniumweb-scrapingelement

Steps for storing div content (image) on server

Currently in the process of developing a web application that allows users to crop images. The goal is for users to have the ability to email the URL so others can view the cropped image, ensuring that the URL remains active indefinitely by storing every c ...

javascriptphphtml

The function attached to the `click` event of `#cart-continue` is not invoking

I'm currently working on implementing a navigation to a specific anchor tag when the user clicks the continue button on the cart page. This project involves a mobile application built with Cordova, and the function call is done using jQuery. Here is ...

javascriptjqueryhtmlcordova

Learn how to access an array within an object using JavaScript and an API URL

Trying to fetch data from the swapi API to display film titles using jQuery. Below is the JavaScript code: $(function(){ function promiseTest(){ return $.ajax({ type: 'GET', url: 'https://swapi.co/api/people/', } ...

javascriptjqueryhtmlajax

Conceal a particular row in SharePoint by utilizing JavaScript with jQuery

I'm facing an issue with SharePoint 2010 where the _cts folder is visible in all document libraries. Despite my efforts to research and find a solution, I have been unsuccessful so far. For now, my workaround is to hide the entire row. Here's a ...

jquerycsssharepoint

Tips for globally overriding MUIv4 class in JSS for nested themes

Summary: Skip to EDIT2 MUIv4 has generated the following classes for me based on my nested theming: <label class="MuiFormLabel-root-121 MuiInputLabel-root-113 MuiInputLabel-formControl-115 MuiInputLabel-animated-118 MuiInputLabel-shrink-117 M ...

javascriptcssreactjsmaterial-ui

Removing the rows that do not contain a table - nested div elements within other div elements

I am trying to create stripped rows with "complex" children, but I'm having trouble figuring out how to do it. I am using bootstrap, although I'm not sure if that makes any difference! This is what I have attempted so far: https://jsfiddle.net/ ...

htmlcssbootstrap-4css-selectors

Showing the Datepicker from jQuery right in the middle of the screen

Here's the generated code as default: <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper- clearfix ui-corner-all ui-datepicker-multi ui-datepicker-multi-2" style="width: 34em; position: absolute; left: ...

javascriptjquerycss

The significance of the "$=" or "?=" symbols in lit-element illustrations

I'm struggling to comprehend the purpose of ?= or $= in these two instances: First Example: Lit-Element README <div id="box" class$="${this.uppercase ? 'uppercase' : ''}"> <slot>Hello World</slot> </div> ...

javascripthtmlweb-componentlit-element