Guest User

Untitled

a guest
Jan 22nd, 2018
84
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.17 KB | None | 0 0
  1. // accordion
  2. <div class="container demo">
  3.  
  4. <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  5.  
  6. <div class="panel panel-default">
  7. <div class="panel-heading" role="tab" id="headingOne">
  8. <h4 class="panel-title">
  9. <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  10. <i class="more-less glyphicon glyphicon-plus"></i>
  11. Lorem ipsum dolor sit amet, consectetur?
  12. </a>
  13. </h4>
  14. </div>
  15. <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
  16. <div class="panel-body">
  17. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet maiores saepe sed iusto, fugiat sapiente labore magni aut blanditiis, cum excepturi explicabo illo vero consequuntur. Accusantium, a cum veritatis fugiat.
  18. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum illum praesentium at expedita quae repellendus eveniet quaerat architecto ipsum, obcaecati, rem, optio quis voluptas tenetur dolorem similique blanditiis fuga consectetur?
  19. </div>
  20. </div>
  21. </div>
  22.  
  23. <div class="panel panel-default">
  24. <div class="panel-heading" role="tab" id="headingTwo">
  25. <h4 class="panel-title">
  26. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  27. <i class="more-less glyphicon glyphicon-plus"></i>
  28. Lorem ipsum dolor sit amet?
  29. </a>
  30. </h4>
  31. </div>
  32. <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
  33. <div class="panel-body">
  34. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam delectus necessitatibus, fugiat praesentium perferendis, accusamus placeat laboriosam. Alias dolores, iure neque ullam autem minus quod molestias enim doloribus, voluptatibus itaque.
  35. </div>
  36. </div>
  37. </div>
  38.  
  39. <div class="panel panel-default">
  40. <div class="panel-heading" role="tab" id="headingThree">
  41. <h4 class="panel-title">
  42. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  43. <i class="more-less glyphicon glyphicon-plus"></i>
  44. Lorem ipsum dolor sit amet, consectetur?
  45. </a>
  46. </h4>
  47. </div>
  48. <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
  49. <div class="panel-body">
  50. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias omnis sunt suscipit nam debitis qui fuga, commodi, odit reiciendis necessitatibus repudiandae officiis doloremque reprehenderit minus sapiente cum enim rerum nesciunt.
  51. </div>
  52. </div>
  53. </div>
  54.  
  55. </div><!-- panel-group -->
  56.  
  57.  
  58. </div><!-- container -->
  59.  
  60.  
  61. <style>
  62.  
  63.  
  64. .panel-group .panel {
  65. border-radius: 0;
  66. box-shadow: none;
  67. border-color: #EEEEEE;
  68. }
  69.  
  70. .panel-default > .panel-heading {
  71. padding: 0;
  72. border-radius: 0;
  73. color: #212121;
  74. background-color: #FAFAFA;
  75. border-color: #EEEEEE;
  76. }
  77.  
  78. .panel-title {
  79. font-size: 14px;
  80. }
  81.  
  82. .panel-title > a {
  83. display: block;
  84. padding: 15px;
  85. text-decoration: none;
  86. border-left: 3px solid #00BBD1;
  87. border-right: 3px solid #00BBD1;
  88. }
  89.  
  90. .more-less {
  91. float: right;
  92. color: #212121;
  93. }
  94.  
  95. </style>
  96.  
  97. <script>
  98. // accordion
  99. function toggleIcon(e) {
  100. $(e.target)
  101. .prev('.panel-heading')
  102. .find(".more-less")
  103. .toggleClass('glyphicon-plus glyphicon-minus');
  104. }
  105. $('.panel-group').on('hidden.bs.collapse', toggleIcon);
  106. $('.panel-group').on('shown.bs.collapse', toggleIcon);
  107. </script>
Add Comment
Please, Sign In to add comment