Bootstrap accordion with plus minus

Bootstrap accordion with plus minus
Bootstrap accordion with plus minus
Bootstrap accordion with plus minus

Hello friends today in this article we will learn How to create Bootstrap accordion with plus minus.

Here i will provide complete source code of Bootstrap accordion with plus minus in zip file.

  • Bootstrap Accordion
  • Bootstrap Accordion with plus minus
  • Accordion Bootstrap 4
  • Accordion


HTML CODE

 
      <div class="container demo">
       <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">
                  <i class="more-less fa fa-plus"></i>
                     Savings Account
                </a>
               </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                      Loan is a schemes which offers money to our member for a limit time duration.
                </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">
                        <i class="more-less fa fa-plus"></i>
                        Fixed Deposit
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    Loan is a schemes which offers money to our member for a limit time duration.
                </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">
                        <i class="more-less fa fa-plus"></i>
                        Recurring Deposit
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                    Loan is a schemes which offers money to our member for a limit time duration.
                </div>
            </div>
        </div>
    </div>

CSS COE

<style type="text/css">
    .panel-group .panel {
        border-radius: 0;
        box-shadow: none;
        border-color: #EEEEEE;
    }

    .panel-default > .panel-heading {
        padding: 0;
        border-radius: 0;
        color: #fff;
        background-color: #333;
        border-color: #EEEEEE;
		border-radius:5px;
    }

    .panel-title {
        font-size: 14px;
    }
	
	.panel-body
	{
		background:#f2f2f2;
		padding:10px;
		margin-bottom:10px;
	}

    .panel-title > a {
        display: block;
        padding: 15px;
		color:#fff;
        text-decoration: none;
    }

    .more-less {
        float: right;
        color: #fff;
    }

    body {
       background-color: #26a69a;
    }

    .demo {
      padding-top: 30px;
      padding-bottom:30px;
    }
 </style>

Leave a Reply

avatar
  Subscribe  
Notify of