Developer forum

Forum » Rapido » Accordion view

Accordion view

Gerard Kocks
Gerard Kocks
Reply

Hi,

For some customers we receive the question if we can make a page with accordion view.
I attached an example to make sure you understand what I mean.

Is this possible in Rapdio yet?

Best regards
Gerard

Accordeon_weergave.jpg

Replies

 
Karsten Thuen Dynamicweb Employee
Karsten Thuen
Reply

Hi Gerard

Yes, this is perfectly possible. But you will have to use the item publisher and create the needed templates. It should be easy. Here is how:

  • Look at how we have made the "Latest news" list. "ItemPublisher/List/NewsList.cshtml"
  • Make a copy of this template and call it "FAQ"
  • Instead of creating items linking to an article, you should create expandable sections.
  • Rapido has a simple way for creating exapandable sections:

 

<div class="grid__col-12 grid__col--bleed-y">
    <input type="checkbox" id="expandable-text-trigger" class="expandable-text-trigger" />
    <div class="expandable-text-container">
        <div class="expandable-text-container__content dw-mod">
            <h2 class="section-title">@Translate("My question")</h2>
            @Translate("The answer")
        </div>

        <div class="u-ta-center">
            <label for="expandable-text-trigger" class="btn btn--secondary expandable-text-container__btn more dw-mod">@Translate("Show more")</label>
            <label for="expandable-text-trigger" class="btn btn--secondary expandable-text-container__btn less dw-mod">@Translate("Show less")</label>
        </div>
    </div>
</div>

 

You will just need to adjust it to use a unique ID for each section, fx. by using a count number in the loop.

I hope this makes sense.

 

Best regards
Karsten Thuen

 
Gerard Kocks
Gerard Kocks
Reply

Hi Karsten,

Thanks for your help. I am afraid this is too technical for me, but I will ask colleagues or Innovadis to do it.

Best regards
Gerard

 

You must be logged in to post in the forum