use jquery to increase margin on card upon collapse displaying

I'm currently using an accordion from a bootstrap 4 website.

<div class="accordion" id="accordionExample">
  <div class="card m-0">
    <div class="card-header bg-white" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card m-0">
    <div class="card-header bg-white" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card m-0">
    <div class="card-header bg-white" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Is there a way to add a 16px margin to the top and bottom of the card when the accordion is expanded either through jQuery or plain CSS to make it more prominent?

Appreciate any help, thank you!

jquerycssbootstrap-4accordion

Answer №1

Ensure to include both margin-top(mt-3) and margin-bottom(mb-3) classes on the card that appears in the accordion and toggles visibility as shown below.

$('#accordionExample').on('shown.bs.collapse', function() {
  $('#accordionExample .collapse.show').parent().addClass("mt-3 mb-3");
})
$('#accordionExample').on('hidden.bs.collapse', function() {
  $('#accordionExample  >.card.m-0').removeClass("mt-3 mb-3");
})

Additionally, make sure to add the mt-3 and mb-3 classes by default on the card that is initially shown as open.

An extra transition effect has been added to the card div to ensure a smooth visual transition when the margins are applied upon opening/closing the accordion section. 

$('#accordionExample').on('shown.bs.collapse', function() {
  $('#accordionExample .collapse.show').parent().addClass("mt-3 mb-3");
})
$('#accordionExample').on('hidden.bs.collapse', function() {
  $('#accordionExample  >.card.m-0').removeClass("mt-3 mb-3");
})
#accordionExample .card {
  transition: all 1s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="accordion" id="accordionExample">
  <div class="card m-0 mt-3 mb-3">
    <div class="card-header bg-white" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      Collapsible Group Item #1
    </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card m-0">
    <div class="card-header bg-white" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      Collapsible Group Item #2
    </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card m-0">
    <div class="card-header bg-white" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
      Collapsible Group Item #3
    </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Answer №2

When Bootstrap displays a 'collapse' div, it also adds a 'show' class. You can take advantage of this by styling it like so:

.collapse.show div{
    margin:16px 0 16px 0;
}

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

Having excessive space within an H1 heading

Having an issue with a PHP file on my test server that is displaying extra white space, which is highlighted by a red box. This whitespace is also shown in the developer tools view. When the file is outputted, all of the content appears on one line. Code: ...

csswhitespace

Transfer the selected value from the initial dropdown menu to the second dropdown menu seamlessly without the need to

My website features a repair pricing calculator that allows users to select a brand from a dropdown menu and then choose the specific model from a second dropdown. Currently, after selecting an option from the first dropdown, the page reloads and passes th ...

phpjqueryajaxwordpressdropdown

Issue with slide animation in carousel on Bootstrap version 4.5.2 not functioning as intended

Recently, I've been diving into learning Bootstrap (v4.5.2) and decided to implement a basic carousel on my website that slides automatically. Following the documentation on Bootstrap's website, I copied the example code for a simple carousel wit ...

htmlcssbootstrap-4carousel

Incorporating a hyperlink into an Iframe triggered by Fancybox2-AJAX, specific to the Iframe's unique identifier

One thing I have noticed is that everything seems to be working fine up until the point where I try to load it through fancybox via AJAX. An example of it working statically: <iframe id="videourl1" width="640" height="340" src="" frameBorder="0">& ...

javascriptjqueryajaxfancybox-2

Implement jQuery Tabs in Brackets software to enhance user experience

My Adobe Creative Cloud subscription is expiring soon, and I am considering switching to Brackets, an open-source code editor developed by Adobe. However, I am facing some difficulties adding jQuery tabs to my HTML documents. I downloaded the 1.10.4 zip f ...

javascriptjqueryhtmljquery-uitabs

How can the horizontal scroll bar width be adjusted? Is it possible to create a custom

Within my div, I have implemented multiple cards that scroll horizontally using the CSS property: overflow-x: scroll; This setup results in a horizontal scrollbar appearing under the div, which serves its purpose. However, I would prefer a customized scr ...

