Accordion block for FAQs section or collapsible panels on websites, web applications and landing pages.

Dependencies

  • Bootstrap 4
  • FontAwesome
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Bootstrap Blocks - Accordion 1</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body class="bg-light">

    <div class="accordion-1 py-4 py-md-5">
        <div class="container py-md-3">

            <div class="row">
                <div class="col-md-10 col-xl-8 accordion-intro text-center mx-auto">
                    <h1 class="accordion-intro-title mb-3">Awesome blocks for your website</h1>
                    <p class="lead">FWR blocks contains a variety of blocks and elements that you can mix and match to create various layouts. FWR blocks follow a similar pattern and design style so you can reuse it in your websites and web applications.</p>
                </div>
            </div>

            <div class="accordion shadow mt-5" id="bs-accordion">
                <div class="card border-0">
                    <div class="card-header accordion-header" id="headingOne">
                        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <span>What are FWR Blocks?</span>
                            <span class="fas fa-chevron-up"></span>
                        </button>
                    </div>

                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#bs-accordion">
                        <div class="card-body accordion-body">
                            <p><a href="//free-website-resources.com">FWR Blocks</a> are carefully crafted HTML blocks for quick and easy development of your website and application. You can mix and match them to suit your needs.</p>
                            <p>19K users are using FWR blocks and making their life easy. FWR blocks follow a similar pattern and design style so you can reuse it in your websites and web applications.</p>
                        </div>
                    </div>
                </div>
                <div class="card border-0">
                    <div class="card-header accordion-header" id="headingTwo">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            <span>How are the blocks licensed?</span>
                            <span class="fas fa-chevron-up"></span>
                        </button>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#bs-accordion">
                        <div class="card-body accordion-body">
                            <p>The source code and techniques, used in our blocks, resources or snippets, are free for use in your personal and commercial projects. You can use, modify and build upon our code for your (or your clients’) personal and commercial projects, but attribution and link back to our website is necessary.</p>
                            <p>You are <strong>not allowed to redistribute</strong> our demo files directly. You are encouraged to <strong>share a link</strong> to the page instead.</p>
                        </div>
                    </div>
                </div>
                <div class="card border-0">
                    <div class="card-header accordion-header" id="headingThree">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            <span>Any queries or suggestions?</span>
                            <span class="fas fa-chevron-up"></span>
                        </button>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#bs-accordion">
                        <div class="card-body accordion-body">
                            <p>We value customer feedback and suggestions. So, if you have any valuable feedback or suggestion, you can contact us through our <a href="//free-website-resources.com/contact-us">website</a>.</p>
                            <p>If you like our work and would like to support us, you can follow us on
                                <a href="//www.facebook.com/freeweb" target="_blank" rel="noopener nofollow">Facebook</a>,
                                <a href="//twitter.com/freeweb19" target="_blank" rel="noopener nofollow">Twitter</a>,
                                <a href="//www.linkedin.com/company/freeweb19/" target="_blank" rel="noopener nofollow">Linkedin</a> and
                                <a href="//www.pinterest.com/freewebz/" target="_blank" rel="noopener nofollow">Pinterest</a>
                            </p>
                            <p>You can even join us on <a href="//t.me/freeweb19" rel="noopener nofollow">Telegram channel</a> or subscribe for newsletter.</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- /.accordion-1 -->

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
// Bootstrap variables and mixins
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Variables
$primary:       #5863F8;
$border-color:  #ddd;

// Custom CSS
a {
  color: $primary;
  padding-bottom: 2px;
  position: relative;

  &::after {
    content: '';
    height: 2px;
    border-radius: 1px;
    background-color: $primary;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transition: width .3s, left .3s;
  }

  @include hover-focus-active {
    color: darken($primary, 5%);
    text-decoration: none;

    &::after {
      left: 0;
      width: 100%;
    }
  }
}

.accordion-intro-title {
  font-size: 1.75rem;
  color: $primary;
}

.accordion-header {
  background-color: $primary;
  border: none;
  border-bottom: 2px solid darken($primary,5%);
  padding: 0;

  .btn {
    border: none;
    padding: .75rem 1.25rem;
    color: $white;
    width: 100%;
    text-align: left;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;

    @include hover-focus-active {
      text-decoration: none;
    }

    .fas {
      width: 24px;
      height: 24px;
      font-size: .875rem;
      line-height: 24px;
      text-align: center;
      background-color: darken($primary, 5%);
      transition: transform .3s;
      border-radius: 50%;
    }

    &.collapsed {
      .fas {
        transform: rotate(180deg);
      }
    }
  }
}

.accordion-body {
  padding-left: 1.25rem;
  padding-right: 1.25rem;

  p:last-child {
    margin-bottom: 0;
  }
}


@include media-breakpoint-up(md) {

  .accordion-body {
    padding: 2rem;
  }

}
a {
  color: #5863F8;
  padding-bottom: 2px;
  position: relative;
}

a::after {
  content: '';
  height: 2px;
  border-radius: 1px;
  background-color: #5863F8;
  width: 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transition: width .3s, left .3s;
  -o-transition: width .3s, left .3s;
  transition: width .3s, left .3s;
}

a:hover, a:focus, a:active {
  color: #404cf7;
  text-decoration: none;
}

a:hover::after, a:focus::after, a:active::after {
  left: 0;
  width: 100%;
}

.accordion-intro-title {
  font-size: 1.75rem;
  color: #5863F8;
}

.accordion-header {
  background-color: #5863F8;
  border: none;
  border-bottom: 2px solid #404cf7;
  padding: 0;
}

.accordion-header .btn {
  border: none;
  padding: .75rem 1.25rem;
  color: #fff;
  width: 100%;
  text-align: left;
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.accordion-header .btn:hover, .accordion-header .btn:focus, .accordion-header .btn:active {
  text-decoration: none;
}

.accordion-header .btn .fas {
  width: 24px;
  height: 24px;
  font-size: .875rem;
  line-height: 24px;
  text-align: center;
  background-color: #404cf7;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  -o-transition: transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  border-radius: 50%;
}

.accordion-header .btn.collapsed .fas {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.accordion-body {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.accordion-body p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .accordion-body {
    padding: 2rem;
  }
}

Similar Blocks

No similar blocks found
aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvYm9vdHN0cmFwL2FjY29yZGlvbi9hY2NvcmRpb24tMQ==