[Resolved] How to use accordions in a View output with the first accordion open

[Author]

Posts

[Ljuba]

A View displays a list of terms, and for each term has a nested View to display certain posts with that term.

How to display this as an accordion, one section for each term?

[Ljuba]

Again same think. I posted https://toolset.com/forums/topic/featured-taxonomies/#post-956557 and nothing appear on Dashboard.

P.S. - I have same issue with 'modals' (click on credit cards and banks logos) and 'accordions' as in both cases it basically display only first post View, after I 'wrap' View in new View. I t probably I'm doing something wrong.

[Nigel]

I used the example from the Bootstrap docs and included the minimum markup required for it to work.

Here's what my Loop Output section looks like:

[wpv-layout-start]
  [wpv-items-found]
  <div class="panel-group" id="accordion">
  <!-- wpv-loop-start -->
    <wpv-loop>

      <div class="panel panel-default">

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

        <div id="collapse[wpv-taxonomy-id]" class="panel-collapse collapse">
          <div class="panel-body">
            [wpv-view name="offers-of-given-type"]
          </div>
        </div>

      </div>

    </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]

You can see the results in the screen recording.

[Ljuba]

Thanks. It works...but I have still the problems.

1) All accordions are presented closed, and I want (need, must to have) that first accordion be opened. I tried many combinations, but ZERO. I finally get sort of conclusion how that is not possible as all items are in loop (so, behavior must be the same - what I get, as or all are closed or all are opened).

Also, I tried to somehow get 'toggle' to work, as I thought that it should to solve the problem (so, set to open - obviously for ALL, but also activate 'toggle' what should to lead that only first will be open - what I want).

2) Issue is that I couldn't achieve that, not even by direct code, not even by JS (my very bad side).

So, now my accordion View looks as

[wpv-layout-start]
  [wpv-items-found]
  <div class="panel-group" id="accordion">
  <!-- wpv-loop-start -->
    <wpv-loop>

<div aria-multiselectable="true" role="tablist" id="accordion" class="panel-group">
    <div class="panel panel-default">
        <a title="[wpv-taxonomy-title]" aria-controls="collapse[wpv-taxonomy-id]" aria-expanded="true" href="#collapse[wpv-taxonomy-id]" data-parent="#accordion" data-toggle="collapse" id="heading[wpv-taxonomy-id]" role="tab" class="panel-heading collapsed">
            <span class="fa icon-indicator"></span>
            <span class="panel-title">[wpv-taxonomy-title]</span>
        </a>
        <div aria-labelledby="heading[wpv-taxonomy-id]" role="tabpanel" class="panel-collapse collapse" id="collapse[wpv-taxonomy-id]" aria-expanded="true">
            <div class="panel-body">
                [wpv-view name="view-para-ofertas-single"]
            </div>
        </div>
    </div>
</div> 

    </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]

[Nigel]

You can use the wpv-item shortcode to output something different for the first iteration of the loop, i.e.

<wpv-loop>
[wpv-item index=1]
<!-- markup here that has an open tab -->
[wpv-item index=other]
<!-- same markup but with a closed tab -->
</wpv-loop>

Because you only need something different for the first loop item that should be sufficient.

[Ljuba]

GREAT! Works like charm. Thanks.