Accordion in Qualtrics

Gail
Gail Downingtown, PA USACommunity Member, Qualtrics Brand Admin Qubie ✭

Is it possible to create an accordion within Qualtrics? Displaying collapsible content panels for presenting information in a limited amount of space.? Similar to this example: http://jqueryui.com/accordion/

Best Answers

  • [Deleted User]
    [Deleted User] Qubie ✭
    edited March 2019 Accepted Answer

    Hello @Gail ,

    Please follow the below steps:

    Step 1: Paste the below code in the Header-> source view(<>)
    <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    Step 2: Paste the below code in the Rich content editor -> source view(<>) of the question

            YOUR_QUESTION_TEXT
            <div id="accordion">
            <h3>Section 1</h3>
            <div>
            <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus</p>
            </div>
            <h3>Section 2</h3>
            <div>
            <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. </p>
            </div>
            <h3>Section 3</h3>
            <div>
            <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque</p>
            <ul>
                <li>List item one</li>
                <li>List item two</li>
                <li>List item three</li>
            </ul>
            </div>
            <h3>Section 4</h3>
            <div>
            <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</p>
            <p>Suspendisse eu nisl. Nullam ut libero. </p>
            </div>
            </div>
    

    Step 3: Paste the below code in the js(onReady) of the question

        jQuery( function() {
        jQuery( "#accordion" ).accordion();
      } );
    

    Step 4: Output

  • Gail
    Gail Downingtown, PA USACommunity Member, Qualtrics Brand Admin Qubie ✭
    Accepted Answer

    Thanks again for all your help!!!

«1