javascriptcssreactjs

Tracking page views through ajax requests on Google Analytics

I have implemented a method to log page views through ajax action when the inner page content is loaded. However, I am facing an issue where the bounce rate data is not getting updated and always shows 0%. The default Google Analytics page view is logged ...

javascriptphpjqueryajaxgoogle-analytics

"Autocomplete disable" feature malfunctioning on the final input field of all web pages

I'm dealing with a web application that has a login page. The username and password fields have the autocomplete attribute set to "off," as well as other variations like nope, new-password etc. However, it's still not working in Chrome version 62 ...

javascriptjqueryhtml

Kendo UI Web - MultiSelect: choosing an option multiple times

Currently, I am encountering an issue with the Kendo UI MultiSelect widget when trying to select an option multiple times. An example of this is shown in the image below where I want to choose Schindler's List again after selecting The Dark Knight. Ho ...

javascriptjquerywebkendo-uikendo-multiselect

Is it possible to enlarge the window screen using css?

After using zoom at 90%, everything was working fine until we introduced high charts. The hovering property doesn't display in the correct position. Looking for a solution to show a zoomed window on a small screen, like a laptop screen. Does anyone h ...

htmljquerycss

Changing Tailwind CSS variables for customization

Using Variables in index.css : :root { --property: 1; } A Different Approach to Changing it with CSS on Hover: img{ transform: scale(var(--property));; } .another-element:has(:hover, :focus) { --property: 1.1; } There's a way to inclu ...

csstailwind-csstailwind-ui

Assistance needed with CSS - making an element occupy the entire remaining vertical space

Although I'm quite confident in my CSS/XHTML abilities, this particular issue has me stumped. You can view the problem here: - (please note that the website is still under development, most features are not functional, and it's subject to frequ ...

cssxhtml

Listener for body keystrokes

Is there a way to trigger a function when the space bar is pressed on the page, without it being called if an input field is focused? Any thoughts or suggestions? The current code triggers the function even when an input bar is focused: $(document).keydo ...

javascriptjquery

Improving the pagination performance in AngularJS

I created an HTML template to showcase member details, along with adding pagination functionality to improve initial load time. Currently, I retrieve 15 members from the server at once and display them, allowing users to navigate through more members using ...

javascriptjqueryhtmlangularjspagination

WooCommerce Checkout and My Account Edit Address now feature dynamic selectable fields for improved customization options

After finding a solution on Stack Overflow to show sub Areas dropdown based on the selected city in WooCommerce checkout, I customized the code for my specific requirements: function cities_areas_settings() { $text_domain = 'woocommerce'; ...

javascriptphpjquerywordpresswoocommerce

What is the best way to place text alongside a shape?

I'm attempting to place text beside the circular shape. HTML <div class="row"> <div class="col-sm-2"> <span><div class="circle"></div></span><p>available</p> </div> </div> C ...

htmlcsstwitter-bootstrap-3

Froala Editor: retrieve content and send it via an AJAX request

I am having an issue with content placement and saving on the server. So, I have been using: `$(".selector").editable("getHTML");` This is supposed to retrieve the content in HTML format according to the documentation. For example, this is a sample of th ...

jqueryajaxasp.net-mvcjquery-pluginsfroala

Table formatting problem

I am looking to add borders only below each row in my table. td{ border-bottom-style: solid;} However, I am noticing a visible border break between columns. Can anyone advise on how to remove that? ...

htmlcsscss-tables

The issue arises when the jQuery $.get() method fails to deliver the expected response to the client, despite returning a status code of

I am having trouble with sending a REQUEST to a server in order to retrieve a message. I have tried using the jQuery method $.get(), and it seems to have successfully reached the server. However, I am facing an issue where I am unable to send a RESPONSE b ...

javascriptjquerynode.jsexpress

Conceal or eliminate redundant choices in dropdown menu

I am currently working with the WebForms framework and I have encountered an issue with my dropdownlist control in one of my Forms. The Select option is sometimes being added twice, causing duplication in my form. I am looking for a way to either remove th ...

c#htmlcssasp.net