Issue with Bootstrap 4 custom list-group collapse arrow not working as expected

I recently customized a Bootstrap 4 list-group to include collapse functionality.

In my customization, I added a CSS caret arrow with the following behavior: 1. Initially pointing down 2. Clicked once, it points up 3. Clicked again, it returns to the initial downward position

The problem I am facing is that upon the first click, the caret does not respond, only on the second click does it point upwards.

I am using CSS transform selectors to rotate the caret up and down.

Why is this behavior not working as expected? Could I be missing something or doing something incorrectly?

.btn {
  box-shadow: none !important;
  outline: 0;
}

a:link,
a:visited {
  color: #222;
}

a:hover,
a:focus {
  color: orange;
}

.list-group-item span {
  cursor: pointer;
  border: solid #222;
  border-width: 0 1px 1px 0;
  transform: rotate(40deg);
  transition: .3s transform ease-in-out;
  display: inline;
  padding: 3px;
  position: absolute;
  right: 0;
  margin-top: 10px;
}

.list-group-item .collapsed span {
  transform: rotate(-140deg);
  margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col">
      <div class="my-5">
        <ul class="list-group list-group-flush">
          <li class="list-group-item px-0">
            <a class="btn" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="true" aria-controls="collapseExample1">
              <span class="mr-3"></span> Link with href
            </a>
            <div class="collapse" id="collapseExample1">
              <div class="card card-body mt-2">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
              </div>
            </div>
          </li>
          <li class="list-group-item px-0">
            <a class="btn" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="true" aria-controls="collapseExample2">
            Link with href <span class="mr-3"></span>
  </a>
            <div class="collapse" id="collapseExample2">
              <div class="card card-body mt-2">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
              </div>
            </div>
          </li>
          <li class="list-group-item px-0">
            <a class="btn" data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="true" aria-controls="collapseExample3">
    Link with href <span class="mr-3"></span>
  </a>
            <div class="collapse" id="collapseExample3">
              <div class="card card-body mt-2">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

Consider trying out this alternative approach:

  1. Start with the initial state pointing downwards; update your anchor links by adding the class collapsed.

    <a class="btn collapsed" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="true" aria-controls="collapseExample1">Link with href<span class="mr-3"></span></a>

  2. Upon being clicked, shift the pointing direction upwards; include the following CSS code:

    .list-group-item a.btn span {
  transform: rotate(-140deg);
  -webkit-transform: rotate(-140deg);
  transition: .3s transform ease-in-out;
}

    Update your existing CSS code:

    .list-group-item span {
  cursor: pointer;
  border: solid #222;
  border-width: 0 1px 1px 0;
  transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  transition: .3s transform ease-in-out;
  display: inline;
  padding: 3px;
  position: absolute;
  right: 0;
  margin-top: 10px;
}

  3. If clicked again, return to the initial downward pointing state; add the following code to your CSS:

    .list-group-item a.btn.collapsed span {
  transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  transition: .3s transform ease-in-out;
}

  4. Remove the following CSS code:

    .list-group-item .collapsed span {
  transform: rotate(-140deg);
  -webkit-transform: rotate(-140deg);
  margin-top: 10px;
}

Snippet Here

.btn {
  box-shadow: none !important;
  outline: 0;
}

a:link,
a:visited {
  color: #222;
}

a:hover,
a:focus {
  color: orange;
}

.list-group-item span {
  border: solid #222;
  border-width: 0 1px 1px 0;
  display: inline;
  cursor: pointer;
  padding: 3px;
  position: absolute;
  right: 0;
  margin-top: 10px;
}

.list-group-item a.btn.collapsed span {
  transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  transition: .3s transform ease-in-out;
}

.list-group-item a.btn span {
  transform: rotate(-140deg);
  -webkit-transform: rotate(-140deg);
  transition: .3s transform ease-in-out;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <title>Document</title>
</head>

<body>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  <div class="container">
    <div class="row">
      <div class="col">
        <div class="my-5">
          <ul class="list-group list-group-flush">

            <li class="list-group-item px-0">
              <a class="btn collapsed" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="true" aria-controls="collapseExample1">
            Link with href<span class="mr-3"></span>
            </a>
              <div class="collapse" id="collapseExample1">
                <div class="card card-body mt-2">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                </div>
              </div>
            </li>

            <li class="list-group-item px-0">
              <a class="btn collapsed" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="true" aria-controls="collapseExample2">
            Link with href<span class="mr-3"></span>
            </a>
              <div class="collapse" id="collapseExample2">
                <div class="card card-body mt-2">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                </div>
              </div>
            </li>

            <li class="list-group-item px-0">
              <a class="btn collapsed" data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="true" aria-controls="collapseExample3">
            Link with href<span class="mr-3"></span>
            </a>
              <div class="collapse" id="collapseExample3">
                <div class="card card-body mt-2">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                </div>
              </div>
            </li>

          </ul>
        </div>
      </div>
    </div>
  </div>


</body>

</html>

Just Fiddle

View code on Just Fiddle

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

Using jQuery Ajax to Retrieve Inner Text from Elements

Looking for a solution with PHP file output like this: <div id="title">Add Us On Myspace!</div><img id="image" src="http://i39.tinypic.com/67jybs.png" alt="Add Us On Myspace!" /> The code to retrieve and display this is as follows... $ ...

jqueryhtmlajaxcss-selectors

Sending form data to PHP script following Javascript verification

After implementing basic validation for a contact form, I encountered an issue where the form would not submit to the PHP file responsible for sending emails. Despite setting the button type as "submit" and defining the form action as "contactform.php", th ...

javascriptphphtml

Retrieve the value of data from the dataset

I'm facing an issue assigning a string value to a variable depending on a boolean variable. After trying the following code: [Vue warn]: Error in data(): "TypeError: Cannot read property 'check' of undefined" TypeError: Cannot read proper ...

htmlvue.jsvue-componentvuetify.js

Is there a way to verify whether all elements (text, email, number, and radio) within a specific div have been selected or filled

Is there a way to activate the submit button on a form only when all inputs are checked or not empty? I've come across various snippets on Google and SO that achieve something similar, but they only work for a specific type of input, not taking into ...

javascriptjqueryhtmlvalidation

Selecting properties from a GeoJSON object on the fly with Leaflet

I am currently attempting to dynamically modify the displayed property on my leaflet map. Below is the code I have been working with: $("#button_thermal").click(function(){ $.getJSON("physicalProperties.geojson", function(data) { var geojson2 = L.geoJson( ...

javascripthtmlleafletmapping

Incorporate a class into the fixed navigation menu using fullpage.js

I am attempting to modify the behavior of a sticky menu as the user scrolls down using fullpage.js. My goal is to have the #top-wrapper behave normally when the first section/page loads, and then add a class of is-fixed as you scroll down. When scrolling ...

javascriptjqueryhtmlcssfullpage.js

Transferring HTML5 Video data by breaking it into segments and streaming it through several HTTP/

Looking for ways to speed up the loading time of an html5 video? Is there a method to make a browser process each webm video fragment as individual TCP streams, in order to take advantage of HTTP/2's enhanced parallelization? ...

htmlhtml5-videohttp2

I'm having a hard time understanding how to use array_filter()

<html> <style> h1 { text-align: center; } div { text-align: center; border: 1px solid; padding: 20px; width: 520px; margin: 0 auto; } table{ text-align: center; border: 1px solid; padding: 20px; width: 5 ...

phphtmlarraysarray-filter

Implement event listeners for multiple buttons using Handlebar.js templates, but only the final one will be active

For a homework assignment, I am developing a web app that utilizes websockets to receive server messages and then displays them on an HTML page using handlebars.js. One feature I am trying to implement is the ability to delete a message with the following ...

javascripthtmlhandlebars.js

What issue could be causing trouble with my JavaScript animation?

Currently, I am working on designing a web-page and I have a specific vision in mind - I want an image of the moon to slowly rise up from the bottom of the screen to the top. Here's the HTML code that I have so far: <body> <div id="Moon" ...

javascripthtmlcssanimation

Monitor the most visited pages by internal users to inform future decisions

Currently in the process of revamping our internal network site, I'm considering adding a personalized quick link to the top 3 most visited pages for each user. I'm unsure of the best method to track the most frequently visited pages and how to ...

c#asp.netsettingshtml

Scaled-down navigation when scrolling

Is there a way to make the navigation bar shrink when scrolling, similar to how it functions on this website? The transition on this site is so seamless. I'm guessing it's achieved with JQuery. ...

jqueryhtmlcss

Transform a <td> into a table-row (<tr>) nested within a parent <tr> inside an umbrella structure

Similar questions have been asked in the past, but I still haven't found a solution to my specific inquiry. Here it is: I have a table that needs to be sortable using a JavaScript plugin like ListJS. The key requirement is that I must have only one & ...

javascripthtmlcsshtml-table

Issues with the panel's scroll bar functionality in an HTML document

I am currently working with Bootstrap HTML 5 where I have a panel containing a table. Although I have set scroll for the panel, the table is not adjusting properly within the panel and the scrollbar appears inactive. My goal is to ensure that each header c ...

htmlcsstwitter-bootstrap

Is it possible for JavaScript to identify modifications in the HTML, like an input made with Ctrl+Shift+I?

Check out this website I'm currently working on. As a fun challenge for users, we're encouraging them to use ctrl+shift+i to manipulate the HTML and modify certain elements. Is it possible for Javascript or CSS/HTML to detect these changes? For ...

javascripthtmlcssuser-input

Error: The function getAuth has not been defined - Firebase

I have included the code snippets from index.html and index.js for reference. The analytics functionality seems to be working fine, but I am facing an issue with authentication due to an error during testing. Thank you for your help. index.html <script ...

javascripthtmlfirebaseauthenticationgoogle-analytics

jQuery allows you to assign the identical function to multiple actions

I am faced with a situation where I have multiple actions that need to perform the same function. <ul> <li> <select id="s1"> <option>Name</option> <option>Year</option> ...

jqueryhtml

Displaying an automatic row using jQuery in real-time

I am struggling with displaying a default table row using jQuery. Specifically, I am using the remove() method to delete a table row, but I am unsure how to show a default row if there are no entries to display. Below is the code snippet in question: fu ...

jqueryhtml

How do I execute 2 functions when the button is clicked?

<button id="take-photo"> Take Image</button> <button type="submit" value="Submit" >Submit </button> How can I trigger two tasks with a single button click? 1. Executing a function based on ID Next 2. Submitting the form with ...

javascripthtml

Can I add different tags directly inside a div container in Bootstrap 3 without using .row and .col?

Should I place a tag directly inside in Bootstrap 3? or is it better to have each inside .row>.col-md-# Is this layout acceptable, or could it potentially cause issues on mobile devices? <div class="container"> <h1>Lorem ipsum dolor sit ...

csstwitter-bootstraptwitter-bootstrap-3css-frameworks