UNPKG

beefup/dist/index.html

Version:

1<!DOCTYPE html>
2<html lang="en">
3<head>
  <title>Beefup - A jQuery Accordion Plugin</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/demo.css">
  <link rel="stylesheet" href="css/jquery.beefup.css">
  <link href='http://fonts.googleapis.com/css?family=Roboto:300,700' rel='stylesheet' type='text/css'>
10</head>
11
12<body>
13<header>
  <h1>BeefUp v1.1.4 <span>A jQuery Accordion Plugin</span></h1>
  <a href="https://github.com/Schascha/BeefUp" title="View on GitHub" class="button">GitHub</a>
16</header>
17
18<main>
19
  <article class="beefup example1">
      <h3 class="beefup__head">
          Item 1
      </h3>
24
      <div class="beefup__body">
          <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
              Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
              mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
          </p>
      </div>
  </article>
33
  <article class="beefup example1">
      <h3 class="beefup__head">
          Item 2
      </h3>
38
      <div class="beefup__body">
          <article class="beefup example1">
              <h4 class="beefup__head">
                  Nested Item
              </h4>
44
              <div class="beefup__body">
                  <p>
                      Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
                      arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
                  </p>
              </div>
          </article>
      </div>
  </article>
54
55<pre>
56$('.example1').beefup();
57</pre>
58
  <hr>
60
  <h2>Open single</h2>
62
  <p>
      Open just one accordion at once. It is possible to choose one item that will not automatically close.
  </p>
66
  <article class="beefup example2 is-open" id="example2-1">
      <h3 class="beefup__head">
          Item 1
      </h3>
71
      <div class="beefup__body">
          <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
              Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
              mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
          </p>
      </div>
  </article>
80
  <article class="beefup example2" id="example2-2">
      <h3 class="beefup__head">
          Item 2
      </h3>
85
      <div class="beefup__body">
          <p>
              Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
              In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
          </p>
      </div>
  </article>
93
  <article class="beefup example2" id="example2-3">
      <h3 class="beefup__head">
          Locked item
      </h3>
98
      <div class="beefup__body">
          <p>
              Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
              semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
              eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
              viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
              augue. Curabitur ullamcorper ultricies nisi.
          </p>
      </div>
  </article>
109
110<pre>
111$('.example2').beefup({
  openSingle: true,
  stayOpen: 2
114});
115</pre>
116
  <hr>
118
  <h2>Animations</h2>
120
  <p>
      By default the accordion will slide down and up.
      It is possible to set the animation type to "slide", "fade" or leave empty "" and to define the open and the
      close animation speed.
  </p>
126
  <article class="beefup example3">
      <h3 class="beefup__head">
          Fade
      </h3>
131
      <div class="beefup__body">
          <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
              Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
              mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
          </p>
      </div>
  </article>
140
141<pre>
142$('.example3').beefup({
  animation: 'fade',
  openSpeed: 400,
  closeSpeed: 400
146});
147</pre>
148
  <hr>
150
  <h2>Scroll</h2>
152
  <p>
      Scroll to the top of the open accordion. Use the property "scrollOffset" to add additional space or
      "scrollSpeed" to define the animation speed.
  </p>
157
  <article class="beefup example4">
      <h3 class="beefup__head">
          Item 1
      </h3>
162
      <div class="beefup__body">
          <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
              Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
              mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
          </p>
      </div>
  </article>
171
  <article class="beefup example4">
      <h3 class="beefup__head">
          Item 2
      </h3>
176
      <div class="beefup__body">
          <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
              Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
              mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
          </p>
      </div>
  </article>
185
186<pre>
187$('.example4').beefup({
  scroll: true,
  scrollOffset: -10
190});
191</pre>
192
  <hr>
194
  <h2>
      Self close
  </h2>
198
  <p>
      Close the accordion on click outside of the element.
  </p>
202
  <article class="beefup example5">
      <h3 class="beefup__head">
          Item
      </h3>
207
      <div class="beefup__body">
          <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
              Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
              mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
          </p>
      </div>
  </article>
216
217<pre>
218$('.example5').beefup({
  selfClose: true
220});
221</pre>
222
  <hr>
224
  <h2>API Methods</h2>
226
  <p>Trigger open, close, click or scroll events.</p>
228
  <article class="beefup example6" id="beefup">
      <h3 class="beefup__head">
          Open
      </h3>
233
      <div class="beefup__body">
          <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
              Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
              mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
          </p>
      </div>
  </article>
242
243<pre>
244var $beefup = $('.example6').beefup();
245$beefup.open($('#beefup'));
246</pre>
247
  <hr>
249
  <h2>Callbacks</h2>
