본문 바로가기
BootStrap/Bootstrap Sample File

HOW TO MAKE ACCORDION USING JQUERY UI AND BOOTSTRAP

hookbox 2015. 11. 15. 10:03

In this article I will discuss how to make accordion using jquery ui and bootstrap. Accordionis usually made on a widget or to the sidebar of a website and also used on the website administration. 




To make this project so that it takes is a plugin of jquery , jquery ui and bootstrap which you can download on their official website . Make a new folder with a name up to you , but it is advisable to use the name " accordion ". then create an html document as index.html , then copy the plugin into the same folder as index.html . Open index.html then copy and paste the existing syntax below , then save and run .

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta <span id="IL_AD10" class="IL_AD">charset</span>="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Accordion <span id="IL_AD9" class="IL_AD">Template</span></title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jquery-ui.min.css" rel="stylesheet">
    <style>
      .group { <span id="IL_AD8" class="IL_AD">zoom</span>: 1 }
    </style>
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via <span id="IL_AD11" class="IL_AD">file</span>:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <p>
</p>
    <div class="container">
      <div class="row">
 <div class="col-xs-6 col-sm-6 col-md-6">
    
  <h2>Accordion jQuery UI</h2>
  <div class="accordion">
   <div class="group">
     <h3>Section 1</h3>
     <div>
       <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, <span id="IL_AD3" class="IL_AD">gravida</span> in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
     </div>
   </div>
   <div class="group">
     <h3>Section 2</h3>
     <div>
       <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac <span id="IL_AD4" class="IL_AD">justo</span>. Vivamus non quam. In suscipit faucibus urna. </p>
     </div>
   </div>
   <div class="group">
     <h3>Section 3</h3>
     <div>
       <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
       <ul>
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
       </ul>
     </div>
   </div>
   <div class="group">
     <h3>Section 4</h3>
     <div>
       <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
     </div>
   </div>
 </div>
  
 </div>
 <div class="col-xs-6 col-sm-6 col-md-6">
  
 <h2>Accordion Bootstrap</h2>
 <div class="list-group">
   <a href="#" class="list-group-item">
     <h4 class="list-group-item-heading">Section 1</h4>
      <div>
       <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
     </div>
   </a>
   <a href="#" class="list-group-item">
     <h4 class="list-group-item-heading">Section 2</h4>
     <div>
       <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
     </div>
   </a>
   <a href="#" class="list-group-item">
     <h4 class="list-group-item-heading">Section 3</h4>
     <div>
       <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
       <ul>
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
       </ul>
     </div>
   </a>
   <a href="#" class="list-group-item">
     <h4 class="list-group-item-heading">Section 4</h4>
     <div>
       <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
     </div>
   </a>
 </div>
    
 </div>
      </div>
    </div>
 
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script>
       $(function() {
 $( ".list-group" ).accordion({
   header: "> a > h4"
 });
 $( ".accordion" ).accordion({
   header: "> div > h3"
 }).sortable({
   axis: "y",
   handle: "h3",
   stop: function( event, ui ) {
     // IE doesn't register the blur when sorting
     // so trigger focusout handlers to remove .ui-state-focus
     ui.item.children( "h3" ).triggerHandler( "focusout" );
     // Refresh accordion to handle new order
     $( this ).accordion( "refresh" );
   }
 });
      });
    </script>
  </body>
</html>


Explanation syntax .

1. Create a new HTML document with the name index.html accordance with guidelinesbootstrap

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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>Accordion Template</title>
 
    <style>
      .group { zoom: 1 }
    </style>
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <p>
</p>
    <div class="container">
      <div class="row">
 <div class="col-xs-6 col-sm-6 col-md-6">
    
 </div>
 <div class="col-xs-6 col-sm-6 col-md-6">
   
 </div>
      </div>
    </div>
 
  </body>
</html>


2. Call the plugin jquery , jquery ui and bootstrap that you download, extract and copy earlier .

?
1
2
3
4
5
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery-ui.min.css" rel="stylesheet">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.min.js"></script>


3. Make accordion basic syntax with html accordance with jquery ui and bootstrap

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<h2>Accordion jQuery UI</h2>
  <div class="accordion">
   <div class="group">
     <h3>Section 1</h3>
     <div>
       <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
     </div>
   </div>
   <div class="group">
     <h3>Section 2</h3>
     <div>
       <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
     </div>
   </div>
   <div class="group">
     <h3>Section 3</h3>
     <div>
       <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
       <ul>
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
       </ul>
     </div>
   </div>
   <div class="group">
     <h3>Section 4</h3>
     <div>
       <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
     </div>
   </div>
 </div>
 
<h2>Accordion Bootstrap</h2>
 <div class="list-group">
   <a href="#" class="list-group-item">
     <h4 class="list-group-item-heading">Section 1</h4>
      <div>
       <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
     </div>
   </a>
   <a href="#" class="list-group-item">
     <h4 class="list-group-item-heading">Section 2</h4>
     <div>
       <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
     </div>
   </a>
   <a href="#" class="list-group-item">
     <h4 class="list-group-item-heading">Section 3</h4>
     <div>
       <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
       <ul>
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
       </ul>
     </div>
   </a>
   <a href="#" class="list-group-item">
     <h4 class="list-group-item-heading">Section 4</h4>
     <div>
       <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
     </div>
   </a>
 </div>


4. Make the effects of motion that will be used on accordion 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
      $(function() {
$( ".list-group" ).accordion({
  header: "> a > h4"
});
$( ".accordion" ).accordion({
  header: "> div > h3"
}).sortable({
  axis: "y",
  handle: "h3",
  stop: function( event, ui ) {
    // IE doesn't register the blur when sorting
    // so trigger focusout handlers to remove .ui-state-focus
    ui.item.children( "h3" ).triggerHandler( "focusout" );
    // Refresh accordion to handle new order
    $( this ).accordion( "refresh" );
  }
});
     });


'BootStrap > Bootstrap Sample File' 카테고리의 다른 글

HOW TO CREATE A NAVIGATION MENU DROPDOWNS USING JQUERY  (0) 2015.11.15
HOW TO MAKE AUTOCOMPLETE USING JQUERY UI AND BOOTSTRAP  (0) 2015.11.15
CRUD (CREATE, READ, UPDATE, DELETE, PAGINATION) USING PHP PDO AND BOOTSTRAP  (0) 2015.11.15
LOGIN SESSIONS USING PHP PDO AND BOOTSTRAP  (0) 2015.11.15
HOW TO CREATE A LOGIN SESSION USING PHP MYSQLI AND BOOTSTRAP  (0) 2015.11.15

'BootStrap/Bootstrap Sample File' Related Articles

티스토리툴바