Custom Accordion




<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">

============================
HTML

<div class="tab">
                            <div class="tab-1">
                                <div class="tab-btn">
                                    <h3>Real Time Market Information</h3>
                                   <i class="fa fa-caret-down" aria-hidden="true"></i>
                                </div>
                                <div class="tab-contant">
                                    <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.</p>
                                 
                                </div>
                            </div>
                            <div class="tab-1">
                                <div class="tab-btn">
                                    <h3>Mobile Trading on Platforms</h3>
                                    <i class="fa fa-caret-down" aria-hidden="true"></i>
                                </div>
                                <div class="tab-contant">
                                    <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.</p>
                                 
                                </div>
                            </div>
                            <div class="tab-1">
                                <div class="tab-btn">
                                    <h3>Advance Charts</h3>
                                    <i class="fa fa-caret-down" aria-hidden="true"></i>
                                </div>
                                <div class="tab-contant">
                                    <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.</p>
                                 
                                </div>
                            </div>
                            <div class="tab-1">
                                <div class="tab-btn">
                                    <h3>Fast Bank Deposits & Withdrawals</h3>
                                    <i class="fa fa-caret-down" aria-hidden="true"></i>
                                </div>
                                <div class="tab-contant">
                                    <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.</p>
                                 
                                </div>
                            </div>
                            <div class="tab-1">
                                <div class="tab-btn">
                                    <h3>Competitive Fee Structure with Market</h3>
                                    <i class="fa fa-caret-down" aria-hidden="true"></i>
                                </div>
                                <div class="tab-contant">
                                    <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.</p>
                                 
                                </div>
                            </div>
                        </div>

==============================
CSS

.tab{
    float: left;
    width: 100%;
}
.tab-1{
    border: solid 1px #d22424;
    border-bottom: none;
    border-top: none;
}
.tab-1:nth-child(1){
    border-top: solid 1px #d22424;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.tab-1:last-child{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.tab-1:last-child .tab-btn{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.tab-btn {
    padding: 10px;
        background: #f53f3f;
    border-bottom: solid 1px #d22424;
    cursor: pointer;
    margin-bottom: 2px;
}
.tab-btn h3{
    margin: 0px;
    display: inline-block;
    color: #fff;
    font-size: 16px;
}
.tab-contant{
    padding: 20px;
    display: none;
    border-bottom: solid 1px #d22424;
}
.tab-contant p{
    padding: 0px;
    text-align: justify;
    font-size: 13px;
}
.tab-contant p span{
    color: #fe4902;
}
.active{
    display: block;
}
.tab-btn i{
    float: right;
    line-height: 26px;
    transform: rotate(-90deg);
    transition: all 0.3s;
    color: #fff;
}
i.act{
    transform: rotate(0deg);
}

==========================
JS

$('.tab-btn').click(function(){
  $(this).siblings().slideToggle();
   $(this).parent().siblings().children('.tab-contant').slideUp();
   $(this).children('i').toggleClass('act');
   $(this).parent().siblings().children('.tab-btn').children('i').removeClass('act');
});
$('.tab-1:nth-child(1)').children('.tab-contant').addClass('active');
$('.tab-1:nth-child(1)').children('.tab-btn').children('i').addClass('act');

Comments