[Resolved] Bootstrap Collapse – expand first post

[Author]

Posts

[David Gimenez]

Link to documentation page: https://toolset.com/documentation/user-guides/digging-into-view-outputs/#bootstrap-collapse-expand-first-post

This code doesn't work.
The last tag must be </div>. However it doesn't work if I change it.

[Luo Yang]

Hi,

You are right, it is broken, I will escalate it, please try below example codes, and check if it works in your website:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
    <wpv-loop>
        [wpv-item index=1]
        <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="#accordion2" href="#collapse-[wpv-post-id]" aria-expanded="true" aria-controls="collapse-[wpv-post-id]">
                    [wpv-post-title]
                </a>
              </h4>
            </div>
            <div id="collapse-[wpv-post-id]" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-[wpv-post-id]">
      			<div class="panel-body">
                 [wpv-post-body view_template="None"]
            </div>
       </div>
        [wpv-item index=other]
        <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="#accordion2" href="#collapse-[wpv-post-id]" aria-expanded="false" aria-controls="collapse-[wpv-post-id]" class="collapsed">
                  [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-body view_template="None"]
            </div>
       </div>    
    </wpv-loop>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found][wpml-string context="wpv-views"]<strong>No posts found</strong>[/wpml-string][/wpv-no-items-found]
[wpv-layout-end]

More help:
hidden link

[David Gimenez]

Hi Luo. Thanks for your answer.

That code doesn't work. I think that there is a missing tag.

However I found the solution.

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="accordion" id="accordion2">
    <wpv-loop>
        [wpv-item index=1]
       <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#collapse-[wpv-post-id]">[types field="servei-del-negoci"][/types]</a>
                </h4>
            </div>
            <div id="collapse-[wpv-post-id]" class="panel-collapse collapse in">
                <div class="panel-body">
                   [types field='descripcio-servei-negoci'][/types]
                </div>
            </div>
        </div>
        [wpv-item index=other]  
       <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#collapse-[wpv-post-id]">[types field="servei-del-negoci"][/types]</a>
                </h4>
            </div>
            <div id="collapse-[wpv-post-id]" class="panel-collapse collapse">
                <div class="panel-body">
                   [types field='descripcio-servei-negoci'][/types]
                </div>
            </div>
        </div>    
    </wpv-loop>
  </div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found][wpml-string context="wpv-views"]<strong>No posts found</strong>[/wpml-string][/wpv-no-items-found]
[wpv-layout-end]

[David Gimenez]

My issue is resolved now. Thank you!