251
  <p>
      Also available are event driven callback methods on init, open and close.
  </p>
255
  <article class="beefup example7">
      <h3 class="beefup__head">
          Callback
      </h3>
260
      <div class="beefup__body">
          <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
              Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
              mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
          </p>
      </div>
  </article>
269
  <pre>
271$('.example7').beefup({
  onInit: function($el) {
      $el.css('border-color', 'blue');
  },
  onOpen: function($el) {
      $el.css('border-color', 'green');
  },
  onClose: function($el) {
      $el.css('border-color', 'red');
  }
281});
282</pre>
283
  <hr>
285
  <h2>
      HTML5 data attributes
  </h2>
289
  <p>
      Overwrite default options by using HTML5 data attributes.
  </p>
293
  <article class="beefup example8" data-beefup-options='{"animation": "", "openSpeed": 800}'>
      <h3 class="beefup__head">
          Item
      </h3>
298
      <div class="beefup__body">
          <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
              Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
              mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
          </p>
      </div>
  </article>
307
  <pre>
309&lt;script&gt;
  $('.example8').beefup();
311&lt;/script&gt;
312
313&lt;article class="beefup example8" data-beefup-options='{"animation": "", "openSpeed": 800}'&gt;
  ...
315&lt;/article&gt;
316</pre>
317
  <hr>
319
  <h2>Tabs</h2>
321
  <div class="tab">
      <ul class="tab__head">
          <li class="is-open">
              <a href="#tab1" title="">
                  Tab 1
              </a>
          </li>
          <li>
              <a href="#tab2" title="">
                  Tab 2
              </a>
          </li>
          <li>
              <a href="#tab3" title="">
                  Tab 3
              </a>
          </li>
      </ul>
340
      <article class="beefup tab__item is-open" id="tab1">
          <h3 class="beefup__head">
              Tab 1
          </h3>
345
          <div class="beefup__body">
              <p>
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                  Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                  mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
              </p>
          </div>
      </article>
354
      <article class="beefup tab__item" id="tab2">
          <h3 class="beefup__head">
              Tab 2
          </h3>
359
          <div class="beefup__body">
              <p>
                  Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
              </p>
          </div>
      </article>
367
      <article class="beefup tab__item" id="tab3">
          <h3 class="beefup__head">
              Tab 3
          </h3>
372
          <div class="beefup__body">
              <p>
                  Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
                  semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
                  eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
                  viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
                  augue. Curabitur ullamcorper ultricies nisi.
              </p>
          </div>
      </article>
  </div>
384
385<pre>
386$('.tab__item').beefup({
  animation: '',
  openSingle: true,
  openSpeed: 0,
  closeSpeed: 0,
  onOpen: function($el) {
      // Add active class to tabs
      $('a[href="#' + $el.attr('id') + '"]').parent().addClass(this.openClass)
              .siblings().removeClass(this.openClass);
  }
396});
397</pre>
398
  <hr>
400
  <h2>Dropdown</h2>
402
  <div class="beefup dropdown">
      <button class="beefup__head">
          Button
      </button>
407
      <ul class="beefup__body dropdown__menu">
          <li>
              <a title="">
                  Item 1
              </a>
          </li>
          <li>
              <a title="">
                  Item 2
              </a>
          </li>
          <li>
              <a title="">
                  Item 3
              </a>
          </li>
      </ul>
  </div>
426
427<pre>
  $('.dropdown').beefup({
      animation: 'fade',
      openSingle: true,
      selfClose: true
  });
433</pre>
434
435</main>
436
437<footer>
  <p>&COPY; 2016 Sascha Künstler.</p>
439</footer>
440
441<script src="js/jquery.min.js"></script>
442<script src="js/jquery.beefup.min.js"></script>
443<script>
  $(function() {
445
      // Default
      $('.example1').beefup();
448
      // Open single
      $('.example2').beefup({
          openSingle: true,
          stayOpen: '#example2-3'
      });
454
      // Fade animation
      $('.example3').beefup({
          animation: 'fade',
          openSpeed: 400,
          closeSpeed: 400
      });
461
      // Scroll
      $('.example4').beefup({
          scroll: true,
          scrollOffset: -10
      });
467
      // Self close
      $('.example5').beefup({
          selfClose: true
      });
472
      // Open via JS
      var $beefup = $('.example6').beefup();
      $beefup.open($('#beefup'));
476
      // Callback
      $('.example7').beefup({
          onInit: function($el) {
              $el.css('border-color', 'blue');
          },
          onOpen: function($el) {
              $el.css('border-color', 'green');
          },
          onClose: function($el) {
              $el.css('border-color', 'red');
          }
      });
489
      // Use HTML5 data attributes
      $('.example8').beefup();
492
      // Tabs
      $('.tab__item').beefup({
          animation: '',
          openSingle: true,
          openSpeed: 0,
          closeSpeed: 0,
          onOpen: function($el) {
              // Add active class to tabs
              $('a[href="#' + $el.attr('id') + '"]').parent().addClass(this.openClass)
                      .siblings().removeClass(this.openClass);
          }
      });
505
      // Dropdown
      $('.dropdown').beefup({
          animation: 'fade',
          openSingle: true,
          selfClose: true
      });
  });