Answers

  • GeorgeIssa
    GeorgeIssa Pennsylvania / Global OrganizationCommunity Member, Qualtrics Brand Admin Guru ✭✭

    This is a great idea.

  • Gail
    Gail Downingtown, PA USACommunity Member, Qualtrics Brand Admin Qubie ✭

    Agreed...just not sure how to accomplish. Any assistance from the community would be greatly appreciated.

    Thanks!!

  • Gail
    Gail Downingtown, PA USACommunity Member, Qualtrics Brand Admin Qubie ✭

    Success...this works!!! Thank you so much. Of course that leads to another question - is there a way to button up the first section? Meaning content within the first section is currently displayed rather than - click and then display.

  • @Gail said:
    Success...this works!!! Thank you so much. Of course that leads to another question - is there a way to button up the first section? Meaning content within the first section is currently displayed rather than - click and then display.
    @Gail , Great!!

    So Replace the code at Step 3 with the below

    jQuery( function() {
            jQuery( "#accordion" ).accordion({
                active:false,
                 collapsible: true
            });
      } );
    
  • Gail
    Gail Downingtown, PA USACommunity Member, Qualtrics Brand Admin Qubie ✭

    Thank you - that worked.

  • Gail
    Gail Downingtown, PA USACommunity Member, Qualtrics Brand Admin Qubie ✭

    A last and hopefully final question - can the color (blue) be changed? I have change the primary color (look and feel) in Quatrics to #09598e.

  • @Gail said:
    A last and hopefully final question - can the color (blue) be changed? I have change the primary color (look and feel) in Quatrics to #09598e.

    Paste the below CSS in the Add custom CSS option

    .JFEScope .ui-state-active, .JFEScope .ui-widget-content .ui-state-active, .JFEScope .ui-widget-header .ui-state-active {
        border: 1px solid #09598e;
        background: #09598e;
    }
    
  • ambrubaker
    ambrubaker Muncie, INCommunity Member Qubie ✭

    Is there a reason why I can't get any more than 4 sections/accordian headers to display with the code displayed above? I need 8 sections/headers in my accordian. What am I missing something?

    My Question Text
    <div id="accordian">
            <h3>Section 1</h3>
                <div>
                    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus</p>
                </div>
            <h3>Section 2</h3>
                <div>
                    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. </p>
                </div>
            <h3>Section 3</h3>
                <div>
                    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque</p>
                </div>
            <h3>Section 4</h3>
                <div>
                    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</p>
            <h3>Section 5</h3>
                <div>
                    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus</p>
                </div>
            <h3>Section 6</h3>
                <div>
                    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. </p>
                </div>
            <h3>Section 7</h3>
                <div>
                    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque</p>
                </div>
            <h3>Section 8</h3>
                <div>
                    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</p>
                </div>
        </div>
    
  • @ambrubaker said:
    Is there a reason why I can't get any more than 4 sections/accordian headers to display with the code displayed above? I need 8 sections/headers in my accordian. What am I missing something?

    @ambrubaker said:
    Is there a reason why I can't get any more than 4 sections/accordian headers to display with the code displayed above? I need 8 sections/headers in my accordian. What am I missing something?

    Use the below HTML:

    My Question Text
    <div id="accordion">
            <h3>Section 1</h3>
                <div>
                    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus</p>
                </div>
            <h3>Section 2</h3>
                <div>
                    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. </p>
                </div>
            <h3>Section 3</h3>
                <div>
                    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque</p>
                </div>
            <h3>Section 4</h3>
                <div>
                    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</p></div>
            <h3>Section 5</h3>
                <div>
                    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus</p>
                </div>
            <h3>Section 6</h3>
                <div>
                    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. </p>
                </div>
            <h3>Section 7</h3>
                <div>
                    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque</p>
                </div>
            <h3>Section 8</h3>
                <div>
                    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</p>
                </div>
        </div>
    

    Errors: accordion spelling was wrong and div closing missing for section 4

  • ambrubaker
    ambrubaker Muncie, INCommunity Member Qubie ✭

    @Shashi
    It works perfectly now. I don't know how I missed those errors. Thank you for the assistance.

  • jrkinsella
    jrkinsella St Paul MNCommunity Member, Qualtrics Brand Admin Qubie ✭

    This is brilliant and exactly what I was looking for. My issue is that the accordion sections are only barely expanding when selected. See this screenshot. Any ideas as to why?

  • jrkinsella
    jrkinsella St Paul MNCommunity Member, Qualtrics Brand Admin Qubie ✭

    I think I figured out the cause but not a solution. I have an in page display logic setup for the question utilizing the accordion. Once I disabled that, it worked perfectly.

  • jimst75
    jimst75 NJCommunity Member Qubie ✭

    This is great! I am trying to do something like this, but would like to have the question choices included in the area that expands and collapses. Is that possible?

  • JWang127
    JWang127 Lexington, KentuckyCommunity Member - Trial User Qubie ✭

    This code isn't working for me for some reason. Are those 3 steps that were posted on March 30 not valid anymore?

  • vamarci
    vamarci Community Member Qubie ✭

    Thank you for posting this answer, I managed to get the accordion to work! I would like to make a small adjustment to the code, but I don't quite know how to do it. I would like to use the no auto height argument
    (see here: https://jqueryui.com/accordion/#no-auto-height)
    but I don't know how to do it. Any tips would be very much appreciated.

  • Conner
    Conner Community Member Qubie ✭

    This thread has been very helpful. I am trying to copy my block with an accordion, but every time I do, the accordion on the new block does not work. Any suggestions on how to make multiple accordions (each as a separate text entry question) in a single survey?

  • Kasey
    Kasey Community Member Qubie ✭

    I can't seem to get this to work... Even with one or two sections. It works in an old survey that my advisor shared with me. Even copying and pasting the entire html code from that into my own survey is not working. Am I doing something completely wrong? Is there a setting in the survey that I need to look at? Here is the general idea I have going:

    <div id="accordion">

    <h3>6. What will be done during this research study?</h3>

    <div>

    <p> explanation of the study procedures </p>

    </div>

    <h3>7. What are the possible risks of being in this research study?<h3>

    <div>

    <p>possible risks</p>

    </div>

    </div>

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭

    That's because you are not loading the library and turning it into an accordian.

    Add this line to your header: <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>


    And this to your question JS: jQuery( "#accordion" ).accordion();