Change accordion arrow up down via js

user_4684394 0
Viewed 198

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
</head>
<body>

<div class="container">
  <h2>Heading</h2>
  <a href="#demo" data-toggle="collapse">Accordion <i class="fas fa-chevron-down"></i></a>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>
</html>

I am using bootstrap accordion in my project, while clicking on the arrow button it is not changing. I want, when accordion remains collapse arrow head should be down, when it expands arrow heads should be in the upper direction. Below is my codepen url. Thanks in advance.

https://codepen.io/makhan196/pen/VJPNgd

<a href="#demo" data-toggle="collapse">Accordion <i class="fas fa-chevron-down"></i></a>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
accordion html jquery javascript
1 Answers

You can try something like this with Jquery,hope it helps

$("a[href$='#demo']").click(function() {

  let attr = $("#demo").attr("class");
   if (attr=="collapse show") {
    $("i").removeClass("fas fa-chevron-up");
    $("i").addClass("fas fa-chevron-down");
} else {
   $("i").removeClass("fas fa-chevron-down");
    $("i").addClass("fas fa-chevron-up");
  }


})
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
</head>

<body>

  <div class="container">
    <h2>Heading</h2>
    <a href="#demo" data-toggle="collapse">Accordion <i class="fas fa-chevron-down"></i></a>
    <div id="demo" class="collapse">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>

</html>

user_78495490
Related