How to stop Bootstrap collapsible items from "shifting"

I recently integrated a Bootstrap collapse plugin to manage my list of common inquiries:

https://jsfiddle.net/2d8ytuq0/

<ul class="faq__questions">
  <li>
    <a href="#" data-toggle="collapse" data-target="#faq__question_1">..</a>
    <p class="collapse" id="faq__question_1">...</p>
  </li>
</ul>

Upon collapsing back the detailed description, I noticed that there is a slight "jump". This may be due to the bottom margin of the p element. Even after attempting to replace it with padding-bottom, the issue persisted. Is there a solution to rectify this without affecting the original layout?

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

This issue arises because the collapsed element has a margin-bottom:15px.

Your updated HTML structure

<div class="collapse" id="faq__question_1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nesciunt rerum mollitia nobis corporis sint error quaerat cupiditate animi doloribus! Voluptas dolores, incidunt perspiciatis labore velit libero minus consequuntur blanditiis.</p>
</div>

Answer №2

To fix the margin property, you can apply this custom CSS code which will work perfectly:

.faq__questions > li p {
    margin: 0;
}

Answer №3

To enhance its visual appeal, you can incorporate a CSS transition.

I introduce an active state to the panels and include a CSS transition on the margin-top.

Javascript

// Applying an active class to unfold panel in the FAQs accordion
$('.faq__questions').on('show.bs.collapse', 'li', function () {
    $(this).addClass('active');
});

$('.faq__questions').on('hide.bs.collapse', 'li', function () {
    $(this).removeClass('active');
});

CSS

.faq__questions li .collapse{
    margin-top: 0;
    transition: all .2s ease-in-out;
}

.faq__questions li.active .collapse{
    margin-top: 30px;
}

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

Retrieving information from a function within a Node module

Struggling to get data returned from a function in my Node module. I've researched and read but can't seem to crack it. Using the request plugin to fetch JSON data from an API and aiming to pass that data back for use. Below is my module code: ...

javascriptnode.jsexpress

Tips for troubleshooting Node.js React Express applications

Having a background in traditional programming, I am used to putting breakpoints in code and having the debugger take me directly to the problematic section when executed. However, as I delve into web app development, it seems that debugging is limited to ...

javascriptnode.jsreactjsexpressdevelopment-environment

Tips for creating responsive designs with specific media queries for various device sizes

I am looking to create a responsive website using media queries and have already created different media queries for mobile, tablets, and desktops. However, I am unsure if I should be writing the same CSS code multiple times for various device sizes, such ...

htmlcssmedia-queries

What is the best way to show an error message on a webpage using jQuery within a PHP environment?

I have a form in HTML that includes a submit button for posting status on a page. When a user clicks the submit button without entering anything into the form field, I want PHP to display a simple error message on the same page saying "This status update s ...

javascriptphpjqueryhtmlcss

Enhancing user experience with jquery autocomplete matching

Currently utilizing the JQuery Autocomplete plugin. It seems that the default behavior is to match from the start, so "foo" matches "fool", but not "bufoon". I am seeking a way for matching to happen anywhere in the text and also in a case-insensitive man ...

javascriptjqueryjquery-pluginsautocompleteautosuggest

Executing Selenium WebDriver to interact with a hidden element

Hello, I am interested in learning how to interact with hidden elements and disable them using Selenium WebDriver. I've managed to achieve this with Selenium 1 by using the following code: selenium.click(id="idOfHiddenField"); Unfortunately, this a ...

javascriptseleniumselenium-webdriverwebdriverhidden-field

Lazy Load immediately loads images that are visible on the screen without needing a click

I am facing an issue with Lazy Load on my image-heavy website. I want the images to load only when a button is clicked, but currently, it only partially works. Images below the fold follow the desired behavior of loading on click, but those above the fold ...

javascriptjquerylazy-loadingjquery-lazyload

Learn the proper way to write onClick in tsx with Vue 2.7.13

current version of vue is 2.7.13 Although it supports jsx, I encounter a type error when using onClick event handling. The type '(event: MouseEvent) => Promise<void>' cannot be assigned to type 'MouseEvent' Is there a correct ...

javascripttypescriptvue.jsvuejs2tsx

Showcasing data from Django models in a tabular format

I am new to django and seeking assistance. I have developed a website but it's not fully operational yet. The model I created looks like this; from django.db import models class InductiveSensors(models.Model): Part_No = models.CharField(max_lengt ...

pythonhtmldjangourldjango-models

What is the best way to create a visual separation between these two arrows using styled-components?

Currently, I am immersing myself in styled-components and attempting to replicate the image provided below. Although I can achieve this with CSS, I am solely focusing on utilizing styled components for this task. <Container> {sliderItems.map((item) ...

javascriptreactjsstyled-components

"Enhance Your Smart Contract Interaction with Algrand's Method Calling

Currently, I am working on integrating an Algorand smart contract with a Next.js application. To sign transactions, I am utilizing Pera wallet. However, I have encountered an issue when attempting to call methods from the contract on the front end using th ...

javascriptnext.jssmartcontractsgeneral-network-erroralgorand

Unable to detect hover (etc) events after generating div elements with innerHTML method

After using the code below to generate some divs document.getElementById('container').innerHTML += '<div class="colorBox" id="box'+i+'"></div>'; I am encountering an issue with capturing hover events: $(".colorB ...

javascriptjquery

React is unable to locate the component element within the DOM

I'm attempting to set the innerHTML for the div element with the ID of ed. Unfortunately, I am unable to access it once React has finished rendering. It seems that this is due to the render stages, as I am receiving a null value for the div element. W ...

javascriptreactjs

Enhance the attributes of a collection of objects using values from a different array

Looking for a way to enhance a set of objects with properties sourced from another array? I have two arrays at hand. The first one contains a series of objects, while the second one consists of integers. My goal is to attribute a new property to each objec ...

javascriptarraysalgorithm

Clicking on Fixed Positioning triggers a reset

When I activate the sidebar by clicking the menu button, it remains fixed in position until the first scroll. However, if I interact with the sidebar by clicking on it, the button resets and goes back to the top of the page. This issue seems to only occur ...

javascriptjqueryhtmlcss

Adding up results from Ajax request based on specific criteria

I am performing an Ajax Request that retrieves data from two different databases. For example, I have 2 databases and my ajax request queries those databases to return the following information: [{"question_id":31,"columnheader":"joene_001","ct_yes":"2"," ...

jqueryajaxjson

What is the best way to eliminate products that have already been utilized?

Take a look at my code snippet. $(function() { $("#tags input").on({ focusout: function() { var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // only allow certain characters if (txt) $("<span/& ...

javascriptjqueryhtmlcssautocomplete

The result after calling JSON.parse(...) was not accurate

The following method is used in the controller: @RequestMapping(value = "channelIntentionDetails.html", method = RequestMethod.POST) public @ResponseBody Report getChannelIntentionDetails(@RequestBody SearchParameters searchParameters) { LOGGER.in ...

javascriptajaxjson

Searching for date ranges in PHP and MYSQL using Jquery Datepicker功能

I have made multiple attempts to solve my issue, but I am still unable to find a working solution. My main goal is to search for a date range from a datetime field in a MySQL database. Before the form, I have included this jQuery script: <script type=" ...

phpjquerymysqlsqlmysqli

Utilizing Express 4, create a fresh route within an app.use middleware

I'm currently working on an express nodejs app where I am attempting to implement "dynamic routes" within another route. Here is what I have: .... app.use('/test/:id', function(req,res,next) { app.use('/foo', sta ...

javascriptnode.jsexpress