[Resuelto] Crear un listado de resultados en un acordeon

[Autor]

Mensajes

[Rafael Corts]

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

[Nigel Supporter Languages: Inglés (English ) Español (Español ) Timezone: Europe/London (GMT+01:00)]

Hola Rafa

Te sugiero aprovechar de Bootstrap.

El reto es usar Views para generar el markup de HTML en el formato requerido: hidden link

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.

[Rafael Corts]

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

[Rafael Corts]

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

[Nigel Supporter Languages: Inglés (English ) Español (Español ) Timezone: Europe/London (GMT+01: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]"

[Rafael Corts]

Perfecto ya puedo mostrar el numero de resultados. Pero el tema de anidar las dos vistas no consigo hacerlo.
te muetro como lotengo: hidden link
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

[Nigel Supporter Languages: Inglés (English ) Español (Español ) Timezone: Europe/London (GMT+01:00)]

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

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

[Rafael Corts]

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