[Resolved] Accordion Collapsible Results of the Tax hierarchy & their posts

[Author]

Posts

[ramez-refaatG]

- Tell us what you are trying to do?
Kindly I want to make the results appearing in my views to appear as Accordion Collapsible so the user can see less or more results in one page.
Forgive me I’m not a developer, that’s why I use Toolset to use UI ... but needed to know how to apply it.
Even when Luo gave me the link about the Accordion I didn’t know how to apply it in my case, where, how...? So kindly simply explain to me How & Where that you suggest me to do or did on my behalf so that I learn.

- Is there any documentation that you are following?
No.

- Is there a similar example that we can see?
hidden link

- What is the link to your site?
Lifechangingtruth.org

[Nigel]

You mean that if your View shows a page of 10 results, each result should appear inside its own collapsed accordion pane (presumably with the post title as the title of the tab)?

And the users would click the post title to expand the pane to see more details (featured image, post excerpt, whatever).

Is that what you have in mind?

[ramez-refaatG]

Yes sir that's what I meant.
Example:
hidden link

Want to be applied on this page
hidden link

Thanks.

[Nigel]

I'm not sure if you have an existing solution for accordion panels.

Toolset works with Bootstrap (check the settings at Toolset > Settings to make sure Bootstrap is loaded by Toolset, unless you have a reason not to), and the markup required for accordions is described here: hidden link

To output a View as accordions you can take the markup from the Bootstrap documentation example and adapt it so that it is "dynamic", i.e. not only the content but the markup that is required for the accordions to work is generated for each iteration of the loop of post results.

You need a wrapper div which appears only once, so I edited the Loop Output section of the View to add it outside of the wpv-loop tags, but within the wpv-items-found shortcodes, like so:

