3

Buenos días gente,

Necesito crear una página de ayuda donde introduzca un título y al pulsar se despliegue el texto. Sería algo parecido a la imagen siguiente: Página ejemplo ayuda

4
  • w3schools.com/howto/… el 1 jul. 2016 a las 10:43
  • si no puedes utilizar bootstrap la respuesta que he puesto de w3schools no requiere nada! el 1 jul. 2016 a las 11:05
  • Muchas gracias!!!!!
    – Aaron VC
    el 4 jul. 2016 a las 11:36
  • Hola @Aavaron VC. si alguna de las respuestas te fue de ayuda y ayudó a solucionar tu problema te recomiendo que aceptes una respuesta :) un saludo. el 5 jul. 2016 a las 7:33

3 respuestas 3

2

Directamente de la página oficial de w3:

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}
<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Section 1</button>
<div class="panel">
  <p>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.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>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.</p>
</div>

<button class="accordion">Section 3</button>
<div id="foo" class="panel">
  <p>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.</p>
</div>

0

Nose si has utilizado Bootstrap, pero sino, te recomiendo que lo utilices, porque una de las funcionalidades que tiene, es hacer justamente lo que pides, te indico la url donde puedes ver el ejemplo en uso: http://getbootstrap.com/javascript/#collapse-example-accordion

<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">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </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">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </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">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

También lo puedes hacer con jquery: http://plugins.jquery.com/ui.accordion/

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>
<body>

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>


</body>
</html>

Espero que te sirva

1
  • 1
    Si lo he utilizado el bootstrap pero en el Intel XDK que es el programa donde estoy desarrollando la app no permite utilizar bootstrap porque sino sería una gozada. Muchas gracias.
    – Aaron VC
    el 1 jul. 2016 a las 10:56
0

Una alternativa sin necesidad de usar JavaScript, sólo usando HTML5 y CSS3. La idea es similar a la de esta otra pregunta: usar un checkbox oculto y un label, junto al selector precedente ~ para mostrar/esconder la descripción a la pregunta.

En estado normal, la descripción está oculta, pero cuando se marca el checkbox (gracias al label, sin necesidad de JavaScript), entonces el div que contiene la respuesta a la pregunta se muestra (haciendo un selector como input:checked ~ div).

Algo como esto:

.qa {
  margin-bottom:10px;  
}
.qa input {
  display:none;
}
.qa label {
  display:block;
  height:30px;
  line-height:30px;
  font-weight:bold;
  text-transform:uppercase;
}
.qa label:before {
  content:"+";
  display:inline-block;
  height:30px;
  width:30px;
  background:#ccc;
  color:White;
  text-align:center;
  margin-right:10px;
}
.qa div {
  display:none;
  padding-top:5px;
}
.qa input:checked ~ label:before {
  content:"-";
  background:#3a4;
}
.qa input:checked ~ div {
  display:block;
}
<div class="qa">
  <input type="checkbox" id="qa0" />
  <label for="qa0">Lorem ipsum dolor sit amet?</label>
  <div>
    Consectetur adipiscing elit. Nulla fermentum lacinia efficitur. Curabitur eget lobortis magna, eu placerat ligula. Integer commodo felis in nibh condimentum, at volutpat justo rhoncus. Vivamus eget est id tortor luctus dapibus in sed nisl. Aenean porttitor lacinia facilisis. Duis lobortis euismod ipsum, eget sodales ipsum efficitur vitae.
  </div>
</div>

<div class="qa">
  <input type="checkbox" id="qa1" />
  <label for="qa1">Aenean in mauris quis nisi ornare aliquet?</label>
  <div>
    Nulla dolor nulla, cursus non justo non, iaculis tempor tellus. Vestibulum scelerisque nisl eget erat dignissim, in laoreet diam auctor. Fusce rhoncus justo a ipsum elementum commodo. In et quam vel tortor commodo tempus. Fusce sem risus, euismod sit amet gravida nec, finibus quis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida leo vel velit viverra commodo.
  </div>
</div>

Un "inconveniente" de esta solución es que permite múltiples preguntas estar abiertas al mismo tiempo, aunque no se especifica nada en la pregunta sobre si eso es un requerimiento o no. Otro inconveniente (esta vez sin comillas) es que no es sencillo de animar (se podría hacer con transiciones CSS, pero lo ideal sería pasar el height de 0 a auto y los navegadores no soportan las animaciones con auto).

1
  • Muchas gracias por el aluvión de respuestas!!!Muy agradecido
    – Aaron VC
    el 4 jul. 2016 a las 11:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.