Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

How to add a collapsible element

More
2 days 10 hours ago #271492 by BBSR-SR5
How to add a collapsible element was created by BBSR-SR5
Please help us help you and fill where relevant:
Your LimeSurvey version: LimeSurvey Cloud Version 6.15.10
Own server or LimeSurvey hosting: Cloud
Survey theme/template: Fruity 23
==================
I'm trying to add a collapsible element as suggested in the tutorial www.mafosurvey.de/lime/Tutorial_Gimmicks.pdf

Apparently this is supposed to be done with bootstrap ( getbootstrap.com/docs/3.4/javascript/#collapse )

I've been trying three things that don't seem to work properly.
Code:
<p><button aria-controls="collapseExample" aria-expanded="false" class="btn btn-primary" data-target="#collapseExample" data-toggle="collapse" type="button">Informationen zu den Paragraphen</button></p>
 
<div class="collapse" id="collapseExample">
blablablabla
</div>
Just adding a button with a data-bs-target doesn't do anything. The collapsible text remains hidden. Regardless of button clicks.

So I've been trying to manually activate it like this:
Code:
<p><button aria-controls="collapseExample" aria-expanded="false" class="btn btn-primary" data-target="#collapseExample" data-toggle="collapse" type="button">Informationen zu den Paragraphen</button></p>
 
<div class="collapse" id="collapseExample">
blablablabla
</div>
 
<script type="text/javascript" charset="utf-8">   $(document).on('ready pjax:complete',function() {       $('.collapse').collapse();   });</script>
In this case the collapsible text is always displayed and the button click also doesn't seem to do anything.

As another option I've been trying to load bootstrap directly into the html:
Code:
<p><button aria-controls="collapseExample" aria-expanded="false" class="btn btn-primary" data-target="#collapseExample" data-toggle="collapse" type="button">Informationen zu den Paragraphen</button></p>
 
<div class="collapse" id="collapseExample">
blablablabla
</div>
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
This does make the button open the collapsible, but it immediately collapses again (this is somehow bugged, I assume because LimeSurvey is already using some other bootstrap version in the background).

I suspect I'm doing something wrong with the activation (second option), but I'm not sure what. I hope you can help me.

Please Log in to join the conversation.

More
2 days 9 hours ago - 2 days 9 hours ago #271493 by Joffm
Replied by Joffm on topic How to add a collapsible element
Hi,
as you are referring to my tutorial, you'd better ask me directly (and in the German part).
The answer is:  the actual tutorial - and the included sample survey - are updated to version 6.x

Here the "old" version"
Code:
<p>Adalbert Ameise möchte sich auf die Züchtung der "Braunen Rossameise" spezialisieren.</p>
 
<p>Wie stehen Sie als Mitglied des Ameisenzüchtervereins zu dieser Idee?</p>
<button aria-controls="collapseExample" aria-expanded="false" class="btn btn-xs btn-primary" data-bs-target="#collapseExample" data-bs-toggle="collapse" type="button">Klick für weitere Informationen</button>
 
<div class="collapse" id="collapseExample">
    <div class="well">
        <p>Rossameisen (Camponotus) oder Holzameisen sind eine Gattung der Ameisen (Formicidae) aus der Unterfamilie der Schuppenameisen (Formicinae). Ihr gehören weltweit über 1000 Arten an, in der Paläarktis kommen davon mindestens 100 sehr große Arten vor.</p>
        ...
    </div>
</div>

 
And here the "new".
You see the differences.
In bootstrap 5 there is no class "well". It is replaced by the new class "card" (though you can still use "well")
And the "data-" elements now get the addition "data-bs-"
(target -> bs-target; toggle -> bs-toggle)

Code:
<p>Adalbert Ameise möchte sich auf die Züchtung der "Braunen Rossameise" spezialisieren.</p>
 
<p>Wie stehen Sie als Mitglied des Ameisenzüchtervereins zu dieser Idee?</p>
<button aria-controls="collapseExample" aria-expanded="false" class="btn btn-xs btn-primary" data-bs-target="#collapseExample" data-bs-toggle="collapse" type="button">Klick für weitere Informationen</button>
 
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        <h5>Rossameisen (Camponotus) oder Holzameisen sind eine Gattung der Ameisen (Formicidae) aus der Unterfamilie der Schuppenameisen (Formicinae). Ihr gehören weltweit über 1000 Arten an, in der Paläarktis kommen davon mindestens 100 sehr große Arten vor.</h5>
        ...
    </div>
</div>

 

So not a big thing.
More or less copied from here
[url] getbootstrap.com/docs/5.3/components/collapse/ [/url] 

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 2 days 9 hours ago by Joffm.
The following user(s) said Thank You: BBSR-SR5

Please Log in to join the conversation.

More
2 days 8 hours ago #271499 by BBSR-SR5
Replied by BBSR-SR5 on topic How to add a collapsible element
Thanks a lot Joffm,
that resolved my issue. I didn't realize I was using an old version.

Do you have an updated version of the tutorial? We found that one via google.

Please Log in to join the conversation.

More
2 days 5 hours ago - 2 days 5 hours ago #271511 by Joffm
Replied by Joffm on topic How to add a collapsible element
You'd better trust the forum - not Google. 
[img


You find all my tutorials in the German part, unfortunately on page 9

After I revised all of them, I probably will stick them on page 1

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 2 days 5 hours ago by Joffm.

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source