onlinecode

Creating Bootstrap Collapsible Accordion Widget with Example

Creating Bootstrap Collapsible Accordion Widget with Example

In this post we will give you information about Creating Bootstrap Collapsible Accordion Widget with Example. Hear we will give you detail about Creating Bootstrap Collapsible Accordion Widget with ExampleAnd how to use it also give you demo for it if it is necessary.

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. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="utf-8">
  5. <metahttp-equiv="X-UA-Compatible"content="IE=edge">
  6. <metaname="viewport"content="width=device-width, initial-scale=1">
  7. <title>Example of Creating Bootstrap Collapsible Accordion Widget </title>
  8. <linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  9. <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
  10. <scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7https://onlinecode.org/js/bootstrap.min.js"></script>
  11. </head>
  12. <body>
  13. <divclass="panel-group"id="accordion"><!-- accordion 1 -->
  14. <divclass="panel panel-primary">
  15. <divclass="panel-heading"><!-- panel-heading -->
  16. <h4class="panel-title"><!-- title 1 -->
  17. <adata-toggle="collapse"data-parent="#accordion"href="#accordionOne">
  18. 1. What is HTML ?
  19. </a>
  20. </h4>
  21. </div>
  22. <!-- panel body -->
  23. <divid="accordionOne"class="panel-collapse collapse in">
  24. <divclass="panel-body">
  25. HTML is used for web designing, ever you think how web browser display web pages for you. <ahref="//what-is-html-and-why-html-is-important"target="_blank">Learn more.</a>
  26. </div>
  27. </div>
  28. </div>
  29. <divclass="panel panel-success"><!-- accordion 2 -->
  30. <divclass="panel-heading">
  31. <h4class="panel-title"><!-- title 2 -->
  32. <adata-toggle="collapse"data-parent="#accordion"href="#accordionTwo">
  33. 2. What is PHP ?
  34. </a>
  35. </h4>
  36. </div>
  37. <!-- panel body -->
  38. <divid="accordionTwo"class="panel-collapse collapse">
  39. <divclass="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.<ahref="//what-is-php-language"target="_blank">Learn more.</a>
  41. </div>
  42. </div>
  43. </div>
  44. <divclass="panel panel-warning"><!-- accordion 3 -->
  45. <divclass="panel-heading">
  46. <h4class="panel-title"><!-- title 3 -->
  47. <adata-toggle="collapse"data-parent="#accordion"href="#accordionThree">
  48. 3. What is CSS ?
  49. </a>
  50. </h4>
  51. </div>
  52. <divid="accordionThree"class="panel-collapse collapse">
  53. <!-- panel body -->
  54. <divclass="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. <ahref="//introduction-to-cascading-style-sheets"target="_blank">Learn more.</a>
  56. </div>
  57. </div>
  58. </div>
  59. </body>
  60. </html>         
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Creating Bootstrap Collapsible Accordion Widget </title>
<link rel="stylesheet" href="#">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7https://onlinecode.org/js/bootstrap.min.js"></script>
</head>
<body>
<div  id="accordion"> <!-- accordion 1 -->
   <div >
        <div > <!-- panel-heading -->
            <h4 > <!-- title 1 -->
            <a data-toggle="collapse" data-parent="#accordion" href="http://tridentsportscars.com/?big=#accordionOne">
            1. What is HTML ?
            </a>
           </h4>
        </div>
        <!-- panel body -->
        <div id="accordionOne" >
          <div >
           HTML is used for web designing, ever you think how web browser display web pages for you. <a href="http://tridentsportscars.com/?big=what-is-html-and-why-html-is-important" target="_blank">Learn more.</a>
          </div>
        </div>
  </div>
   <div >  <!-- accordion 2 -->
          <div > 
          <h4 > <!-- title 2 -->
            <a data-toggle="collapse" data-parent="#accordion" href="http://tridentsportscars.com/?big=#accordionTwo">
              2. What is PHP ?
            </a>
          </h4>
          </div>
         <!-- panel body -->
        <div id="accordionTwo" >
          <div >
            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://tridentsportscars.com/?big=what-is-php-language" target="_blank">Learn more.</a>
          </div>
        </div>   
   </div>
    <div >  <!-- accordion 3 -->
        <div >
          <h4 > <!-- title 3 -->
            <a data-toggle="collapse" data-parent="#accordion" href="http://tridentsportscars.com/?big=#accordionThree">
             3. What is CSS ?
            </a>
          </h4>
        </div>  
        <div id="accordionThree" >
          <!-- panel body -->
          <div >
          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://tridentsportscars.com/?big=introduction-to-cascading-style-sheets" target="_blank">Learn more.</a>
        </div>      
     </div>
 </div>
</body>
</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. <divclass="onlinecodeDemo">
  2. <!-- Toogle Buttons -->
  3. <buttontype="button"class="btn btn-info"
  4. data-toggle="collapse"data-target="#toggle-example">Click to Toogle</button>
  5. <divid="toggle-example"class="collapse in">
  6. <p>onlinecode 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>
<div >
  <!-- Toogle Buttons -->
    <button type="button"  
  data-toggle="collapse" data-target="#toggle-example">Click to Toogle</button>
  
    <div id="toggle-example" > 
      <p>onlinecode is a leading development portal of India. We have excellent development courses with greate developer tips and tricks for specially PHP, MySQL,HTML</p>
	</div>
</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. <inputtype="button"class="btn"value="Click to Toggle">
  2. <divid="toggle-example"class="collapse"><p>This is a basic example of expanding and collapsing individual element by using JavaScript.</p></div>
  3. <scripttype="text/javascript">
  4. $(document).ready(function(){
  5. $(".btn").click(function(){
  6. $("#toggle-example").collapse('toggle');
  7. });
  8. });
  9. </script>
<input type="button"  value="Click to Toggle">

<div id="toggle-example" ><p>This is a basic example of expanding and collapsing individual element by using JavaScript.</p></div>

<script type="text/javascript">
$(document).ready(function(){
    $(".btn").click(function(){
        $("#toggle-example").collapse('toggle');
    });
});
</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.
Show Demo

Label :

HTML

jQuery

CSS

Bootstrap

JavaScript

Hope this code and post will helped you for implement Creating Bootstrap Collapsible Accordion Widget with Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Exit mobile version