1. Calender
  2. Email
  3. Profile
  4. Widget
  5. Features
  6. UI Elements
  7. Accordion
  8. Alerts
  9. Badges
  10. Button
  11. Dropdown
  12. Images
  13. List Group
  14. Panels
  15. Progressbar
  16. Tab
  17. Wells
  18. Components
  19. Calendar
  20. Carousel
  21. Weather
  22. Datamap
  23. To do
  24. Scrollable
  25. Sweet Alert
  26. Toastr
  27. Basic Range Slider
  28. Advance Range Slider
  29. Nestable
  30. Portlets
  31. Bar Rating
  32. jRate
  33. Table
  34. Basic
  35. Datatable
  36. Datatable Export
  37. Datatable Row Select
  38. Editable
  39. Icons
  40. Themify
  41. Maps
  42. Basic
  43. Vector Map
  44. Form
  45. Basic Form
  46. Miscellaneous
  47. Invoice
  48. Basic
  49. Editable
  50. Pages
  51. Login
  52. Register
  53. Forgot password
  54. Documentation
  55. Logout
  56. 02:34 PM
    Mr. Saifun
    5 members joined today
  57. 02:34 PM
    Mariam
    likes a photo of you
  58. 02:34 PM
    Tasnim
    Hi Teddy, Just wanted to let you ...
  59. 02:34 PM
    Ishrat Jahan
    Hi Teddy, Just wanted to let you ...
  60. See All
  61. 02:34 PM
    Saiul Islam
    Hi Teddy, Just wanted to let you ...
  62. 02:34 PM
    Ishrat Jahan
    Hi Teddy, Just wanted to let you ...
  63. 02:34 PM
    Saiul Islam
    Hi Teddy, Just wanted to let you ...
  64. 02:34 PM
    Ishrat Jahan
    Hi Teddy, Just wanted to let you ...
  65. See All
  66. Saifun
  67. Profile
  68. My Balance
  69. My Task
  70. My Calender
  71. Inbox
  72. Setting
  73. Help
  74. Lock Screen
  75. Logout
  76. Basic Collapsible

    The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button.
    To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then add the data-target="#id" attribute to connect the button with the collapsible content (<div id="demo">).
    Note: For <a> elements, you can use the href attribute instead of the data-target attribute:
    Note: For <button> elements, you can use the data-toggle="collapse" attribute instead of the data-target="#basic-collapse" attribute:

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Collapsible Panel

    The following example shows a collapsible panel:

    Panel Body

    Collapsible List Group

    The following shows a collapsible panel with a list group inside:

  77. One
  78. Two
  79. Three
  80. Accordion

    Note: Use the data-parent attribute to make sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.