Bootstrap Accordions:

Bootstrap Accordion Tab for Paragraphs

Accordion tabs are one of the most useful elements website owners are able to use in their sites in order to improve its performance. These amazing features have the ability to reduce the amount of scrolling users have to do by shortening the pages. Basically, the more content you have in each page, the lengthier it becomes which means more loading time and a messier page design. By using accordion tabs, you can have all the content under categorized topics which can then be expanded if the user wants to read the content under a certain tab. This is perfect for all the sites heavy on content but it also comes at the expense of requiring users to decide based on topic headings. Due to this, you must put a lot of effort into making sure your topics are as descriptive as possible.

Here in this post, we have a Bootstrap accordion menu. This particular design is the perfect accordion for paragraphs. For instance, a really good way to make use of this grey accordion tab is by having the frequently asked questions as topics and put the answers under the tab. This way, users can see the answer to the question they want. With the help of this clickable accordion tabs, you can save space and improve your site’s speed.

Bootstrap Accordion

Accordion for Paragraph

Gray Accordion Tab

Clickable Accordion Tabs

<!-- This script got from frontendfreecode.com -->
<div class="site_wrapper">
    <!-- content sec -->
    <div class="content_sec">
        <!-- launch -->
        <section class="tab_sec" id="tab-sec">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="tab_in_sec">
                            <h2><span></span><strong>Tabs and accordion collaboration using trigger click .</strong></h2>
                            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingOne">
                                        <h4 class="panel-title">
                                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="active">Program Overview</a>
                                        </h4>
                                    </div>
                                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                        <div class="panel-body">
                                            <p>
                                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                                                of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
                                                popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of
                                                Lorem Ipsum.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingTwo">
                                        <h4 class="panel-title">
                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Program Eligibility</a>
                                        </h4>
                                    </div>
                                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                        <div class="panel-body">
                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed eros tempor, varius ipsum vel, viverra nisl. Nam elementum lacus vitae dui ultrices, quis scelerisque ex gravida. Nulla feugiat
                                                nulla et ligula luctus, non placerat urna pulvinar. Nullam vitae neque vitae sem volutpat scelerisque mattis nec tortor. Nullam condimentum est eu magna sagittis, a pretium ligula rhoncus.
                                                Curabitur sollicitudin erat at dui vulputate, dignissim pharetra tellus facilisis. Nam ornare ipsum id lectus cursus, eget molestie sem tempus. Quisque faucibus elit sed sapien viverra, sit
                                                amet pellentesque est egestas. Praesent sit amet lacus a libero commodo blandit sit amet a diam. Quisque vitae metus non leo aliquam convallis eget facilisis nulla. Quisque sit amet urna
                                                ullamcorper, volutpat turpis quis, ornare diam. Ut vitae felis ac mi viverra sagittis. Nam euismod erat vel ipsum maximus, sed gravida eros posuere.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingThree">
                                        <h4 class="panel-title">
                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Program Arrangement</a>
                                        </h4>
                                    </div>
                                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                                        <div class="panel-body">
                                            <p>
                                                Sed ultricies nulla id nulla rhoncus efficitur. Sed eu mi et tortor imperdiet pellentesque. Aenean eu mi vitae urna tempor imperdiet rutrum ac tortor. Maecenas pharetra erat non est
                                                condimentum tempor.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- End content sec -->
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
    overflow-x: hidden !important;
    margin: 0;
    padding: 0;
    background: #fff;
}
a {
    color: #658ad0;
    transition: all 0.5s ease;
}
a:hover {
    color: #3e6cc4;
    text-decoration: none;
}
a:active {
    outline: none;
    text-decoration: none;
}
a:focus {
    outline: none;
    text-decoration: none;
}
button:focus {
    outline: none;
    text-decoration: none;
}
img {
    line-height: 0;
    transition: all 0.5s ease;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    margin: 0;
    padding: 0;
}
h2 {
    text-align: center;
    font-size: 30px;
    text-transform: uppercase;
    color: #353535;
    margin-bottom: 20px;
}
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
.clear {
    clear: both;
    content: "";
    display: block;
    width: 100%;
}
.clear:after {
    clear: both;
    content: "";
    display: block;
    width: 100%;
}
.form-control:focus {
    border-color: #3b0600;
    outline: none;
}
.left {
    float: left;
}
.right {
    float: right;
}
.center {
    text-align: center;
}
.tab_sec {
    background: #f2f1f1 url("https://images.unsplash.com/photo-1454817481404-7e84c1b73b4a?ixlib=rb-0.3.5&s=3c94be63fa4b48f56ec815ec8df28732&auto=format&fit=crop&w=1534&q=80") no-repeat center top;
    padding: 85px 0px 50px 0;
    min-height: 650px;
    background-size: 100%;
}
.tab_in_sec {
    max-width: 775px;
    width: 100%;
    margin: 66px auto;
}
.tab_in_sec .panel-default > .panel-heading {
    padding: 0;
}
.tab_in_sec .panel-default > .panel-heading a {
    display: block;
    padding: 20px 15px;
    font-size: 17px;
    color: #4f4f4f;
    text-transform: uppercase;
    background: #fff;
    border: solid 1px #ccc;
    margin: 10px 0;
}
.panel {
    background: none;
    border: none;
}
.panel-body {
    background: #fff;
    margin-top: 7px;
    border: solid 1px #ccc;
    padding: 40px 35px 25px 35px;
}
.tab_in_sec h2 {
    color: #228697;
    font-family: "TimesNewRomanPS-BoldMT";
    text-transform: inherit;
    position: relative;
    margin: 0 25px 35px 25px;
}
.in++.panel-title {
    color: #228697;
}
.tab_in_sec h2 span {
    position: absolute;
    left: 0;
    top: 50%;
    height: 1px;
    display: block;
    width: 100%;
    background: #228697;
    z-index: 0;
}
.tab_in_sec h2 strong {
    display: inline-block;
    background: #f2f1f1;
    position: relative;
    z-index: 1;
    padding: 10px 15px;
    font-family: raleway;
    border-radius: 15px;
    box-shadow: inset 1px 1px 1px 0px #000;
    border: 1px solid #d82029;
    color: #000;
    font-size: 27px;
    font-weight: bold;
}
.tab_in_sec .panel-default > .panel-heading a {
    background: #e4e4e4;
    color: #7c7c7c;
}
.tab_in_sec .panel-default > .panel-heading a.active {
    background: #e4e4e4;
    color: #000;
}
.tab_first {
    background: none;
    position: absolute;
    top: 66px;
    left: 320px;
    width: 100%;
}
.tab_first .panel-heading {
    background: none;
    border-bottom: none;
    box-shadow: none;
    padding: 0px;
}
.tab_first .panel-heading {
}
.tab_sec {
    position: relative;
}
.tab_first .panel-heading ul li {
    display: inline-block;
    text-align: center;
}
.tab_first .panel-heading ul li a {
    padding: 15px 35px;
    font-weight: bold;
    background: #fff;
    color: #000000;
    text-transform: uppercase;
}
.tab_first .panel-primary {
    box-shadow: none;
    padding-left: 30px;
}
.actives {
    background: #d82028 !important;
    color: #fff !important;
}
.panel-body p {
    margin-bottom: 15px;
}
@media (min-width: 1681px) and (max-width: 1920px) {
    .tab_first {
        left: 600px;
    }
}
@media (min-width: 1599px) and (max-width: 1680px) {
    .tab_first {
        left: 476px;
    }
}
@media (min-width: 1439px) and (max-width: 1600px) {
    .tab_first {
        left: 430px;
    }
}
@media (min-width: 1367px) and (max-width: 1440px) {
    .tab_first {
        left: 342px;
    }
}
@media only screen and (max-width: 1280px) {
    .tab_first {
        left: 270px;
    }
}
@media only screen and (max-width: 1024px) {
    .tab_first {
        left: 135px;
    }
}
@media only screen and (max-width: 992px) {
    .tab_first .panel-primary {
        padding-left: 0px;
    }
    .tab_first .panel-heading ul li a {
        padding: 12px 20px;
    }
    .tab_first {
        top: -38px;
    }
}
@media only screen and (max-width: 767px) {
    .tab_first {
        display: none;
    }
    .top_appy {
        width: 192px;
        margin-top: 5px;
        position: relative;
        z-index: 101;
        float: none;
        margin: 5px auto 0 auto;
    }
    .top_appy a {
        height: 30px;
        line-height: 30px;
        font-size: 12px;
    }
    .tab_sec {
        background: none;
    }
}
@media only screen and (max-width: 480px) {
    .top_appy {
        margin-top: 0px;
    }
    .tab_in_sec h2 span {
        display: none;
    }
    .tab_in_sec h2 strong {
        background: none;
    }
    .tab_sec {
        padding: 25px 0 25px 0px;
    }
    .tab_in_sec h2 {
        margin: 0px;
        margin-bottom: 15px;
    }
}

