Login

Bootstrap Accordian

Author:
Netplay4
Posted:
January 5, 2019
Language:
HTML/template
Version:
Not specified
Tags:
Responsive Bootstrap Web design
Score:
0 (after 0 ratings)

This is an example of Leamug web development, you can find how to add Leamug designer

Collapsible accordion are useful when you want to hide and show large amount of content. If you are looking for a modern, flat and professionally designed Bootstrap accordion, then we have a best choice for you called Trendy css build collapse accordion with plus and minus icons which can be used in your all types of websites.

The Bootstrap accordion with four panels is created. The main div is assigned the panel-group class. The role data attribute is set as tab list while aria-multivariable is set as true. The panel with content div is assigned the panel and panel-default classes while its inner div contains the classes for panel heading, title, and content of the panel. The div showing the panel content is given the panel-body class along with collapse and panel-collapse classes. It will make the panel body collapsed as web page loads.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="bootstrap,bootstrap accordion,accordion with arrow">
    <meta name="author" content="Leamug Development">
    <title>Bootstrap Accordion</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet"> 

  </head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-1 col-md-10">
            <h2 class=" text-white">Bootstrap Accordion</h2>
            <span class="loader pull-right"><span class="loader-inner"></span></span>
            <hr></br>
            
            <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 class="first" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                What is Lorem Ipsum?
                                <span> </span>
                            </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">
                                Why do we use it?
                                <span> </span>
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">
                            <p>It is a long established fact that a reader will be distracted by the readable content
                                 of a page when looking at its layout. The point of using Lorem
                                  Ipsum is that it has a more-or-less normal distribution of letters,
                                   as opposed to using 'Content here, content here', making it look like readable English.
                                   </p>
                            <img src="image//girl.jpg" width="300">
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a class="collapsed last" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Where does it come from?
                                <span> </span>
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                        <div class="panel-body">
                            <p>Contrary to popular belief, Lorem Ipsum is not simply random text.
                                 It has roots in a piece of classical Latin literature from 45 BC, 
                                 making it over 2000 years old. Richard McClintock, a Latin professor 
                                 at Hampden-Sydney College in Virginia, looked up one of the more obscure 
                                 Latin words, consectetur, from a Lorem Ipsum passage.</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a class="collapsed last" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Where can I get some?
                                <span> </span>
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                        <div class="panel-body">
                            <p>There are many variations of passages of Lorem Ipsum available, 
                                but the majority have suffered alteration in some form, by injected humour, 
                                or randomised words which don't look even slightly believable. 
                                If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't 
                                anything embarrassing hidden in the middle of text.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 <!--footer-->
 <div class="footer text-center">
    <p class="text-white">Design by <a href="https://leamug.com/product/bootstrap-accordion/">Leamug</a>
    </p>
</div>
    <!--//footer-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script type="text/javascript"  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

More like this

Comments

Please login first before commenting.