Home → Velocity Formats →

Bootstrap - Creating an accordion

• Edit

cth0011

10 Jun, 2016 09:11 PM

I'm currently using Bootstrap to create an accordion. I've setup a data definition (first image) where you can enter a heading for the entire accordion, along with a title and content for each group within that accordion. What the code produces is mostly correct, the only issue is no matter how many groups I create within the accordion, it only displays the content for group 1 (second image). Here is a link to how it is supposed to display.

I've posted the code below. I think I know the issue. Whenever it loops, it's creating a new accordion for every group that is added in the data definition instead of adding onto the existing accordion. Any ideas how to fix that?

            #if ($column.getChild("features").value == "Accordion" )
                #set ( $accordions = $_XPathTool.selectNodes($column, "accordion") )
                #set ( $accHeading  = $column.getChild("accHeading").value )
                <h2>$_SerializerTool.serialize($column.getChild("accHeading"), true)</h2>
                #foreach ( $accordion in $accordions )
                    #set ( $accTitle = $accordion.getChild("accTitle").value )
                    #set ( $accContent = $accordion.getChild("accContent").value )
                    <div class="panel-group" id="accordian">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">${accTitle}</a>
                                </h4>
                            </div>
                            <div id="collapse1" class="panel-collapse collapse">
                                <div class="panel-body">${accContent}</div>
                            </div>
                        </div>
                    </div>
                #end
            #end

• 2016-06-10_15-41-02.png 19.8 KB
• 2016-06-10_15-45-00.png 9.08 KB

1. 1 Posted by Ryan Griffith on 13 Jun, 2016 12:45 PM

   

   Hi,

   The issue is that you have a hard coded href="#collapse1" and id="content1" for your accordion heading and content, you need these to be dynamic. When you have a moment, try making the following adjustment:

   <div class="panel-group" id="accordian">
       <div class="panel panel-default">
           <div class="panel-heading">
               <h4 class="panel-title">
                   <a data-toggle="collapse" data-parent="#accordion" href="#collapse${foreach.index}">${accTitle}</a>
               </h4>
           </div>
           <div id="collapse${foreach.index}" class="panel-collapse collapse">
               <div class="panel-body">${accContent}</div>
           </div>
       </div>
   </div>
   

   Notice the use of ${foreach.index} to make those IDs dynamic.

   Please let me know if you have any questions.

   Thanks!

   • Edit

2. 2 Posted by cth0011 on 13 Jun, 2016 01:47 PM

   

   Thanks for the reply Ryan. That did the trick. Now my issue is that whenever I open one panel, the other one that is open doesn't collapse. I tried pulling some of the code, which is now commented out, outside the loop to see if that helped but it did not.

               #elseif ($column.getChild("features").value == "Accordion" )
                   #set ( $accordions = $_XPathTool.selectNodes($column, "accordion") )
                   #set ( $accHeading  = $column.getChild("accHeading").value )      
                   <h2>$_SerializerTool.serialize($column.getChild("accHeading"), true)</h2>
                   ##<div class="panel-group" id="accordian">
                       ##<div class="panel panel-default">      
                   
                   #foreach ( $accordion in $accordions )
                       #set ( $accTitle = $accordion.getChild("accTitle").value )
                       #set ( $accContent = $accordion.getChild("accContent").value )
                   
                       <div class="panel-group" id="accordian">
                           <div class="panel panel-default">      
                               <div class="panel-heading"> 
                                   <h4 class="panel-title">
                                       <a data-toggle="collapse" data-parent="#accordion" href="#collapse${foreach.index}">${accTitle}</a>
                                   </h4>
                               </div>
                               <div id="collapse${foreach.index}" class="panel-collapse collapse in">
                                   <div class="panel-body">${accContent}</div>
                               </div>
                           </div>
                       </div>
                   #end
                   ##</div>
                   ##</div>
   

   • 2016-06-13_8-46-27.png 13.9 KB
   • Edit

3. 3 Posted by Ryan Griffith on 13 Jun, 2016 03:55 PM

   

   Glad to hear my proposed change did the trick.

   In order to get the accordion bits to work, you need to surround the accordions with that outer #accordion container, rather than have it within the loop.

   When you have a moment, remove that extra div#accordion from within the loop and uncomment the div's you moved outside of the loop and it should work as expected.

   Please let me know if you have any questions.

   Thanks!

   • Edit

