Desplegables

Este componente sólo se puede usar en sitios externos a argentina.gob.ar.

Usando un link

Desplegar texto oculto

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


                        <a data-toggle="collapse" href="#desplegable" aria-expanded="false" aria-controls="desplegable">Desplegar texto oculto</a>
                        <div class="collapse" id="desplegable">
                            <p>Texto oculto.</p>
                        </div>

Usando un botón


                        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#desplegable" aria-expanded="false" aria-controls="desplegable">Abrir</button>
                        <div class="collapse" id="desplegable">
                            <p>Texto oculto.</p>
                        </div>

Panel desplegable

Desplegar panel

Panel Body

Panel Footer


                        <div class="panel-group">
                          <div class="panel">
                            <div class="panel-heading">
                              <h4 class="panel-title">
                                <a data-toggle="collapse" href="#collapse1">Desplegar panel</a>
                              </h4>
                            </div>
                            <div id="collapse1" class="panel-collapse collapse">
                              <div class="panel-body">Panel Body</div>
                              <div class="panel-footer">Panel Footer</div>
                            </div>
                          </div>
                        </div>

Acordeón

Collapsible Group 1

Collapsible Group 2

Collapsible Group 3


                        <div class="panel-group" id="accordion">
                              <div class="panel">
                                  <div class="panel-heading">
                                      <h4 class="panel-title">
                                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
                                      </h4>
                                  </div>
                                  <div id="collapse1" class="panel-collapse collapse in">
                                      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                                  </div>
                              </div>
                              <div class="panel">
                                  <div class="panel-heading">
                                      <h4 class="panel-title">
                                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
                                      </h4>
                                  </div>
                                  <div id="collapse2" class="panel-collapse collapse">
                                      <div class="panel-body">Lorem ipsum dolor sit amet.</div>
                                  </div>
                              </div>
                              <div class="panel">
                                  <div class="panel-heading">
                                      <h4 class="panel-title">
                                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
                                      </h4>
                                  </div>
                                  <div id="collapse3" class="panel-collapse collapse">
                                      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisi onsequat.</div>
                                  </div>
                              </div>
                          </div>

Componentes