Hello all,

I am using the latest Expert version of LimeSurvey. I have a problem with a jquery accordion not working in certain modes.

I have 3 questions in a question group, of which the first 2 questions have to contain a jquery accordion.

The accordion WORKS for the first question, and WORKS for the second question as well in preview for the separate questions. BUT, when I preview the whole question group or the survey itself, the code STOPS working for the second question and the accordion disappears.


This is the code I use for the first question (which ALWAYS WORKS, so no problem here)
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<div style="height: 117px;">
<p> </p>

<center><img alt="" src="/upload/surveys/517625/images/QI1%20kine%202805%202.png" style="width: 700px; height: 100px;" /></center>

<p> </p>
</div>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="/resources/demos/style.css" rel="stylesheet" /><script src=" code.jquery.com/jquery-1.12.4.js "></script><script src=" code.jquery.com/ui/1.12.1/jquery-ui.js "></script><script>
$( function() {
$( "#accordion" ).accordion({
heightStyle: "content",
collapsible: true,
active: false,
navigation: true
});
} );
</script>
<div id="accordion">
<h3>Als je dit wilt, kan je hier evidentie uit interviews en literatuur voor de indicator bekijken</h3>

<div>
<p><img alt="" src="/upload/surveys/517625/images/QI1%20kine%20motivatie%201805.png" style="width: 700px; height: 289px;" /></p>

<p><span style="font-size:22px;">De richting en zekerheid* van het bewijs wordt door volgende kleuren en symbolen aangeduid:</span></p>

<p><img alt="" src="/upload/surveys/517625/images/uitlegevidentie.png" /></p>

<p>*Zekerheid van bewijs werd geordend volgens de <a href=" www.cebm.net/2009/06/oxford-centre-evide...evidence-march-2009/ ">Oxford Level of Evidence schaal</a></p>
</div>
</div>

<p>In welke mate vindt u dat de indicator (verstrekkingen kinesitherapie) geschikt is om gepastheid van zorg aan het levenseinde bij kinderen met kanker te beschrijven* *Op een algemeen niveau, d.i. voor de groep van kinderen die stierven aan kanker. Geef liefst uitleg in het opmerkingenkader.</p>

This is the code for the second question, which WORKS in the separate question preview but STOPS WORKING in the question group preview or the whole survey preview:

<div><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"></div>
<title></title>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="/resources/demos/style.css" rel="stylesheet" /><script src=" code.jquery.com/jquery-1.12.4.js "></script><script src=" code.jquery.com/ui/1.12.1/jquery-ui.js "></script><script>
$( function() {
$( "#accordion" ).accordion({
heightStyle: "content",
collapsible: true,
active: false,
navigation: true
});
} );
</script>
<p>Heeft u opmerkingen bij de afbakening van de tijdsperiode in de teller? Indien ja, kan u in het opmerkingenkader uitleg geven.</p>

<div id="accordion">
<h3><span style="font-size:12px;">Als je meer info wilt over de motivering voor de tijdsperiode, bekijk deze dan hier</span></h3>

<div>
<p>De tijdsperiode is hier: 'de laatste 30, 14, 7, of 2 dagen voor het overlijden'.</p>

<p><br />Motivatie voor de tijdsperiode:<br />- <strong>30 dagen</strong> <strong>voor het overlijden</strong> werd gekozen als standaardmaximumperiode voor het aanduiden van de levenseindeperiode binnen deze studie. Deze periode werd gekozen op basis van de tijdsperiodes die in eerdere indicatoren voor specialistische pediatrische palliatieve zorgen werden gebruikt, waar 30 dagen gemiddeld het meeste werden gebruikt als tijdsafbakening bij vergelijkbare indicatoren.<br />- Er werd besloten<strong> niet vroeger dan 30 dagen voor het overlijden</strong> te kijken, om te vermijden dat we een periode zouden beoordelen waarin de kinderen gemiddeld nog kans hadden op overleven, en dus gemiddeld gezien niet in de levenseindeperiode zaten.<br />- <strong>14, 7 en 2 dagen voor overlijden</strong> werd gekozen omdat experten in onze experteninterviews aangaven dat deze indicator tot in de terminale periode gepastheid van zorg zou kunnen aanduiden.</p>
</div>
</div>

Could anyone tell me what I could do to solve this problem?

Can you attach a small sample survey (.lss file) containing only that group and your code?

Hi,

In my opinion you must not use the ID "#accordion" twice.
rename it to "#accordion2" and it's fine.



Joffm

Yes, as Joffm suggests, IDs must be unique.

Also, you are calling the jQuery UI resources and the accordion() function multiple times which is unnecessary.

Something like this in the first question in a group where you want accordions:


Something like this in any subsequent questions in that group where you want accordions: