Creating Bootstrap Collapsible Accordion Widget with Example

Creating Bootstrap Collapsible Accordion Widget with Example

Collapsibles are useful when you need to show and hide large amount of data and You don't need to use JavaScript code to create accordion or a simple collapsible panel.

You can easily use Bootstrap collapse feature to expanding and collapsing large data.

You need two elements to work on this features: first one is controller like button or hyperlink through which you can collapse the other element and second is collapsible element itself.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>Example of Creating Bootstrap Collapsible Accordion Widget </title>
  8. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
  10. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  11. </head>
  12. <body>
  13. <div class="panel-group" id="accordion"> <!-- accordion 1 -->
  14. <div class="panel panel-primary">
  15. <div class="panel-heading"> <!-- panel-heading -->
  16. <h4 class="panel-title"> <!-- title 1 -->
  17. <a data-toggle="collapse" data-parent="#accordion" href="#accordionOne">
  18. 1. What is HTML ?
  19. </a>
  20. </h4>
  21. </div>
  22. <!-- panel body -->
  23. <div id="accordionOne" class="panel-collapse collapse in">
  24. <div class="panel-body">
  25. HTML is used for web designing, ever you think how web browser display web pages for you. <a href="http://www.expertphp.in/article/what-is-html-and-why-html-is-important" target="_blank">Learn more.</a>
  26. </div>
  27. </div>
  28. </div>
  29. <div class="panel panel-success"> <!-- accordion 2 -->
  30. <div class="panel-heading">
  31. <h4 class="panel-title"> <!-- title 2 -->
  32. <a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo">
  33. 2. What is PHP ?
  34. </a>
  35. </h4>
  36. </div>
  37. <!-- panel body -->
  38. <div id="accordionTwo" class="panel-collapse collapse">
  39. <div class="panel-body">
  40. You are allowed to build dynamic websites with the help of PHP. You can run PHP on any platform whether it is UNIX, Linux and windows.<a href="http://www.expertphp.in/article/what-is-php-language" target="_blank">Learn more.</a>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="panel panel-warning"> <!-- accordion 3 -->
  45. <div class="panel-heading">
  46. <h4 class="panel-title"> <!-- title 3 -->
  47. <a data-toggle="collapse" data-parent="#accordion" href="#accordionThree">
  48. 3. What is CSS ?
  49. </a>
  50. </h4>
  51. </div>
  52. <div id="accordionThree" class="panel-collapse collapse">
  53. <!-- panel body -->
  54. <div class="panel-body">
  55. CSS stands for ‘Cascading Style Sheets’ and it is an extension to basic HTML that allows you to style your web pages. <a href="http://www.expertphp.in/article/introduction-to-cascading-style-sheets" target="_blank">Learn more.</a>
  56. </div>
  57. </div>
  58. </div>
  59. </body>
  60. </html>         

Output of above code :

Expanding and Collapsing Elements using Data Attributes

You can use the Bootstrap collapse feature to expanding and collapsing large amount of data by using data attributes.

  1. <div class="expertphpDemo">
  2. <!-- Toogle Buttons -->
  3. <button type="button" class="btn btn-info"
  4. data-toggle="collapse" data-target="#toggle-example">Click to Toogle</button>
  5. <div id="toggle-example" class="collapse in">
  6. <p>ExpertPHP.in is a leading development portal of India. We have excellent development courses with greate developer tips and tricks for specially PHP, MySQL,HTML</p>
  7.     </div>
  8. </div>
Explanation of Above Example
  • Attribute data-toggle="collapse" is used to control the collapsible content such as show and hide content.
  • Attribute data-target="#id" is used to connect the controller like button with the collapsible content.
  • Class .collapse indicates a collapsible element which means class .collapse tells that this is the content that will be show and hide by clicking a button.
Note : You will use the href attribute instead of the data-target attribute for anchor tag.

Expanding and Collapsing Elements using JavaScript

Features of expanding and collapsing any individual element can be achieved by manually by using JavaScript collapse() method.

  1. <input type="button" class="btn" value="Click to Toggle">
  2. <div id="toggle-example" class="collapse"><p>This is a basic example of expanding and collapsing individual element by using JavaScript.</p></div>
  3. <script type="text/javascript">
  4. $(document).ready(function(){
  5. $(".btn").click(function(){
  6. $("#toggle-example").collapse('toggle');
  7. });
  8. });
  9. </script>

if you want to show content only by using collapse() method then pass parameter 'show' in collapse method and if you want to hide content only then same as pass 'hide' parameter to collapse method.

  • .collapse('show') to show a collapsible element.
  • .collapse('hide') to hides a collapsible element.

Phone: (+91) 8800417876
Noida, 201301
ataşehir escort maltepe escort bostancı escort kadıköy escort maltepe escort ataşehir escort tuzla escort pendik escort ümraniye escort kartal escort
pendik escort
izmir escort izmir escort izmir escort izmir escort denizli escort antalya escort antalya escort antalya escort izmir escort izmir escort izmir escort izmir escort izmir escort
hatay escort nevsehir escort nigde escort kirikkale escort batman escort osmaniye escort kirklareli escort tokat escort rize escort adiyaman escort gumushane escort batman escort
porno izle
cialis satış cialis fiyat cialis 20 mg cialis 100 mg cialis 5 mg fiyat
sohbet okey oyna
ankara escort marmaris escort bursa escort mersin escort antalya escort izmir escort samsun escort bodrum escort çeşme escort kuşadası escort adana escort eskişehir escort gaziantep escort esenyurt escort pendik escort tuzla escort fatih escort ümraniye escort mecidiyeköy escort kartal escort bahçelievler escort bahçeşehir escort ataşehir escort bakırköy escort nişantaşı escort avcılar escort büyükçekmece escort kurtkoy escort konya escort beşiktaş escort taksim escort beylikdüzü escort malatya escort sakarya escort şişli escort maltepe escort kadıköy escort ataköy escort bostancı escort şirinevler escort bağcılar escort üsküdar escort etiler escort başaksehir escort ortaköy escort kağıthane escort sultangazi escort halkalı escort çekmeköy escort şaşkınbakkal escort mamak escort sincan escort keçiören escort çankaya escort beypazarı escort akyurt escort pursaklar escort kahramankazan escort göztepe escort alsancak escort bornova escort buca escort karabaglar escort karşıyaka escort konak escort narlıdere escort izmit escort başiskele escort kandira escort körfez escort karamürsel escort dilovası escort gölcük escort gebze escort kocaeli escort kayseri escort elazığ escort denizli escort diyarbakir escort adana escort ankara escort izmir escort antalya escort gaziantep escort kayseri escort konya escort mersin escort denizli escort kocaeli escort diyarbakır escort