Delay the .show class in Bootstrap 4 navbar collapse after disabling the .collapsing class

In Bootstrap 4 collapse functionality, I am looking to remove the delay in displaying the .show class after the .collapsing class.

What I want is for the .show class to appear on the .collapse element immediately after a click event triggers the toggle.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Answer №1

It doesn't seem possible to prevent the application of the .collapsing class to the .collapse element, resulting in a delay. Instead of using Collapse, you can utilize jQuery to toggle the display of the Navbar.

$('[data-toggle=display]').on('click', function() {
    var target = $($(this).data("target"));
    target.toggleClass("d-none d-block");
})

EDIT

Here's how the Collapse component functions...

  • .collapse hides the content

  • .collapsing is applied when the transition starts (the show.bs.collapse event is triggered)

  • .collapsing is removed, and .collapse.show is applied when the transition ends (the shown.bs.collapse event is triggered)

The same process occurs when the element is triggered again, and the hide.bs.collapse and hidden.bs.collapse events are triggered.

The show.bs.collapse event is triggered when the .collapsing class is applied. To add the .show class when the .collapsing class is applied, you could create a handler for the show.bs.collapse event. However, this will not impact the transition animation and there will still be a delay.

Add .show when .collapsing is applied..

$('.navbar-collapse').on('show.bs.collapse', function () {
  $(this).addClass("show");
});

Additionally, remove it on the 'hide' event if desired.

$('.navbar-collapse').on('show.bs.collapse', function () {
  $(this).addClass("show");
}).on('hide.bs.collapse', function () {
  $(this).removeClass("show");
}).

Alternatively, you can override the transition with CSS:

#navbarNav {transition: none;}

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

Choose specific nodes using the XPath query language

I need help with an HTML snippet: <td> <span class="x-cell">something</span> <span class="y-cell">something</span> <span class="z-cell">something</span> A text <span ...

htmlxpath-1.0

What could be the reason for the meta viewport not functioning properly on Android devices with Cordova 5.1.1?

Ever since upgrading my app to cordova 5.1.1, I've noticed that the meta viewport no longer functions properly on Android devices. The app is not displaying correctly as a result. Despite trying various solutions, I am still facing this issue. Is ther ...

htmlcssangularjscordova

Ways to create unique hover effects for images in a filter gallery

I recently downloaded a filter gallery from this link and while everything is working fine, I noticed that the hover effect remains the same for all images. The code snippet responsible for this hover effect looks like this: <div class="portfolio"> ...

jqueryhtmlcssimagehover

I have found that I can load a CSS file using Node Express, however, it seems to be malfunctioning. On the other hand, some

I have added app.use(express.static(path.join(__dirname, 'public'))); to my app.js file. Now I am using bootstrap.css along with my custom CSS file main.css. index.html: ┊ <meta http-equiv="Content-Type" content="text/html; charset=UTF- ...

javascriptcssnode.jsexpress

Implementation demonstration / library for complete URL encoding

Currently, I am developing a Java application that extracts links from HTML and utilizes them to request their content. One particularly challenging area is URL encoding when the intent of the URL author is unknown. Determining whether to use %20 or + can ...

javahtmlhttpparsingbrowser

php retrieve and show data from MySQL database based on selection from dropdown menu

I've encountered an issue where I can retrieve data from a database and display it in a drop-down menu, but I'm not sure how to use the same drop-down list as input within a form. My code retrieves project names from the database and displays the ...

phpjquerymysqlajax

Tips for concealing a Donut Chart when the value is zero and displaying the chart in grey when there is an empty value using

I've recently switched from using ChartJs to EchartsJS in my project, but I'm facing a specific challenge. When all items in the chart have a value of 0, EchartJs still displays all colors equally. However, I want the chart to be hidden in such ...

jqueryechartsdonut-chart

Exploring the World with the vue-i18n Plugin

Recently, I have integrated translation into my app and now I am looking to implement a button event that allows users to change the language on the home page. For this task, I referred to two tutorials: Localization with Vue and Localization with Vue Tut ...

javascripthtmlvue.jslocalizationvue-i18n

Instead of using <div>, try substituting it with a different HTML page

Seeking assistance on an HTML page project that involves jQuery, CSS, and HTML without server-side integration. Encountering an issue when attempting to replace a <div> with content from another HTML file saved on my computer. The main page code sni ...

javascriptjqueryhtmlajaxweb

Utilizing Material UI's React framework for maintaining uniform grid column heights

Take a look at the image provided for context. I am facing an issue with two div elements, where one should occupy 20% of the total browser height and the other should take up 80%. Currently, I am utilizing Material UI Grid for positioning, which looks lik ...

htmlcssmaterial-uigrid

inserting a dynamic variable into a JSON string

My goal is to create a javascript object, var systemName = {"system" : varA}; However, I want the object to be structured like `{"system" :"varA"} where varA contains the variable value but is enclosed in double quotes. I attempted {"system" : "'+ ...

javascriptjqueryjson

An HTML attribute that functions like autofocus in the select tag

Is there a way to set the default focus on a select tag in HTML, similar to how autoFocus works for textboxes? I am looking to make a select tag automatically focused when the page loads. Is there a method to achieve this? ...

html

HTML string decoded incorrectly in CodeIgniter due to encoding error

When I send data that includes an HTML string along with other information from JavaScript to the PHP (Codeigniter) server using AJAX and JSON, I notice that the style information within the HTML string is missing once it reaches the server. Everything els ...

javascriptphphtmlajaxcodeigniter

Guide to creating a toggle button

Can someone help me create a button that toggles between displaying block and display none when clicked? I've been trying to use Classlist.toggle with JavaScript, but I'm not sure if I have the correct classes targeted. let showCart = documen ...

javascripthtmlcss

Using ngForm to implement multiselect options in HTML

Attempting to implement a multiselect dropdown that is tied to a dynamic property receiving data from a JSON script via service. Successfully displayed the data in the dropdown, but encountering abnormalities when adding the multiple attribute within the s ...

htmlangulartypescript

"Enhance Your Website with Dynamic Text Effects using JavaScript

Is there a way to continuously animate text during the loading process of an AJAX request? I've tried implementing various methods, such as using a setTimeout function or an infinite loop, but nothing seems to work for repeating the animation once it& ...

javascripthtmlcssanimation

The Bootstrap 4 component remains visible in XS screen sizes

I have been trying to use the Display Property in Bootstrap 4 after reading the documentation, but I find it more challenging than with Bootstrap 3. In my sidebar, I have two elements: widget-game and last-game, both of which need to be hidden in SM and X ...

bootstrap-4

Change the label's class when the input area is selected

Looking to add a new class to a label when its corresponding input element is in focus. A form consists of 10 input fields and 10 labels, one for each field. const inputFields = document.querySelectorAll('.form-control'); console.log(inputFie ...

javascriptjqueryarrays

Ajax handling all tasks except for adding HTML elements

Having an issue with my basic "Load More on Scroll" AJAX function. The console is showing that the HTML is being sent back from the request, but for some reason, nothing is being rendered on the page. I must be missing something really simple here. $(wi ...

javascripthtmlajax

What is the method for embedding the creation date of a page within a paragraph on Wagtail?

Whenever a page is created in the admin panel of Wagtail, it automatically displays how much time has elapsed since its creation. https://i.stack.imgur.com/6InSV.png I am looking to include the timestamp of the page's creation within a paragraph in ...

pythonhtmlwagtail