bootstrap accordion animation

#accordion {
  .card {
    border: unset !important;
    .card-header {
      @extend .text-xx-large;
      background-color: $white;
      padding: ($spacer * 3.44) 0px ($spacer * 3.44) 0px;
    }
  }
}

.card-header {
  h5 {
   a{
      color: $dark;
      position: relative;
      display: block;
      padding-right: ($spacer * 2.5);
      font-size: ($spacer * 1.5);

      &:hover, &:focus, &:active {
        text-decoration: none;
      }

      &::before {
        content: "\f28e";
        position: absolute;
        top: 50%;
        right: 0;
        font-family: "LineAwesome";
        color: $green;
        font-weight: 400;
        line-height: 24px;
        font-size: 24px;
        transform: translateY(-50%) rotate(0deg);
        transition: .35s all ease-in-out;
      }

      &.collapsed::before {
        content: "\F2C2";
        position: absolute;
        top: 50%;
        right: 0;
        font-family: "LineAwesome";
        color: $green;
        font-weight: 400;
        line-height: 24px;
        font-size: 24px;
        transform: translateY(-50%) rotate(180deg);
        transition: .35s all ease-in-out;
      }
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">

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

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <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">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <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">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        <a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <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>
I tried running this code using Bootstrap 4, Line-Awesome icons, jQuery, and CSS but encountered an issue. I aimed to have plus icons displayed in the accordion when clicked, and then once clicked again, switch to minus icons. However, the expected functionality did not appear as desired. Any suggestions on how to achieve this behavior would be greatly appreciated.

jquerycssbootstrap-4

Answer №1

Hello, I've made some updates to your answer. I've included icons based on the class that appears on the a tag when it's clicked. Hopefully, you'll find this addition helpful.

#accordion {
  .card {
    border: unset !important;
    .card-header {
      @extend .text-xx-large;
      background-color: $white;
      padding: ($spacer * 3.44) 0px ($spacer * 3.44) 0px;
    }
  }
}

.card-header {
  h5 {
   a{
      color: $dark;
      position: relative;
      display: block;
      padding-right: ($spacer * 2.5);
      font-size: ($spacer * 1.5);
      display: block;

      &:hover, &:focus, &:active {
        text-decoration: none;
      }

      &::before {
        content: "\f28e";
        position: absolute;
        top: 50%;
        right: 0;
        font-family: "LineAwesome";
        color: $green;
        font-weight: 400;
        line-height: 24px;
        font-size: 24px;
        transform: translateY(-50%) rotate(0deg);
        transition: .35s all ease-in-out;
      }

      &.collapsed::before {
        content: "\F2C2";
        position: absolute;
        top: 50%;
        right: 0;
        font-family: "LineAwesome";
        color: $green;
        font-weight: 400;
        line-height: 24px;
        font-size: 24px;
        transform: translateY(-50%) rotate(180deg);
        transition: .35s all ease-in-out;
      }
    }
  }
}


h5 a.btn {display: block; text-align:left;}
h5 a.btn {background: url('https://image.flaticon.com/icons/svg/25/25336.svg') no-repeat right center; background-size: 24px auto;}
h5 a.btn.collapsed{background: url('https://image.flaticon.com/icons/svg/9/9129.svg') no-repeat right center; background-size: 24px auto;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">

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

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim efficitur magna in congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur nec velit mollis,
        fermentum justo eget, consequat nisi.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Duis vehicula lobortis mauris, sed semper ligula vestibulum nec. Suspendisse potenti. Nullam varius urna at lectus bibendum tempus. Aenean pulvinar est vitae sollicitudin molestie. Maecenas vulputate tortor non sapien cursus,
        nec dictum ex sodales.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        <a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
         Aliquam erat volutpat. Aenean laoreet et neque vel tincidunt. Etiam molestie accumsan libero, et facilisis dui eleifend eu. Fusce rutrum felis ut tempus faucibus. Phasellus viverra scelerisque elementum. Integer non sagittis nunc.
      </div>
    </div>
  </div>
</div>

Answer №2

Check out this working example I've provided: https://jsfiddle.net/wd87u0xL/2/.

The key concept here is to utilize the FontAwesome font-family instead of LineAwesome. Also, make sure to correct the closing tag for the third item in the collapse section.

You can also streamline your code by noting that a::before and a.collapsed::before share similar attributes:

a {
   &::before {
       content: "\f28e";
       position: absolute;
       top: 50%;
       right: 0;
       font-family: FontAwesome;
       color: $green;
       font-weight: 400;
       line-height: 24px;
       font-size: 24px;
       transition: .35s all ease-in-out;
       transform: translateY(-50%) rotate(0deg);
   }

   &.collapsed::before {
       content: "\F2C2";
       transform: translateY(-50%) rotate(180deg);
   }
}

I hope this information proves helpful to you.

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

The alignment of image and text next to each other is not functioning as intended

I've been attempting to display an image and text next to each other, but I'm encountering some issues. The current output looks like the figure below: https://i.stack.imgur.com/WxxrS.jpg The desired layout is as shown in the following link: ht ...

htmlcssimagetext

Adjusting the content of a single text box by typing in another

Is it feasible to automatically convert a Nepali date input in one textbox into an English date and display it in another textbox without any page refresh? I have a PHP function that can translate dates between Nepali and English, and I want it to execute ...

phpjavascriptjqueryhtmlajax

Utilize a script on a div that is dynamically loaded via AJAX

Can anyone assist me with loading external content into a div? I attempted to use a code for this purpose, but now my scripts are not functioning correctly. Any help would be greatly appreciated - I'm new to this type of work. Thank you function aja ...

javascriptjqueryhtmlajax

Efficiently displaying dynamic content instantly with jquery and ajax

I am looking to update the information displayed within a block that is generated by <?php print "R";print_r($convert->toCurrency('ZAR', 1));print " / $";print_r($convert->toCurrency('USD', 1)); ?> <div class="col-md-3 ...

javascriptphpjqueryajax

Any suggestions on how to avoid code repetition using Jquery?

This code allows me to create a menu for my gallery. By setting the .masonry # elements to display:none, I can use the corresponding ID in the menu to show the correct gallery when clicked. However, there is a lot of repetitive code in this implementatio ...

jqueryhtmlrepeat

Why does my AJAX request keep returning a 500 internal error in Laravel?

My goal is to verify the username when a new user is entered, using AJAX so that the correct username can be displayed in the field. Form <form role="form"> <input type="hidden" id="token" name="_token" ...

jqueryajaxlaravel

When it comes to the CSS `:visited` pseudo-class, I have

I'm having trouble changing the color of the anchor tag and blurring the image after visiting the link. Despite my CSS code, only the color is changing and the image remains unchanged. Here's my CSS code: <style> .image123{ paddin ...

javascriptjqueryhtmlcss

Implementing a JavaScript function that directs to the current page

I have set up my index page with a link that looks like this: <li onClick="CreateUser()"> <a href="#CreateUser">CreateUser</a> </li> When the "Create User" list item is clicked, the main page content is populated as follows: fun ...

javascripthtmlcss

Adding external JavaScript files that rely on jQuery to a ReactJS project

As a beginner in web development, I have a question regarding importing external JavaScript files in ReactJS. I currently have the following imports: import $ from 'jquery'; window.jQuery = $; window.$ = $; global.jQuery = $; import './asse ...

javascriptjqueryreactjsnpm

Ways to accomplish a task prior to form submission without relying on preventDefault

How can I perform an action before form submission without using e.preventDefault();? I am faced with a situation where I have two form buttons and need to set a hidden field value before submitting the form. In my Symfony2 framework, when I submit the fo ...

javascriptjqueryformssymfony

CSS mismatch detected between production and development modes

Currently, I am utilizing the Vuetify framework coupled with custom CSS for a project developed using a webpack template. During development mode, my custom CSS modifications are successfully applied to HTML elements; however, in Production mode, these cha ...

cssvue.jswebpackproduction

Position the button at the bottom right corner of the form

I created a basic webpage using Bootstrap 4 with a contact form and I am trying to figure out how to align the button to the bottom right instead of the bottom middle. Can anyone help me achieve this? https://i.sstatic.net/0Dnz1.jpg Below is the HTML cod ...

cssbootstrap-4

Clicking a button in jQuery to load the Pagemethods

<script type="text/javascript"> $(document).ready(function() { $('#loadbtn').click(function() { // can 't load opts = { title: 'ABCD', series: [{ ...

javascriptc#jquery

Queries about sending files to Sails using AJAX with jQuery - a few clarifications needed

Initially, here is the code snippet: Client-side code: let formData = new FormData(); formData.append('upload', dataURLtoBlob(dataUrl)); $.ajax({ url: '/Api/File', type: 'POST', ...

jqueryajaxsails.js

Following the implementation of the YITH ajax navigation filter, my jQuery scripts are no longer functioning as

I'm having trouble with using yith ajax navigation in my theme. Everything works perfectly until I click on an element to filter, at which point my jquery codes stop working. The team at yith suggests: If your product list contains JavaScript cod ...

javascriptphpjqueryajaxwordpress

Enhancing User Interfaces with JQuery UI Widgets and Dynamic AJAX Calls

Currently involved in geolocation and mapping work, I am creating a JQuery widget to ensure that the code is portable for future projects. However, I have hit a roadblock when it comes to making an AJAX request. Below are a couple of methods from my widge ...

javascriptjqueryajaxjquery-ui

Is it just me, or does the page appear messy when it first loads but then magically cleans up

Every time I open my website in a new tab, the height of the navigation bar is twice as big as it should be. However, if I refresh the page, everything looks normal again. Do you have any suggestions on how to solve this issue? You can visit my website at ...

cssrefresh

What could be causing my code to not align vertically in the Grid layout?

As I delve into developing with React and MaterialUI, a perplexing issue has arisen where elements refuse to align vertically. My expertise lies mostly in backend development, leaving me with minimal knowledge of frontend development nuances, especially co ...

cssreactjsmaterial-uicss-grid

What is the impact of a floated element on vertical spacing?

I have come across an article discussing the usage of CSS, but I am puzzled as to why image number four is not positioned below image number one. Instead, it appears below image number three. Can someone please explain this to me? Here is the HTML code sni ...

javascriptjqueryhtmlcss

What could be causing my ajax function to fail on yii2?

Hello there, I am seeking guidance on how to implement an ajax function in yii2. I am currently developing a product within the yii2 framework and wish to incorporate charts such as chartJs, googleChart, or d3. In the index file of the backend area (xx/xx ...

phpjqueryajaxyii2chart.js