Acordeon - collapse

<< Click to Display Table of Contents >>

Navigation:  Bootstrap >

Acordeon - collapse

Previous pageReturn to chapter overviewNext page

Tela

 

bootstrap8

Fonte

 

<!DOCTYPE html>

<html>

<head>

  <link href="css/bootstrap.min.css" rel="stylesheet">

  <link href="css/bootstrap-responsive.min.css" rel="stylesheet">

  <style>

       

  </style>

</head>

<body>

  <div class="container">

      <div class="row">

          <div class="span12">

              <h2>

                   Accordion</h2>

              <div class="accordion" id="meuaccordion">

                  <div class="accordion-group">

                      <div class="accordion-heading">

                          <a href="#elemento01" class="accordion-toggle" data-toggle="collapse">Titulo Elemento

                               01</a>

                      </div>

                      <div class="accordion-body collapse in" id="elemento01">

                          <div class="accordion-inner">

                              <div class="well">

                                   Corpo do elemento 01 texto texto texto texto texto texto texto texto texto texto

                                   texto texto texto texto texto texto texto texto texto texto texto texto texto texto

                                   texto texto texto texto texto texto

                              </div>

                          </div>

                      </div>

                  </div>

                  <div class="accordion-group">

                      <div class="accordion-heading">

                          <a href="#elemento02" class="accordion-toggle" data-toggle="collapse">Titulo Elemento

                               01</a>

                      </div>

                      <div class="accordion-body collapse" id="elemento02">

                          <div class="accordion-inner">

                              <div class="well">

                                   Corpo do elemento 01 texto texto texto texto texto texto texto texto texto texto

                                   texto texto texto texto texto texto texto texto texto texto texto texto texto texto

                                   texto texto texto texto texto texto

                              </div>

                          </div>

                      </div>

                  </div>

                  <div class="accordion-group">

                      <div class="accordion-heading">

                          <a href="#elemento03" class="accordion-toggle" data-toggle="collapse">Titulo Elemento

                               01</a>

                      </div>

                      <div class="accordion-body collapse" id="elemento03">

                          <div class="accordion-inner">

                              <div class="well">

                                   Corpo do elemento 01 texto texto texto texto texto texto texto texto texto texto

                                   texto texto texto texto texto texto texto texto texto texto texto texto texto texto

                                   texto texto texto texto texto texto

                              </div>

                          </div>

                      </div>

                  </div>

              </div>

          </div>

      </div>

  </div>

</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>

<script src="js/bootstrap.min.js"></script>

</html>