Create Responsive Accordion with Views(Bootstrap Accordion)

Aniruddhsinh's picture

Create Responsive Accordion with Views(Bootstrap Accordion)

For Example on click of Title it should show either Description or an Image.

You can see the example and code See this LINK

To achieve the same in drupal follow the steps.

Create a Content Type.

Title and body will be there default.So you need to add an Image field.

Add some 4-5 Contents for the Content type.

Go to View add create a new View

   -Style: unformatted list and unselect all the items in the style setting.


    Content: title ( Select Exclude the title From the display)

                 Global: View result counter (Select  Exclude the title From the display)

                Content: Image:   - Select Rewrite output Result 

                                                 - Put this code:


                                    .Select the field from Replacement Pattern to see the appropriate item:

                                    E.g, [counter] - View Result conter

                                            [title] - Title Field

                                            [field_image] - Image Field

                        Click on "Advance" -> Theme: Information. 

                          you can see "Style Output".Copy the Last name among the options to create a file. Also click on Style Output & Copy the code.

                          --Go to sites/all/themes/yourtheme/templates and create a new file with the copied name.

                         --Open the file and paste the code from "Style Output".

                         Just before the Foreach loop starts,add <div id="myaccordion" class="accordion"> and close it after the Foreach ends.

                       Example Code :               <?php if (!empty($title)): ?>

                                                       <h3><?php print $title; ?></h3>

                                                    <?php endif; ?>

                                                    <div id="myaccordion" class="accordion">

                                                      <?php foreach ($rows as $id => $row): ?>

                                                        <?php print $row; ?>

                                                      <?php endforeach; ?>


Save the view.

One more thing is that if you are using Bootstrap as a base theme you will get this functionality by default working but if not then download and add these CSS & JS files.




It should be working now.