[Gelöst] Accordion with Catgories and Posts

[Author]

Artikel

[ThorstenS967]

Hi,
I use Oxygen Builder in combination with Toolset. I have several CPT's. One of these CPT's is the "FAQ" post types which also contains some castom taxonomies (custom categories). You can see them on the attached image. However, I created a page in Oxygen and in it a section with a div, which displays an accordion. The accordion titles are the titles from the custom taxonomy. The content of these single accordion titles are the post titles (from the posts) that belong to the corresponding custom categories. However, for some reason he shows for example only the first 10 Post titles for the category "Fragen zur Bibel", though it has 35 posts (see also attached screenshot). Here is the custom Code I used fot this:

PHP:

<?php
$custom_terms = get_terms('fragenkategorie');
foreach($custom_terms as $custom_term) {
    wp_reset_query();
    $args = array('post_type' => 'faq',
        'tax_query' => array(
            array(
                'taxonomy' => 'fragenkategorie',
                'field' => 'slug',
                'terms' => $custom_term->slug,
            ),
        ),
     );
  

     $loop = new WP_Query($args);
  
  //var_dump($loop);
     if($loop->have_posts()) {
       echo '<button class="accordion"><h6>'.$custom_term->name.'</h6></button>';
       echo '<div class="panel">';
       echo '<div class="panelDiv">';
       echo '<ul>';
        while($loop->have_posts()) : $loop->the_post();
            echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li><br>';
        endwhile;
       echo '</ul>';
       	echo '</div>';
       echo '</div>';
     }
}
?>

CSS:

CSS:
.accordion {
  background-color: #3d313f;
  color: #ffffff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.6s;
}

.active, .accordion:hover {
  background-color: #5e4f61; 
}

.panel {
  margin-top: 25px;
  /*padding: 15px 30px;*/
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease-out;
}

.panel a {
  color: #3d313f;
  transition: 0.6s;
}

.panel a:hover {
  color: #a293a5;
}

.active {
  margin-bottom: -25px !important;
}

.panelDiv {
  padding: 30px 50px;
}

.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 14px;
  color: white !important;
  float: right;
  margin-left: 5px;
  margin-top: -23px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
  color: white;
}

JS:

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

I don't know, if there is something wrong with my code, but now I want to make the exact accordion with Toolset. For that reason I already created two classic views. One view for the custom category "Fragenkategorien" and one for the corresponding CPT "FAQ". How can I realize the accordion mentioned above with Toolset?
Thanks
Thorsten

[ThorstenS967]

Update: I could display the Toolset View in the frontend, but there is a missing filter in one of the views I guess. You can see how it looks right now in the frontend (attached screens). What filter in which view do I have to set to get the right results?
Right now, this is my code in the category view:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop>
		<button class="accordionNew"><h6>[wpv-taxonomy-title]</h6></button>
      		<div class="panel">
              <div class="panelDiv">
                <ul>
                  <li>[wpv-view name="faq-post-view-classic"]</li>
                  </ul>
              </div>
      </div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

The CSS and JS is the same as in the first post from me except that I renamed the accordion class to "accordionNew" because for the moment I display the first accordion as well as the second accordion (the Toolset accordion).

[ThorstenS967]

Update 2: I finally got it. WIth the help of https://toolset.com/documentation/user-guides/views/using-a-child-view-in-a-taxonomy-view-layout/ I could find out the solution and also optimize the final loop output code:

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start -->
    <wpv-loop>
        <button class="accordionNew"><h6>[wpv-taxonomy-title]</h6></button>
            <div class="panel">
              <div class="panelDiv">
                <ul>
                // The <li>-tags come from the "faq-post-view-classic"
                  [wpv-view name="faq-post-view-classic"]
                  </ul>
              </div>
      </div>
    </wpv-loop>
    <!-- wpv-loop-end -->
    [/wpv-items-found]
    [wpv-no-items-found]
        <strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
    [/wpv-no-items-found]
[wpv-layout-end]