[wpv-layout-start]
	[wpv-items-found]
	<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
		<!-- wpv-loop-start -->
		<wpv-loop>
			[wpv-post-body view_template="loop-item-in-accordion-output"]
		</wpv-loop>
		<!-- wpv-loop-end -->
	</div>
	[/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 fields to be output are gathered in a linked template, and the contents of that template look like this:

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-[wpv-post-id]">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-[wpv-post-id]" aria-expanded="false" aria-controls="collapse-[wpv-post-id]">
          [wpv-post-title]
        </a>
      </h4>
    </div>
    <div id="collapse-[wpv-post-id]" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-[wpv-post-id]">
      <div class="panel-body">
		[wpv-post-excerpt]
      </div>
    </div>
  </div>

There I am not only using the wpv-post-title and wpv-post-excerpt shortcodes to output the panel headers and panel contents for each post, but I'm also using wpv-post-id to create unique IDs for the sections for each iteration of the loop, so that the opening and closing of the panels functions.

If you use a different solution than Bootstrap, the details will be different, but the principles the same.

[ramez-refaatG]

Sorry sir all the past days I've tried to figure it but couldn't ... please tell me how to make it practically on the page:
hidden link

The creds are already given in another ticket
https://toolset.com/documentation/user-guides/using-bootstrap-css-elements-content/
if you need it please let me know.

I want to show the the sub taxonomies carrying this
-- (Second)
--- (Third)
Posts (in table to be hidden or unhidden on clicking on them)
Sorry about that for I"m not a developer & then I'll imitate what you did in another cases.

I don't know exactly the following to teach me please let me know exactly how to do it myself in my current case:
- Where I should add this code before or after the codes in the View?
- Where to be added (which View (Parent, Child or Posts or in all?)?
- Shall I create a template for t his?

Thanks a lot.

[Waqar]

Hi there,

Thanks for writing back.

Nigel is away until early next week, but I'll be happy to follow up on this ticket.

As much as we would like to help, the scope of support that we provide is limited to Toolset's own features and options. You can read details about what is covered under our support policy at https://toolset.com/toolset-support-policy/

For a more personalized and efficient assistance around custom HTML, CSS and Javascript code, you can consider hiring a professional from our list of recommended contractors: https://toolset.com/contractors/

We do our best to guide in the right direction, whenever possible and to split the results of your parent view ( "Parent - Public - Ar - Subjects" ) into a collapsible accordion ( ref: hidden link ), you can update its code in "Loop Editor" section, from:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<ul class="wpv-loop js-wpv-loop">
		<wpv-loop>
<h2>[wpv-post-body view_template="loop-item-in-parent-public-ar-subjects"]:</h2><li>[wpv-view name="child-public-ar-subjects"]</li>
		</wpv-loop>
	</ul>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]لا يوجد محتوى[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

To:

[wpv-layout-start]
  [wpv-items-found]
  <!-- wpv-loop-start -->
  <div class="panel-group wpv-loop js-wpv-loop" id="accordion" role="tablist" aria-multiselectable="true">

    <wpv-loop>
      <div class="panel panel-default">

        <div class="panel-heading" role="tab" id="heading[wpv-taxonomy-id]">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse[wpv-taxonomy-id]" aria-expanded="true" aria-controls="collapse[wpv-taxonomy-id]">[wpv-taxonomy-title]</a>
          </h4>
        </div>

        <div id="collapse[wpv-taxonomy-id]" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading[wpv-taxonomy-id]">
          <div class="panel-body">
            <h2>[wpv-post-body view_template="loop-item-in-parent-public-ar-subjects"]:</h2>
            <ul>
              <li>[wpv-view name="child-public-ar-subjects"]</li>
            </ul>
          </div>
        </div>
     
      </div>
    </wpv-loop>

  </div>
  <!-- wpv-loop-end -->
  [/wpv-items-found]
  [wpv-no-items-found]
    <strong>[wpml-string context="wpv-views"]لا يوجد محتوى[/wpml-string]</strong>
  [/wpv-no-items-found]
[wpv-layout-end]

Using the same example code, you can also update the results in the child view.

I hope this helps and please let me know how it goes.

regards,
Waqar

[ramez-refaatG]

Oh thanks a lot... I highly appreciate your help...
I applied it for the Parent & it brought the results as I wanted.

I tried to do it for the Child but something missing...the view wasn't correct.
Please help me in this last step.

[Waqar]

Hi there,

Thank you for waiting.

To show you the example of how nested accordion works, I've updated the code in your "Child - Public - Ar - Subjects" view's "Loop Editor", from:

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start -->
    <ul class="wpv-loop js-wpv-loop">
        <wpv-loop>
            <li>[wpv-taxonomy-link]:</li>
[wpv-view name="child-public-ar-subjects"]
         [wpv-view name="posts-public-ar-subjects"]
        </wpv-loop>
    </ul>
    <!-- wpv-loop-end -->
    [/wpv-items-found]
    [wpv-no-items-found]
        <strong>[wpml-string context="wpv-views"][/wpml-string]</strong>
    [/wpv-no-items-found]
[wpv-layout-end]

To:

[wpv-layout-start]
  [wpv-items-found]
  <!-- wpv-loop-start -->
   <div class="panel-group wpv-loop js-wpv-loop" id="accordion[wpv-attribute name='pid']" role="tablist" aria-multiselectable="true">
 
    <wpv-loop>
      <div class="panel panel-default">
 
        <div class="panel-heading" role="tab" id="heading[wpv-taxonomy-id]">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion[wpv-attribute name='pid']" href="#collapse[wpv-taxonomy-id]" aria-expanded="true" aria-controls="collapse[wpv-taxonomy-id]">[wpv-taxonomy-title]</a>
          </h4>
        </div>
 
        <div id="collapse[wpv-taxonomy-id]" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading[wpv-taxonomy-id]">
          <div class="panel-body">
            <h2>[wpv-post-body view_template="child-public-ar-subjects"]:</h2>
            <ul>
              <li>[wpv-view name="posts-public-ar-subjects"]</li>
            </ul>
          </div>
        </div>
      
      </div>
    </wpv-loop>
 
  </div>
  <!-- wpv-loop-end -->
  [/wpv-items-found]
  [wpv-no-items-found]
    <strong>[wpml-string context="wpv-views"][/wpml-string]</strong>
  [/wpv-no-items-found]
[wpv-layout-end]

I also needed the parent taxonomy's ID in this view, so I updated the line in "Parent - Public - Ar - Subjects" view's "Loop Editor" from:

<li>[wpv-view name="child-public-ar-subjects"]</li>

To:

<li>[wpv-view name="child-public-ar-subjects" pid="[wpv-taxonomy-id]"]</li>

The nested accordion is now working and you can update the code of any inner results accordingly.

Important note: For a more personalized and efficient assistance around custom code, we recommend hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[ramez-refaatG]

My issue is resolved now. Thank you!