4. 4 Posted by cth0011 on 15 Jun, 2016 09:04 PM

   

   Apologies for the late reply. I've tried both of the code snippets posted below and neither collapse a panel when another one is opened. Any suggestions?

               #elseif ($column.getChild("features").value == "Accordion" )
                   #set ( $accordions = $_XPathTool.selectNodes($column, "accordion") )
                   #set ( $accHeading  = $column.getChild("accHeading").value ) 
        
                   <h2>$_SerializerTool.serialize($column.getChild("accHeading"), true)</h2>
                   <div class="panel-group" id="accordian">
                   
                   #foreach ( $accordion in $accordions )
                       #set ( $accTitle = $accordion.getChild("accTitle").value )
                       #set ( $accContent = $accordion.getChild("accContent").value )
                       
                       <div class="panel panel-default">      
                           <div class="panel-heading">      
                               <h4 class="panel-title">
                                       <a data-toggle="collapse" data-parent="#accordion" href="#collapse${foreach.index}">${accTitle}</a>
                               </h4>
                           </div>
                               <div id="collapse${foreach.index}" class="panel-collapse collapse in">
                                   <div class="panel-body">${accContent}</div>
                               </div>
                       </div>
                   #end
                   </div>
   

           #elseif ($column.getChild("features").value == "Accordion" )
               #set ( $accordions = $_XPathTool.selectNodes($column, "accordion") )
               #set ( $accHeading  = $column.getChild("accHeading").value ) 
   
               <h2>$_SerializerTool.serialize($column.getChild("accHeading"), true)</h2>
               <div class="panel-group" id="accordian">
                   <div class="panel panel-default">      
   
               #foreach ( $accordion in $accordions )
                   #set ( $accTitle = $accordion.getChild("accTitle").value )
                   #set ( $accContent = $accordion.getChild("accContent").value )
   
                       <div class="panel-heading">      
                               <h4 class="panel-title">
                                   <a data-toggle="collapse" data-parent="#accordion" href="#collapse${foreach.index}">${accTitle}</a>
                               </h4>
                           </div>
                           <div id="collapse${foreach.index}" class="panel-collapse collapse in">
                               <div class="panel-body">${accContent}</div>
                           </div>
               #end
                   </div>
               </div>
   

   • Edit

5. 5 Posted by Ryan Griffith on 15 Jul, 2016 08:28 PM

   

   Hi,

   I was going over some older discussions and noticed this one is still open. Were you able to get your accordion code working?

   Please feel free to let us know if you have any other questions.

   Thanks!

   • Edit

6. 6 Posted by cth0011 on 26 Jul, 2016 01:13 PM

   

   I was not able to get the accordion working how it's intended to. If someone has any suggestions please let me know. Thanks.

   • Edit

7. 7 Posted by Ryan Griffith on 27 Jul, 2016 03:58 PM

   

   Hi there,

   Your first code snippet looks like it should work, assuming you have the Bootstrap JS added to the page and there are no JS errors.

   One thing I noticed is that you are adding the in class to all of the panels, so I am wondering if perhaps that might be causing issues. Try something like the following:

   ...
   
   #elseif ($column.getChild("features").value == "Accordion" )
     #set ( $accordions = $_XPathTool.selectNodes($column, "accordion") )
     #set ( $accHeading  = $column.getChild("accHeading").value ) 
   
     <h2>$_SerializerTool.serialize($column.getChild("accHeading"), true)</h2>
     <div class="panel-group" id="accordian">
     
     #foreach ( $accordion in $accordions )
         #set ( $accTitle = $accordion.getChild("accTitle").value )
         #set ( $accContent = $accordion.getChild("accContent").value )
         #set ( $collapseStateClass = "")
   
         #if ($foreach.index == 0)
           #set ( $collapseStateClass = " in")
         #end
         
         <div class="panel panel-default">      
             <div class="panel-heading">      
                 <h4 class="panel-title">
                         <a data-toggle="collapse" data-parent="#accordion" href="#collapse${foreach.index}">${accTitle}</a>
                 </h4>
             </div>
                 <div id="collapse${foreach.index}" class="panel-collapse collapse${collapseStateClass}">
                     <div class="panel-body">${accContent}</div>
                 </div>
         </div>
     #end
     </div>
   
   ...
   

   Please let me know if you have any questions.

   Thanks!

   • Edit