Skip Navigation

[Resuelto] Crear un listado de resultados en un acordeon

This support ticket is created hace 4 años, 8 meses. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Hoy no hay técnicos de soporte disponibles en el foro Juego de herramientas. Siéntase libre de enviar sus tiques y les daremos trámite tan pronto como estemos disponibles en línea. Gracias por su comprensión.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

Etiquetado: ,

Este tema contiene 7 respuestas, tiene 2 mensajes.

Última actualización por Rafael Corts hace 4 años, 8 meses.

Asistido por: Nigel.

Autor
Mensajes
#1559441
Captura de pantalla 2020-03-23 08.23.53.png
Captura de pantalla 2020-03-23 08.24.05.png

Hola Nigel, necesito crear un listado en formato acordeón, te adjunto imagen para que veas el estilo. como puedo hacer para que se genere dinamicamente, por un lado tengo unos módulos (titulos) y dentro de los módulos el temario temarios.
Haber si me puedes indicar como organizarlo para poder generar un menu como el que te adjunto en las imagenes.
Saludos.
Rafa Corts

#1559863

Nigel
Supporter

Idiomas: Inglés (English ) Español (Español )

Zona horaria: Europe/London (GMT+00:00)

Hola Rafa

Te sugiero aprovechar de Bootstrap.

El reto es usar Views para generar el markup de HTML en el formato requerido: enlace oculto

Habra falta dos Views, uno que genera los módulos y otro anidado que muestra los temarios.

Será necesario usar el Views clásico (no el Blocks), y por cierto tendrías que deshabilitar el wrapper DIV en el segundo View (la opción "Disable the wrapping DIV around the View") para tener más control del markup.

#1561697

Hola nigel, esto trabajando con el menu de acordeón he creado las dos vistas, tengo un problema con el código de bootstrap en cada bloque me genara una ID diferentes, numerica

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-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="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-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>

Como puedes ver cada bloque se genera una ID diferente numerica.

<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">

Como puedo obtener una numeración según el numero de vistas?
Gracias.
Saludos.
Rafa Corts

#1561887

Hola Nigel he encontrado una posible solución en la primera vista, de las asignaturas. Con este codigo funciona

<div class="card">
<div class="card-header" id="heading[wpv-post-id]">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse[wpv-post-id]" aria-expanded="true" aria-controls="collapse[wpv-post-id]">
[wpv-post-title] [wpv-post-id]  
          </button>
      </h2>
    </div>
<div id="collapse[wpv-post-id]" class="collapse show" aria-labelledby="heading[wpv-post-id]" data-parent="#accordionExample">
      <div class="card-body">
        Temari 1
        
        [wpv-view name="llistat-meteria-1eso" orderby="title"]
      </div>
    </div>
   </div>

Lo único que de un principio me quedan todos abiertos.
Lo que no se como hacer es anidar la segunda vista para que se muetre los contenidos de cada asignatura en la acordeón.
He creado ña vista de contenidos pero no se si de esta vista he de crear un filtro variable para que solo me muetre los contenidos de una de las asignaturas.
Haber si me puedes indicar como hacer una vista anidada.
Gracias por todo.
Rafa Corts

#1562305

Nigel
Supporter

Idiomas: Inglés (English ) Español (Español )

Zona horaria: Europe/London (GMT+00:00)

Hola Rafa

El shortcode wpv-loop-index cuenta las iteraciones del View (https://toolset.com/documentation/user-guides/views/views-shortcodes/#wpv-loop-index).

Puedes usar un shortcode condicional que prueba si es la primera iteración, p.j., y así solo añadir la clase show que indica esta abierto donde quieres.

class="collapse [wpv-conditional if="( '[wpv-loop-index]' eq '1' )"]show[/wpv-conditional]"
#1562375

Perfecto ya puedo mostrar el numero de resultados. Pero el tema de anidar las dos vistas no consigo hacerlo.
te muetro como lotengo: enlace oculto
No consigo configurar la segunda vista, para que se muestre de cada asignatura sus temas, ahora se muestran todos los temas en cada signatura.
como puedo anidar las dos vistas?
Gracias por todo.
Rafa Corts

#1562387

Nigel
Supporter

Idiomas: Inglés (English ) Español (Español )

Zona horaria: Europe/London (GMT+00:00)

¿La segunda vista incluye un filtro de relación para especificar el padre?

¿Supongo que hay relación entre módulos << temarios?

#1562529

Gracias Nigel por la paciencia y los conocimientos que has aportado.
Saludos.
Rafa Corts