How to change the caret when i click the button?

How to change the caret when i click the button?

Hi am using bootstrap 4 and designed menu bar with caret. In that i am facing two issues.

Hi am using bootstrap 4 and designed menu bar with caret. In that i am facing two issues.

1) when i click the button (eg LAPTOP,MObile) dropdown appears but the caret not changed. when i click the caret dropdown appears and caret changed .

2) once i click the menu dropdown appears the arrow changed but when i click another menu from the same menubar

$(document).ready(function () {
                $('.fa-caret-down').on('click', function () {
                    if ($(this).hasClass('fa-caret-down')) {
                        $(this).removeClass('fa-caret-down').addClass('fa-caret-up');
                    } else {
                        $(this).removeClass('fa-caret-up').addClass('fa-caret-down');
                    }
                });
            });
  /* Type 3 */
  .nav-link-type-three {
      padding-right: 2.5rem !important;
      padding-left: 1.5rem !important;
      color: white !important;
      text-decoration: none
  }

.navbar-dark .navbar-nav .show>.nav-link-type-three { color: #232323 !important; text-decoration: none }

.bg-dark-type-three { background-color: #29a4d0 !important; }

/* Default image size */ img {

      max-width: 40px;
      min-height: 40px;
  }

  /* images space */
  .col-md-2 {
      margin-left: 2%;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div > <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark-type-three"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item dropdown nav-org">

      &lt;a class="nav-link-type-three nav-org " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        LAPTOP &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;div class="dropdown-menu dropdown-menu-one" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; lg &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; sony &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; acer&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; dell&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE2ygZJ?ver=948e&amp;q=90&amp;m=6&amp;h=623&amp;w=767&amp;b=%23FFFFFFFF&amp;l=f&amp;f=jpg&amp;o=t&amp;aim=true"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; HP &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        SPEAKERS &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-second" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6UE4aUUdaU7m5yO4lG6YvjbAcjRM0sCD5BmzP1PInJ3KcgWwB"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;Mono  &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://images-na.ssl-images-amazon.com/images/I/71obbdaLHpL._SX425_.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;jass &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://images.philips.com/is/image/PhilipsConsumer/SPA25A_94-_FP-global-001?$jpglarge$&amp;wid=1250"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;iBall &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="http://www.litheaudio.com/user/products/large/Lithe%20Audio/Bluetooth%20ceiling%20speakers/Bluetooth%20speaker%20images_0034_01565_Lithe%20Audio%20Bluetooth%20IP%20Rated%20Bathroom%20Ceiling%20speaker_Cutout[1].jpg"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;Zebronics &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://n3.sdlcdn.com/imgs/e/b/6/QHM602_USB_Mini_Speaker_03332-5c47e.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;Senizer &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;

        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        MOBILES &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-third " aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://www.91-img.com/pictures/97744-v1-apple-iphone-7-mobile-phone-large-1.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; iphone 7&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center "&gt;
                &lt;div&gt;
                  &lt;img src="https://www.gofordigitalindia.com/components/com_djclassifieds/images/item/5/5167_mobile_thb.jpg"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;samsung &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://static.toiimg.com/photo/64792032/Motorola-One.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; Motorola &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://www.emibaba.com/wp-content/uploads/2017/09/Apple-iPhone-8-64gb-Red.png" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; iphone 6s&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="http://www.infocusindia.co.in/mobile-phones/img/turbo5.png" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;redmi &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        CAMARA &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-four" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        DESKTOP &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-five" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        REFURBISHED &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-six" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        ACCESSORIES &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-seven" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        MOTHERBOARD &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;div class="dropdown-menu dropdown-menu-eight" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

</nav> </div>

<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>


the caret was not changed.

javascript jquery html css html5

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

HTML5 Canvas Text Animation Tutorial [HTML, CSS, JavaScript]

Website header text made out entirely of interactive bubble particles? Why not :) In today's HTML5 canvas text animation tutorial we will build it together using nothing but plain HTML, CSS and pure vanilla JavaScript. No frameworks and no libraries. Let's improve our understanding of these 3 fundamental web development technologies and create something cool in the process. HTML5 Canvas Text Animation Tutorial [HTML, CSS, JavaScript]

Building a minesweeper game using Javascript, HTML and CSS

In this article, you'll learn how to build minesweeper using JavaScript, HTML and CSS. I also used jQuery, a JavaScript library that is helpful for interacting with html. Whenever you see a function call with a leading dollar sign, that is jQuery at work

How to create a simple Clock using HTML ,CSS & Javascript

In this project we will be learning to design a simple digital clock using HTML5, CSS3 and JavaScript. You can use the Script Tags and your JavaScript Code directly in the page. You can inline your JavaScript and you can use an external JavaScript File in the Head Section or in the bottom of your HTML Document.

Material Login & Signup Form with CSS, HTML and JavaScript

How we can create a login and signup form with the material design using HTML CSS JavaScript? Solution: See this CSS Material Login & Signup Form With jQuery, Material Design Form.

JavaScript Table Filter or Search | How to add Filter In HTML CSS Table

How we can add a search or filter option in an HTML Table using ... Solution: JavaScript Table Filter or Search, Add Filter In HTML CSS Table.