Bootstrap accordion issue with arrow

bootstrap 4 accordion with arrow codepen
react-bootstrap accordion with arrows
ngx-bootstrap accordion with arrow
bootstrap accordion with icon
ngb-accordion with arrows
bootstrap 4 collapse
bootstrap accordion example with expand/collapse all
bootstrap collapse multiple targets

I'm working on an accordion and as part of it, I have to put an arrow at the right side of each collapse. Unfortunately, I can't see it but it is still there. I don't know if there any style issues or not. Can anyone point out where I'm going wrong?

I have attached my code there. Please go through it.

HTML

  <div class="card">
    <div class="card-header" id="headingOne">
      <h5>
        <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="#nb-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">
    <div class="card-header" id="headingTwo">
      <h5>
        <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="#nb-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">
    <div class="card-header" id="headingThree">
      <h5>
        <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="#nb-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>

SCSS

.nb-accordion {

    .card-header {
        background: #333;
        padding: 0;
        border-bottom: 1px solid #3E3E3E;
        border-radius: 0 !important;
    }

    .card {
        display: block;
        background-color: #fdf03b;
        border-radius: 0;
        color: #333;
        border: none;
    }


    .btn {
        display:block;
        border: 1px solid transparent;
        border-radius: 0;
        padding: 20px;
        width: 100%;
        text-align: left;
        text-decoration: none;
        color: #fff;

        &::after {
            content: '';
            display: inline-block;
            background: url(../images/downwards-pointer.svg) no-repeat;
            position: absolute;
            top: 0;         
            right: 10px;            
            bottom: 0;          
            left: auto;         
            margin: auto;           
            height: 20px;           
            width: 20px;            
            z-index: 50;
        }

    }

    .card-body {
        display: block;
        padding: 20px;
    }

}

JSFiddle link

i think because your svg location

.nb-accordion {

    .card-header {
        background: #333;
        padding: 0;
        border-bottom: 1px solid #3E3E3E;
        border-radius: 0 !important;
    }

    .card {
        display: block;
        background-color: #fdf03b;
        border-radius: 0;
        color: #333;
        border: none;
    }


    .btn {
        display:block;
        border: 1px solid transparent;
        border-radius: 0;
        padding: 20px;
        width: 100%;
        text-align: left;
        text-decoration: none;
        color: #fff;

        &::after {
            content: '';
            display: inline-block;
            background: url(../images/downwards-pointer.svg) no-repeat;  //HERE
            position: absolute;
            top: 0;         
            right: 10px;            
            bottom: 0;          
            left: auto;         
            margin: auto;           
            height: 20px;           
            width: 20px;            
            z-index: 50;
        }

    }

    .card-body {
        display: block;
        padding: 20px;
    }


}

Bootstrap accordion with arrows, Problem is in space between selectors: .panel-heading [data-toggle="collapse"]:​after ^------- // remove this space to make this selector work. Now you are  I have a simple question regarding the Bootstrap accordion. I created an accordion witch is clickable on the header to expand. This works well but my problem is that the arrows are not show in the

Open image svg file in text editor and copy the code and write as below.

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>")  no-repeat;

I hope this will works!

bootstrap accordion with arrow, Example of bootstrap accordion with animated arrows. Detailed documentation and more examples you can find in our Bootstrap Accordion Docs  A very simple and lightweight Bootstrap 4 accordion with arrow up and down to toggle the contents. The plugin uses CSS transition and radio input (for accordion structure) to toggle contents. It uses a little bit jQuery for one accordion open at a time feature, however, it also working without jQuery. Further, this accordion can be used to create FAQ, MCQs or any toggle contents.

Add wrap .nb-accordion and .card-header add position: relative;

CodePen

.nb-accordion .card-header {
  background: #333;
  padding: 0;
  border-bottom: 1px solid #3E3E3E;
  border-radius: 0 !important;
  position: relative;
}
.nb-accordion .card {
  display: block;
  background-color: #fdf03b;
  border-radius: 0;
  color: #333;
  border: none;
}
.nb-accordion .btn {
  display: block;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 20px;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: #fff;
}
.nb-accordion .btn::after {
  content: '';
  display: inline-block;
  background: url(https://cdns.iconmonstr.com/wp-content/assets/preview/2017/240/iconmonstr-arrow-65.png) no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  left: auto;
  margin: auto;
  height: 20px;
  width: 20px;
  z-index: 50;
}
.nb-accordion .card-body {
  display: block;
  padding: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
  
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

  
<div class="nb-accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5>
        <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="#nb-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">
    <div class="card-header" id="headingTwo">
      <h5>
        <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="#nb-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">
    <div class="card-header" id="headingThree">
      <h5>
        <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="#nb-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>
</div> 

Live Demo: Example of Bootstrap 3 Accordion with Arrow Icon, 38. <body>. 39. <div class="bs-example">. 40. <div class="panel-group" id="​accordion">. 41. <div class="panel panel-default">. 42. <div class="panel-​heading">. Try and test HTML code online in a simple and easy way using our free HTML editor and see the results in real-time.

Bootstrap Collapsible Panel With Up/Down Arrow Icon, Bootstrap example of Accordion with Open / Close Arrows using HTML, Javascript, jQuery, and CSS. Snippet by brojask. Customize Bootstrap 4 Accordion Component as a collapsible menu Views: 2036 Published: 2019 Aug 05 by Zakir Hossain Bootstrap Components Bootstrap Collapse known as Bootstrap Accordion. is the tutorial will show you how to create a beautiful collapsible menu with Bootstrap collapse. this is a simple tutorial for beginner.

Bootstrap accordion with arrows, BootstrapVue (and Bootstrap) do not restrict you to using pre-defined components for collapses/accordions and trigger elements. Accordion Bootstrap accordion. The Bootstrap accordion is a component that organizes content within collapsable items. Accordion allows the display of only one collapsed item at a time. Accordions can toggle through a number of text blocks with a single click, and that greatly enhances the UX of your project.

Bootstrap Snippet Accordion with Open / Close Arrows using HTML , how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. Hide Number Arrows Copy Text to Clipboard Animated Search Search Button Accordions are useful when you want to toggle between hiding and showing Example. <button class="accordion">Section 1</button> <div class="​panel"> Dear all,Could someone please provide me an example, how can I embed an accordion inside another accordion? My problem is that if I click on the inner accordion's title, it triggers the parent accordion as well, and this is not what I would expect.Thank you for your help in advance.

Comments
  • Hi Andrel Sitanggang, can we see the image if the location is wrong? And I tried as you said. But didn't work. Thanks bro :)
  • Hello Danish, you can't see the image. It depends on your folder tree or your file type.