Duda con acordeón en CSS

[armandas]

Hola amigos, les pido que me ayuden con un problema que me esta volviendo un poco loco ya ;)

Resulta quiero realizar un apartado de preguntas y respuestas, y que las mismas sean forma del acordeón. Es decir, la pregunta frecuente siempre seria visible, pero para ver la respuesta de la pregunta, debemos de darle un clic para abrir el acordeón.

Estoy investigando el código fuente de ésta página: http://flexfit.mintithemes.com/features/f-a-q/ que nos sirve de gran ejemplo y me gusta la idea, quiero realizar algo parecido. Pero cuando escribo el código HTML y CSS tal y como está, el acordeón muestra la pregunta, pero la respuesta se encuentra cerrada y al darle clic no se abre ni reacciona de alguna manera...

Éste seria el código escrito de html y css:

Código HTML:

<div class="toggle">
<div class="title">Cuáles son las formas de pago que aceptamos?<span></span></div>
<div class="inner">
<div>Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.</div>
</div>
</div>
<div class="toggle">
<div class="title">Cuánto tarda en llegar un producto a mi domicilio?<span></span></div>
<div class="inner">
<div>Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.</div>
</div>
</div>
<div class="toggle">
<div class="title">Cuáles son las formas de pago que aceptamos?<span></span></div>
<div class="inner">
<div>Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.</div>
</div>
</div>
<div class="toggle">
<div class="title">Cuánto tarda en llegar un producto a mi domicilio?<span></span></div>
<div class="inner">
<div>Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.</div>
</div>
</div>
 

Código CSS:

.toggle{
    border:1px solid #e8e8e8;
    margin-bottom:20px;
}
.toggle .title{
    font-size:15px;
    font-weight:700px;
    color:#777777;
    display: block;
    padding:20px 20px 20px 50px;
    background: url(images/plus.png) no-repeat 20px 23px;
    cursor: pointer;
}
.toggle .title:hover{
    color:#ed7811;
    background: #f8f8f8 url(images/plus.png) no-repeat 20px 23px;
}
.toggle .title.active{
    color:#ed7811;
    background: #ffffff url(images/minus.png) no-repeat 20px 23px;
}
.toggle .inner{
    display: none;
}
 
 
 
.toggle .inner div{
    padding:20px 20px 20px 20px;
    background: url(images/dotted.png) repeat-x top left;
}
 

Una observación que me di cuenta, es que cuando en la página del ejemplo le doy al clic, el trozo de

.toggle .inner{
display: none;
}

se pone en:

.toggle .inner{
display: block;
}
y entonces es cuando se muestra la respuesta, pero en mi prueba no se cambia el código y no entiendo el porque.. Y al darle clic otra vez, pues hace lo contrario se cambia a display: none; y oculta la respuesta. Qué es lo que me falta para que haga esa acción? de mostrar o no??

Nosé si es que me falta algo del código en CSS, el modo "active" o algo así para que se abra el acordeón al darle clic tal y como viene en la página de ejemplo... O es que tiene javascript o jquery, cosa que no creo la verdad...

Estoy confuso, no me sale de ninguna manera la acción de abrir, aver si me pueden ayudar en dónde está el fallo :(

Miiil Gracias y un saludo compañeros!

[ainvar57]

Esto funciona con jquery, tienes bien puestos lo scripts e inicializados con tus clases?

[armandas]

Iniciado por ainvar57

Esto funciona con jquery, tienes bien puestos lo scripts e inicializados con tus clases?

Gracias, la verdad no me lo esperaba :(

No tengo nada puesto de jquery, y mucho menos combinado con las clases.. Algún concepto básico de como podría hacerlo?

Gracias!

[ainvar57]

Mira el código fuente de la página que das como referencia, en la cabecera tienes los scripts. De todos modos deberías leer algo sobre jquery y la forma de implementarlo.

http://www.jquery.com

Además comentarte que implementar acordeones como ese con jquery es muy sencillo utilizando el ui de jquery (http://jqueryui.com/). Además hay muchos pluggins que hacen esto más o menos fácil. Busca en google, por ejemplo, "acordeones jquery".

[armandas]

Iniciado por ainvar57

Mira el código fuente de la página que das como referencia, en la cabecera tienes los scripts. De todos modos deberías leer algo sobre jquery y la forma de implementarlo.

http://www.jquery.com

Además comentarte que implementar acordeones como ese con jquery es muy sencillo utilizando el ui de jquery (http://jqueryui.com/). Además hay muchos pluggins que hacen esto más o menos fácil. Busca en google, por ejemplo, "acordeones jquery".

Gracias, voy a investigar a ver si lo consigo. Un saludo