$(document).ready(function (e) {
    $(".tab_in_sec .panel-default>.panel-heading a").click(function () {
        if ($(this).is(".active")) {
            $(this).removeClass("active");
        } else {
            $(".tab_in_sec .panel-default>.panel-heading a.active").removeClass("active");
            $(this).addClass("active");
        }
    });
    $(".aa").on("click", function () {
        $("#headingOne a").trigger("click");
    });
    $(".bb").on("click", function () {
        $("#headingTwo a").trigger("click");
    });
    $(".cc").on("click", function () {
        $("#headingThree a").trigger("click");
    });
    $("#headingOne").on("click", function () {
        $(".aa").addClass("actives").parent("li").siblings("li").find("a").removeClass("actives");
    });
    $("#headingTwo").on("click", function () {
        $(".bb").addClass("actives").parent("li").siblings("li").find("a").removeClass("actives");
    });
    $("#headingThree").on("click", function () {
        $(".cc").addClass("actives").parent("li").siblings("li").find("a").removeClass("actives");
    });
    $('.tab_first .panel-heading ul li a[data-toggle="collapse"]').on("click", function () {
        $('.tab_first .panel-heading ul li a[data-toggle="collapse"]').removeClass("actives");
        $(this).addClass("actives");
    });
    $(".palceholder").click(function () {
        $(this).siblings("input").focus();
    });
    $(".form-control").focus(function () {
        $(this).siblings(".palceholder").hide();
    });
    $(".form-control").blur(function () {
        var $this = $(this);
        if ($this.val().length == 0) $(this).siblings(".palceholder").show();
    });
    $(".form-control").blur();
    $('.tab_first .panel-heading ul li a[href^="#"]').on("click", function (event) {
        var target = $(this.getAttribute("href"));
        if (target.length) {
            event.preventDefault();
            $("html, body")
                .stop()
                .animate(
                    {
                        scrollTop: target.offset().top - 70,
                    },
                    1000
                );
        }
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
body {
    overflow-x: hidden !important;
    margin: 0;
    padding: 0;
    background: #fff;
}
a {
    color: #658ad0;
    transition: all 0.5s ease;
}
a:hover {
    color: #3e6cc4;
    text-decoration: none;
}
a:active {
    outline: none;
    text-decoration: none;
}
a:focus {
    outline: none;
    text-decoration: none;
}
button:focus {
    outline: none;
    text-decoration: none;
}
img {
    line-height: 0;
    transition: all 0.5s ease;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    margin: 0;
    padding: 0;
}
h2 {
    text-align: center;
    font-size: 30px;
    text-transform: uppercase;
    color: #353535;
    margin-bottom: 20px;
}
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
.clear {
    clear: both;
    content: "";
    display: block;
    width: 100%;
}
.clear:after {
    clear: both;
    content: "";
    display: block;
    width: 100%;
}
.form-control:focus {
    border-color: #3b0600;
    outline: none;
}
.left {
    float: left;
}
.right {
    float: right;
}
.center {
    text-align: center;
}
.tab_sec {
    background: #f2f1f1 url("https://images.unsplash.com/photo-1454817481404-7e84c1b73b4a?ixlib=rb-0.3.5&s=3c94be63fa4b48f56ec815ec8df28732&auto=format&fit=crop&w=1534&q=80") no-repeat center top;
    padding: 85px 0px 50px 0;
    min-height: 650px;
    background-size: 100%;
}
.tab_in_sec {
    max-width: 775px;
    width: 100%;
    margin: 66px auto;
}
.tab_in_sec .panel-default > .panel-heading {
    padding: 0;
}
.tab_in_sec .panel-default > .panel-heading a {
    display: block;
    padding: 20px 15px;
    font-size: 17px;
    color: #4f4f4f;
    text-transform: uppercase;
    background: #fff;
    border: solid 1px #ccc;
    margin: 10px 0;
}
.panel {
    background: none;
    border: none;
}
.panel-body {
    background: #fff;
    margin-top: 7px;
    border: solid 1px #ccc;
    padding: 40px 35px 25px 35px;
}
.tab_in_sec h2 {
    color: #228697;
    font-family: "TimesNewRomanPS-BoldMT";
    text-transform: inherit;
    position: relative;
    margin: 0 25px 35px 25px;
}
.in++.panel-title {
    color: #228697;
}
.tab_in_sec h2 span {
    position: absolute;
    left: 0;
    top: 50%;
    height: 1px;
    display: block;
    width: 100%;
    background: #228697;
    z-index: 0;
}
.tab_in_sec h2 strong {
    display: inline-block;
    background: #f2f1f1;
    position: relative;
    z-index: 1;
    padding: 10px 15px;
    font-family: raleway;
    border-radius: 15px;
    box-shadow: inset 1px 1px 1px 0px #000;
    border: 1px solid #d82029;
    color: #000;
    font-size: 27px;
    font-weight: bold;
}
.tab_in_sec .panel-default > .panel-heading a {
    background: #e4e4e4;
    color: #7c7c7c;
}
.tab_in_sec .panel-default > .panel-heading a.active {
    background: #e4e4e4;
    color: #000;
}
.tab_first {
    background: none;
    position: absolute;
    top: 66px;
    left: 320px;
    width: 100%;
}
.tab_first .panel-heading {
    background: none;
    border-bottom: none;
    box-shadow: none;
    padding: 0px;
}
.tab_first .panel-heading {
}
.tab_sec {
    position: relative;
}
.tab_first .panel-heading ul li {
    display: inline-block;
    text-align: center;
}
.tab_first .panel-heading ul li a {
    padding: 15px 35px;
    font-weight: bold;
    background: #fff;
    color: #000000;
    text-transform: uppercase;
}
.tab_first .panel-primary {
    box-shadow: none;
    padding-left: 30px;
}
.actives {
    background: #d82028 !important;
    color: #fff !important;
}
.panel-body p {
    margin-bottom: 15px;
}
@media (min-width: 1681px) and (max-width: 1920px) {
    .tab_first {
        left: 600px;
    }
}
@media (min-width: 1599px) and (max-width: 1680px) {
    .tab_first {
        left: 476px;
    }
}
@media (min-width: 1439px) and (max-width: 1600px) {
    .tab_first {
        left: 430px;
    }
}
@media (min-width: 1367px) and (max-width: 1440px) {
    .tab_first {
        left: 342px;
    }
}
@media only screen and (max-width: 1280px) {
    .tab_first {
        left: 270px;
    }
}
@media only screen and (max-width: 1024px) {
    .tab_first {
        left: 135px;
    }
}
@media only screen and (max-width: 992px) {
    .tab_first .panel-primary {
        padding-left: 0px;
    }
    .tab_first .panel-heading ul li a {
        padding: 12px 20px;
    }
    .tab_first {
        top: -38px;
    }
}
@media only screen and (max-width: 767px) {
    .tab_first {
        display: none;
    }
    .top_appy {
        width: 192px;
        margin-top: 5px;
        position: relative;
        z-index: 101;
        float: none;
        margin: 5px auto 0 auto;
    }
    .top_appy a {
        height: 30px;
        line-height: 30px;
        font-size: 12px;
    }
    .tab_sec {
        background: none;
    }
}
@media only screen and (max-width: 480px) {
    .top_appy {
        margin-top: 0px;
    }
    .tab_in_sec h2 span {
        display: none;
    }
    .tab_in_sec h2 strong {
        background: none;
    }
    .tab_sec {
        padding: 25px 0 25px 0px;
    }
    .tab_in_sec h2 {
        margin: 0px;
        margin-bottom: 15px;
    }
}
</style>

</head>
<body>
<div class="site_wrapper">
    <!-- content sec -->
    <div class="content_sec">
        <!-- launch -->
        <section class="tab_sec" id="tab-sec">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="tab_in_sec">
                            <h2><span></span><strong>Tabs and accordion collaboration using trigger click .</strong></h2>
                            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingOne">
                                        <h4 class="panel-title">
                                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="active">Program Overview</a>
                                        </h4>
                                    </div>
                                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                        <div class="panel-body">
                                            <p>
                                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                                                of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
                                                popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of
                                                Lorem Ipsum.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingTwo">
                                        <h4 class="panel-title">
                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Program Eligibility</a>
                                        </h4>
                                    </div>
                                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                        <div class="panel-body">
                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed eros tempor, varius ipsum vel, viverra nisl. Nam elementum lacus vitae dui ultrices, quis scelerisque ex gravida. Nulla feugiat
                                                nulla et ligula luctus, non placerat urna pulvinar. Nullam vitae neque vitae sem volutpat scelerisque mattis nec tortor. Nullam condimentum est eu magna sagittis, a pretium ligula rhoncus.
                                                Curabitur sollicitudin erat at dui vulputate, dignissim pharetra tellus facilisis. Nam ornare ipsum id lectus cursus, eget molestie sem tempus. Quisque faucibus elit sed sapien viverra, sit
                                                amet pellentesque est egestas. Praesent sit amet lacus a libero commodo blandit sit amet a diam. Quisque vitae metus non leo aliquam convallis eget facilisis nulla. Quisque sit amet urna
                                                ullamcorper, volutpat turpis quis, ornare diam. Ut vitae felis ac mi viverra sagittis. Nam euismod erat vel ipsum maximus, sed gravida eros posuere.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingThree">
                                        <h4 class="panel-title">
                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Program Arrangement</a>
                                        </h4>
                                    </div>
                                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                                        <div class="panel-body">
                                            <p>
                                                Sed ultricies nulla id nulla rhoncus efficitur. Sed eu mi et tortor imperdiet pellentesque. Aenean eu mi vitae urna tempor imperdiet rutrum ac tortor. Maecenas pharetra erat non est
                                                condimentum tempor.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- End content sec -->
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(function (e) {
    $(".tab_in_sec .panel-default>.panel-heading a").click(function () {
        if ($(this).is(".active")) {
            $(this).removeClass("active");
        } else {
            $(".tab_in_sec .panel-default>.panel-heading a.active").removeClass("active");
            $(this).addClass("active");
        }
    });
    $(".aa").on("click", function () {
        $("#headingOne a").trigger("click");
    });
    $(".bb").on("click", function () {
        $("#headingTwo a").trigger("click");
    });
    $(".cc").on("click", function () {
        $("#headingThree a").trigger("click");
    });
    $("#headingOne").on("click", function () {
        $(".aa").addClass("actives").parent("li").siblings("li").find("a").removeClass("actives");
    });
    $("#headingTwo").on("click", function () {
        $(".bb").addClass("actives").parent("li").siblings("li").find("a").removeClass("actives");
    });
    $("#headingThree").on("click", function () {
        $(".cc").addClass("actives").parent("li").siblings("li").find("a").removeClass("actives");
    });
    $('.tab_first .panel-heading ul li a[data-toggle="collapse"]').on("click", function () {
        $('.tab_first .panel-heading ul li a[data-toggle="collapse"]').removeClass("actives");
        $(this).addClass("actives");
    });
    $(".palceholder").click(function () {
        $(this).siblings("input").focus();
    });
    $(".form-control").focus(function () {
        $(this).siblings(".palceholder").hide();
    });
    $(".form-control").blur(function () {
        var $this = $(this);
        if ($this.val().length == 0) $(this).siblings(".palceholder").show();
    });
    $(".form-control").blur();
    $('.tab_first .panel-heading ul li a[href^="#"]').on("click", function (event) {
        var target = $(this.getAttribute("href"));
        if (target.length) {
            event.preventDefault();
            $("html, body")
                .stop()
                .animate(
                    {
                        scrollTop: target.offset().top - 70,
                    },
                    1000
                );
        }
    });
});
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS