[Resolved] Loop item with ultimate blocks: Style is not loading

[Author]

Posts

[TobiasS8611]

I have build a loop item with blocks editor. Everything is working fine. Nevertheless the standard functions are not enough, so I`m looking for gutenberg plugings like ultimate blocks and others.

All separate blocks have the same problem: The style is not loading inside the loop item on the frontend.

What I`m doing wrong? Can you help me?

Standard loop without ultimate blocks (deactivated at the moment): hidden link

[Luo Yang]

Hello,

Since it is a compatibility issue with other plugins(ultimate blocks)
Please duplicate the same problem in a fresh WP installation, and provide a copy of the test site, also point out the problem page URLs, I need to reproduce the same problem in my localhost, thanks
https://toolset.com/faq/provide-supporters-copy-site/

[TobiasS8611]

Hello,

I deactivated all plugins and it is still not loading.
I`ve activated Toolset blocks and I`m using the legacy mode for the views. Could it have something to do with the legacy mode?

Kind regards
Tobias

[Luo Yang]

Does this problem persist if you use Blocks editor to setup the post view?
If it is fixed in view block, then it should be a legacy editor issue.

[TobiasS8611]

Do you have an idea how i can show a collapsed text with the basic blocks editor functions (or with the toolset blocks)?

[Luo Yang]

For the new question: Do you have an idea how i can show a collapsed text with the basic blocks editor functions (or with the toolset blocks)

I assume you are asking for Accordion block feature.

If it is, there isn't such kind of built-in feature within Toolset Blocks plugin, see our document:
https://toolset.com/block-item/

You might consider other plugins, for example:
https://wordpress.org/plugins/search/Accordion/

[TobiasS8611]

I tryed to use the plugin "Accordion Blocks". Its very simple and looks nice.
The online problem is that when I`m opening the accordion, its always opening the first item in the grid.
You can see the behaviour here for example: hidden link

Any ideas?

[Luo Yang]

You need to give each according an unique HTML ID attribute, if you need more assistance for it, please share your website credentials in below private message box

[Luo Yang]

Thanks for the details, I have checked it in your website, it is not possible to customize the HTML div ID of plugin "Accordion Blocks".

Since you are using Bootstrap 4 in your website, you can use Bootstrap Collapse for it, and I have setup a demo in your website:
Edit the content template "Loop item in view"
hidden link
At the bottom, add a shortcode block, with below codes:

<div class="accordion" id="accordion-[wpv-post-id]">
  <div class="card">
    <div class="card-header" id="heading-[wpv-post-id]-1">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapse-[wpv-post-id]-1" aria-expanded="true" aria-controls="collapse-[wpv-post-id]-1">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapse-[wpv-post-id]-1" class="collapse" aria-labelledby="heading-[wpv-post-id]-1" data-parent="#accordion-[wpv-post-id]">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the [php].show

class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-[wpv-post-id]-2">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapse-[wpv-post-id]-2" aria-expanded="false" aria-controls="collapse-[wpv-post-id]-2">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapse-[wpv-post-id]-2" class="collapse" aria-labelledby="heading-[wpv-post-id]-2" data-parent="#accordion-[wpv-post-id]">
<div class="card-body">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-[wpv-post-id]-3">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapse-[wpv-post-id]-3" aria-expanded="false" aria-controls="collapse-[wpv-post-id]-3">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapse-[wpv-post-id]-3" class="collapse" aria-labelledby="heading-[wpv-post-id]-3" data-parent="#accordion-[wpv-post-id]">
<div class="card-body">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</div>
</div>
</div>
</div>
[/php]

You can follow Bootstrap document to customize above Collapse:
hidden link

[TobiasS8611]

Hi Luo,

thanks for your code. This is helping me.
Can you support me with a bit CSS? The looking is too much. What code do I need to have a looking like with the Accordion plugin?

[Luo Yang]

I have done below modifications in your website:
Edit the content template:
hidden link
replace the shortcode block with a Toolset "Fields and Text" block, switch to HTML mode, and change the codes as below:

<div class="accordion" id="accordion-[wpv-post-id]">
    <a id="heading-[wpv-post-id]-1" href="#" class="collapse-heading" data-toggle="collapse" data-target="#collapse-[wpv-post-id]-1" aria-expanded="true" aria-controls="collapse-[wpv-post-id]-1">
          Ausstattung
    </a>
    <div id="collapse-[wpv-post-id]-1" class="collapse" aria-labelledby="heading-[wpv-post-id]-1" data-parent="#accordion-[wpv-post-id]">
      <div class="card-body">
        [types field='ausstattung_neu' separator=', '][/types]
      </div>
    </div>
    <a id="heading-[wpv-post-id]-2" href="#" class="collapse-heading" data-toggle="collapse" data-target="#collapse-[wpv-post-id]-2" aria-expanded="false" aria-controls="collapse-[wpv-post-id]-2">
          Beschreibung
    </a>
    <div id="collapse-[wpv-post-id]-2" class="collapse" aria-labelledby="heading-[wpv-post-id]-2" data-parent="#accordion-[wpv-post-id]">
      <div class="card-body">
        [types field='beschreibung_innen'][/types]
      </div>
    </div>
    <a id="heading-[wpv-post-id]-3" href="#" class="collapse-heading" data-toggle="collapse" data-target="#collapse-[wpv-post-id]-3" aria-expanded="false" aria-controls="collapse-[wpv-post-id]-3">
          Lage
    </a>
    <div id="collapse-[wpv-post-id]-3" class="collapse" aria-labelledby="heading-[wpv-post-id]-3" data-parent="#accordion-[wpv-post-id]">
      <div class="card-body">
        [types field='beschreibung_aussen'][/types]
      </div>
    </div>
</div>

Add below CSS codes:

.collapse-heading{
display:block;
}

Please test again, and it is only a demo for your reference. You can follow Bootstrap document to customize the collapse:
hidden link

[TobiasS8611]

My issue is resolved now. Thank you Luo! You helped me very much. 🙂