513</script>
514</body>
515</html>

1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<title>Beefup - A jQuery Accordion Plugin</title>`
5	`<meta charset="UTF-8">`
6	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
7	`<link rel="stylesheet" href="css/demo.css">`
8	`<link rel="stylesheet" href="css/jquery.beefup.css">`
9	`<link href='http://fonts.googleapis.com/css?family=Roboto:300,700' rel='stylesheet' type='text/css'>`
10	`</head>`
11
12	`<body>`
13	`<header>`
14	`<h1>BeefUp v1.1.4 <span>A jQuery Accordion Plugin</span></h1>`
15	`<a href="https://github.com/Schascha/BeefUp" title="View on GitHub" class="button">GitHub</a>`
16	`</header>`
17
18	`<main>`
19
20	`<article class="beefup example1">`
21	`<h3 class="beefup__head">`
22	`Item 1`
23	`</h3>`
24
25	`<div class="beefup__body">`
26	`<p>`
27	`Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.`
28	`Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus`
29	`mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.`
30	`</p>`
31	`</div>`
32	`</article>`
33
34	`<article class="beefup example1">`
35	`<h3 class="beefup__head">`
36	`Item 2`
37	`</h3>`
38
39	`<div class="beefup__body">`
40	`<article class="beefup example1">`
41	`<h4 class="beefup__head">`
42	`Nested Item`
43	`</h4>`
44
45	`<div class="beefup__body">`
46	`<p>`
47	`Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,`
48	`arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.`
49	`</p>`
50	`</div>`
51	`</article>`
52	`</div>`
53	`</article>`
54
55	`<pre>`
56	`$('.example1').beefup();`
57	`</pre>`
58
59	`<hr>`
60
61	`<h2>Open single</h2>`
62
63	`<p>`
64	`Open just one accordion at once. It is possible to choose one item that will not automatically close.`
65	`</p>`
66
67	`<article class="beefup example2 is-open" id="example2-1">`
68	`<h3 class="beefup__head">`
69	`Item 1`
70	`</h3>`
71
72	`<div class="beefup__body">`
73	`<p>`
74	`Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.`
75	`Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus`
76	`mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.`
77	`</p>`
78	`</div>`
79	`</article>`
80
81	`<article class="beefup example2" id="example2-2">`
82	`<h3 class="beefup__head">`
83	`Item 2`
84	`</h3>`
85
86	`<div class="beefup__body">`
87	`<p>`
88	`Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.`
89	`In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.`
90	`</p>`
91	`</div>`
92	`</article>`
93
94	`<article class="beefup example2" id="example2-3">`
95	`<h3 class="beefup__head">`
96	`Locked item`
97	`</h3>`
98
99	`<div class="beefup__body">`
100	`<p>`
101	`Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum`
102	`semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,`
103	`eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus`
104	`viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel`
105	`augue. Curabitur ullamcorper ultricies nisi.`
106	`</p>`
107	`</div>`
108	`</article>`
109
110	`<pre>`
111	`$('.example2').beefup({`
112	`openSingle: true,`
113	`stayOpen: 2`
114	`});`
115	`</pre>`
116
117	`<hr>`
118
119	`<h2>Animations</h2>`
120
121	`<p>`
122	`By default the accordion will slide down and up.`
123	`It is possible to set the animation type to "slide", "fade" or leave empty "" and to define the open and the`
124	`close animation speed.`
125	`</p>`
126
127	`<article class="beefup example3">`
128	`<h3 class="beefup__head">`
129	`Fade`
130	`</h3>`
131
132	`<div class="beefup__body">`
133	`<p>`
134	`Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.`
135	`Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus`
136	`mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.`
137	`</p>`
138	`</div>`
139	`</article>`
140
141	`<pre>`
142	`$('.example3').beefup({`
143	`animation: 'fade',`
144	`openSpeed: 400,`
145	`closeSpeed: 400`
146	`});`
147	`</pre>`
148
149	`<hr>`
150
151	`<h2>Scroll</h2>`
152
153	`<p>`
154	`Scroll to the top of the open accordion. Use the property "scrollOffset" to add additional space or`
155	`"scrollSpeed" to define the animation speed.`
156	`</p>`
157
158	`<article class="beefup example4">`
159	`<h3 class="beefup__head">`
160	`Item 1`
161	`</h3>`
162
163	`<div class="beefup__body">`
164	`<p>`
165	`Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.`
166	`Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus`
167	`mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.`
168	`</p>`
169	`</div>`
170	`</article>`
171
172	`<article class="beefup example4">`
173	`<h3 class="beefup__head">`
174	`Item 2`
175	`</h3>`
176
177	`<div class="beefup__body">`
178	`<p>`
179	`Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.`
180	`Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus`
181	`mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.`
182	`</p>`
183	`</div>`
184	`</article>`
185
186	`<pre>`
187	`$('.example4').beefup({`
188	`scroll: true,`
189	`scrollOffset: -10`
190	`});`
191	`</pre>`
192
193	`<hr>`
194
195	`<h2>`
196	`Self close`
197	`</h2>`
198
199	`<p>`
200	`Close the accordion on click outside of the element.`
201	`</p>`
202
203	`<article class="beefup example5">`
204	`<h3 class="beefup__head">`
205	`Item`
206	`</h3>`
207
208	`<div class="beefup__body">`
209	`<p>`
210	`Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.`
211	`Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus`
212	`mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.`
213	`</p>`
214	`</div>`
215	`</article>`
216
217	`<pre>`
218	`$('.example5').beefup({`
219	`selfClose: true`
220	`});`
221	`</pre>`
222
223	`<hr>`
224
225	`<h2>API Methods</h2>`
226
227	`<p>Trigger open, close, click or scroll events.</p>`
228
229	`<article class="beefup example6" id="beefup">`
230	`<h3 class="beefup__head">`
231	`Open`
232	`</h3>`
233
234	`<div class="beefup__body">`
235	`<p>`
236	`Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.`
237	`Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus`
238	`mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.`
239	`</p>`
240	`</div>`
241	`</article>`
242
243	`<pre>`
244	`var $beefup = $('.example6').beefup();`
245	`$beefup.open($('#beefup'));`
246	`</pre>`
247
248	`<hr>`
249
250	`<h2>Callbacks</h2>`
251
252	`<p>`
253	`Also available are event driven callback methods on init, open and close.`
254	`</p>`
255
256	`<article class="beefup example7">`
257	`<h3 class="beefup__head">`
258	`Callback`
259	`</h3>`
260
261	`<div class="beefup__body">`
262	`<p>`
263	`Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.`
264	`Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus`
265	`mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.`
266	`</p>`
267	`</div>`
268	`</article>`
269
270	`<pre>`
271	`$('.example7').beefup({`
272	`onInit: function($el) {`
273	`$el.css('border-color', 'blue');`
274	`},`
275	`onOpen: function($el) {`
276	`$el.css('border-color', 'green');`
277	`},`
278	`onClose: function($el) {`
279	`$el.css('border-color', 'red');`
280	`}`
281	`});`
282	`</pre>`
283
284	`<hr>`
285
286	`<h2>`
287	`HTML5 data attributes`
288	`</h2>`
289
290	`<p>`
291	`Overwrite default options by using HTML5 data attributes.`
292	`</p>`
293
294	`<article class="beefup example8" data-beefup-options='{"animation": "", "openSpeed": 800}'>`
295	`<h3 class="beefup__head">`
296	`Item`
297	`</h3>`
298
299	`<div class="beefup__body">`
300	`<p>`
301	`Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.`
302	`Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus`
303	`mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.`
304	`</p>`
305	`</div>`
306	`</article>`
307
308	`<pre>`
309	`<script>`
310	`$('.example8').beefup();`
311	`</script>`
312
313	`<article class="beefup example8" data-beefup-options='{"animation": "", "openSpeed": 800}'>`
314	`...`
315	`</article>`
316	`</pre>`
317
318	`<hr>`
319
320	`<h2>Tabs</h2>`
321
322	`<div class="tab">`
323	`<ul class="tab__head">`
324	`<li class="is-open">`
325	`<a href="#tab1" title="">`
326	`Tab 1`
327	`</a>`
328	`</li>`
329	`<li>`
330	`<a href="#tab2" title="">`
331	`Tab 2`
332	`</a>`
333	`</li>`
334	`<li>`
335	`<a href="#tab3" title="">`
336	`Tab 3`
337	`</a>`
338	`</li>`
339	`</ul>`
340
341	`<article class="beefup tab__item is-open" id="tab1">`
342	`<h3 class="beefup__head">`
343	`Tab 1`
344	`</h3>`
345
346	`<div class="beefup__body">`
347	`<p>`
348	`Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.`
349	`Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus`
350	`mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.`
351	`</p>`
352	`</div>`
353	`</article>`
354
355	`<article class="beefup tab__item" id="tab2">`
356	`<h3 class="beefup__head">`
357	`Tab 2`
358	`</h3>`
359
360	`<div class="beefup__body">`
361	`<p>`
362	`Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.`
363	`In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.`
364	`</p>`
365	`</div>`
366	`</article>`
367
368	`<article class="beefup tab__item" id="tab3">`
369	`<h3 class="beefup__head">`
370	`Tab 3`
371	`</h3>`
372
373	`<div class="beefup__body">`
374	`<p>`
375	`Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum`
376	`semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,`
377	`eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus`
378	`viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel`
379	`augue. Curabitur ullamcorper ultricies nisi.`
380	`</p>`
381	`</div>`
382	`</article>`
383	`</div>`
384
385	`<pre>`
386	`$('.tab__item').beefup({`
387	`animation: '',`
388	`openSingle: true,`
389	`openSpeed: 0,`
390	`closeSpeed: 0,`
391	`onOpen: function($el) {`
392	`// Add active class to tabs`
393	`$('a[href="#' + $el.attr('id') + '"]').parent().addClass(this.openClass)`
394	`.siblings().removeClass(this.openClass);`
395	`}`
396	`});`
397	`</pre>`
398
399	`<hr>`
400
401	`<h2>Dropdown</h2>`
402
403	`<div class="beefup dropdown">`
404	`<button class="beefup__head">`
405	`Button`
406	`</button>`
407
408	`<ul class="beefup__body dropdown__menu">`
409	`<li>`
410	`<a title="">`
411	`Item 1`
412	`</a>`
413	`</li>`
414	`<li>`
415	`<a title="">`
416	`Item 2`
417	`</a>`
418	`</li>`
419	`<li>`
420	`<a title="">`
421	`Item 3`
422	`</a>`
423	`</li>`
424	`</ul>`
425	`</div>`
426
427	`<pre>`
428	`$('.dropdown').beefup({`
429	`animation: 'fade',`
430	`openSingle: true,`
431	`selfClose: true`
432	`});`
433	`</pre>`
434
435	`</main>`
436
437	`<footer>`
438	`<p>&COPY; 2016 Sascha Künstler.</p>`
439	`</footer>`
440
441	`<script src="js/jquery.min.js"></script>`
442	`<script src="js/jquery.beefup.min.js"></script>`
443	`<script>`
444	`$(function() {`
445
446	`// Default`
447	`$('.example1').beefup();`
448
449	`// Open single`
450	`$('.example2').beefup({`
451	`openSingle: true,`
452	`stayOpen: '#example2-3'`
453	`});`
454
455	`// Fade animation`
456	`$('.example3').beefup({`
457	`animation: 'fade',`
458	`openSpeed: 400,`
459	`closeSpeed: 400`
460	`});`
461
462	`// Scroll`
463	`$('.example4').beefup({`
464	`scroll: true,`
465	`scrollOffset: -10`
466	`});`
467
468	`// Self close`
469	`$('.example5').beefup({`
470	`selfClose: true`
471	`});`
472
473	`// Open via JS`
474	`var $beefup = $('.example6').beefup();`
475	`$beefup.open($('#beefup'));`
476
477	`// Callback`
478	`$('.example7').beefup({`
479	`onInit: function($el) {`
480	`$el.css('border-color', 'blue');`
481	`},`
482	`onOpen: function($el) {`
483	`$el.css('border-color', 'green');`
484	`},`
485	`onClose: function($el) {`
486	`$el.css('border-color', 'red');`
487	`}`
488	`});`
489
490	`// Use HTML5 data attributes`
491	`$('.example8').beefup();`
492
493	`// Tabs`
494	`$('.tab__item').beefup({`
495	`animation: '',`
496	`openSingle: true,`
497	`openSpeed: 0,`
498	`closeSpeed: 0,`
499	`onOpen: function($el) {`
500	`// Add active class to tabs`
501	`$('a[href="#' + $el.attr('id') + '"]').parent().addClass(this.openClass)`
502	`.siblings().removeClass(this.openClass);`
503	`}`
504	`});`
505
506	`// Dropdown`
507	`$('.dropdown').beefup({`
508	`animation: 'fade',`
509	`openSingle: true,`
510	`selfClose: true`
511	`});`
512	`});`
513	`</script>`
514	`</body>`
515	`</html>`