{"id":16058,"date":"2017-02-13T16:15:52","date_gmt":"2017-02-13T14:15:52","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=16058"},"modified":"2018-01-08T13:16:04","modified_gmt":"2018-01-08T11:16:04","slug":"bootstrap-accordion-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-accordion-example\/","title":{"rendered":"Bootstrap Accordion Example"},"content":{"rendered":"

In this tutorial, we will show you how to create an accordion widget with Bootstrap. The accordion is a feature which allows you to show and hide components with a nice transition. To follow, all you need is a text editor. I will be using Notepad++; you are free of course to use one of your choice.
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n[ulp id=’57DHuNTHJ2qczaGz’]<\/p>\n

1. Project setup<\/h2>\n

Let’s start by creating a sample Bootstrap project in a file called Bootstrap accordion.html. You will need to include the Bootstrap CSS and JavaScript libraries, as well as jQuery. I have chosen to use Bootstrap 3.3.7 and jQuery 3.1.1.<\/p>\n

Bootstrap accordion.html<\/em><\/span><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"><\/link> \r\n    <script src=\"http:\/\/code.jquery.com\/jquery-3.1.1.min.js\"><\/script>\r\n    <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Now, let’s add a group of panels and a button to our page.<\/p>\n
Bootstrap accordion.html<\/em><\/span><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"><\/link> \r\n    <script src=\"http:\/\/code.jquery.com\/jquery-3.1.1.min.js\"><\/script>\r\n    <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n    <div class=\"panel-group\">\r\n        <div class=\"panel panel-default\">\r\n            <div class=\"panel-heading\">\r\n                <div class=\"panel-title\">\r\n                    Panel 1 header\r\n                <\/div>\r\n            <\/div>\r\n            <div>\r\n                <div class=\"panel-body\">\r\n                    Panel 1 content\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"panel panel-default\">\r\n            <div class=\"panel-heading\">\r\n                <div class=\"panel-title\">\r\n                    Panel 2 header\r\n                <\/div>\r\n            <\/div>\r\n            <div>\r\n                <div class=\"panel-body\">\r\n                    Panel 2 content\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n    <button type=\"button\" class=\"btn\">My button<\/button>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/a><\/p>\n
Fig. 1: Setup<\/em><\/p>\n
2. Adding the accordion<\/h2>\n
2.1 Panel group<\/h3>\n
To add the accordion to the panel group, we’ll follow these steps:<\/p>\n