This page requires a Javascript enabled browser
<< Back | Main Menu | FAQ | [?]

Tabs

Organize content in auto-resizing tabbed containers.

Local: CSS/JS files (add code to <HEAD> section):

1
2
3
4
5
6
<!-- DC Tabs CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/tabs/css/dc_tabs.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Tabs JS -->
<script type="text/javascript" src="dcodes/tabs/js/dc_tabs.js"></script>

Hosted: CSS/JS files (add code to <HEAD> section):

1
2
3
4
5
6
<!-- DC Tabs CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/tabs/css/dc_tabs.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Tabs JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/tabs/js/dc_tabs.js"></script>

Gradient Tabs


About us

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in risus nisl. Aenean porta viverra risus, sed pulvinar orci convallis in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

How we work

Cras pretium augue ut felis lacinia congue. Phasellus consequat mauris ut sapien sagittis suscipit. Integer ut lacus sit amet eros laoreet porta. Sed semper imperdiet ligula, in gravida enim gravida eget.

Services

Quisque egestas elementum justo, vitae pharetra lorem fermentum sit amet. Ut sodales ipsum quis nunc laoreet condimentum. Aliquam erat volutpat. Integer et tempor leo.

Excellence

Nullam sapien neque, accumsan sed placerat a, elementum volutpat purus. Proin feugiat, augue et hendrerit dignissim, dolor quam porttitor ligula, a dignissim felis urna id libero.

Portfolio

Nulla nec augue et metus bibendum viverra. Integer neque odio, placerat quis porttitor eget, bibendum eu risus. Suspendisse erat arcu, placerat vitae posuere sit amet, aliquam a enim. Phasellus ullamcorper blandit consequat.

Examples

Donec velit quam, commodo ac vulputate non, viverra nec massa. Quisque semper convallis sem, a congue nisi posuere a. Ut vel tortor augue.

Contact

Nullam eget metus quis sapien pharetra feugiat. Fusce sit amet nulla sit amet leo ultrices sodales. Proin eu tortor sapien. Integer at elit non dolor lacinia adipiscing.

Get in touch

Fusce nec nunc arcu. Nam in quam purus. Nullam libero mi, convallis id pellentesque ut, dictum non nulla. Mauris ac quam odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

View code:

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
<!-- DC Gradient Tabs Start -->
<section class="dc_gradient-tabs" style="width:90%; height:auto;">
   
  <!-- Tab 1 Caption -->
  <input id="grad-tab-1" type="radio" name="radio-set1" class="grad-tab-selector-1" checked="checked" />
  <label for="grad-tab-1" class="grad-tab-label-1">About</label>
   
  <!-- Tab 2 Caption -->
  <input id="grad-tab-2" type="radio" name="radio-set1" class="grad-tab-selector-2" />
  <label for="grad-tab-2" class="grad-tab-label-2">Services</label>
   
  <!-- Tab 3 Caption -->
  <input id="grad-tab-3" type="radio" name="radio-set1" class="grad-tab-selector-3" />
  <label for="grad-tab-3" class="grad-tab-label-3">Work</label>
   
  <!-- Tab 4 Caption -->
  <input id="grad-tab-4" type="radio" name="radio-set1" class="grad-tab-selector-4" />
  <label for="grad-tab-4" class="grad-tab-label-4">Contact</label>
   
  <div class="clear-shadow"></div>
  <div class="gradtab-content"> <!-- Tab Content Container -->
     
    <!-- Tab 1 Start -->
    <div class="gradtab-content-1">
      <h2>About us</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in risus nisl. Aenean porta viverra risus, sed pulvinar orci convallis in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      <h3>How we work</h3>
      <p>Cras pretium augue ut felis lacinia congue. Phasellus consequat mauris ut sapien sagittis suscipit. Integer ut lacus sit amet eros laoreet porta. Sed semper imperdiet ligula, in gravida enim gravida eget. </p>
    </div>
    <!-- Tab 1 End -->
     
    <!-- Tab 2 Start -->
    <div class="gradtab-content-2">
      <h2>Services</h2>
      <p>Quisque egestas elementum justo, vitae pharetra lorem fermentum sit amet. Ut sodales ipsum quis nunc laoreet condimentum. Aliquam erat volutpat. Integer et tempor leo.</p>
      <h3>Excellence</h3>
      <p>Nullam sapien neque, accumsan sed placerat a, elementum volutpat purus. Proin feugiat, augue et hendrerit dignissim, dolor quam porttitor ligula, a dignissim felis urna id libero. </p>
    </div>
    <!-- Tab 2 End -->
     
    <!-- Tab 3 Start -->
    <div class="gradtab-content-3">
      <h2>Portfolio</h2>
      <p>Nulla nec augue et metus bibendum viverra. Integer neque odio, placerat quis porttitor eget, bibendum eu risus. Suspendisse erat arcu, placerat vitae posuere sit amet, aliquam a enim. Phasellus ullamcorper blandit consequat.</p>
      <h3>Examples</h3>
      <p>Donec velit quam, commodo ac vulputate non, viverra nec massa. Quisque semper convallis sem, a congue nisi posuere a. Ut vel tortor augue. </p>
    </div>
    <!-- Tab 3 End -->
     
    <!-- Tab 4 Start -->
    <div class="gradtab-content-4">
      <h2>Contact</h2>
      <p>Nullam eget metus quis sapien pharetra feugiat. Fusce sit amet nulla sit amet leo ultrices sodales. Proin eu tortor sapien. Integer at elit non dolor lacinia adipiscing.</p>
      <h3>Get in touch</h3>
      <p>Fusce nec nunc arcu. Nam in quam purus. Nullam libero mi, convallis id pellentesque ut, dictum non nulla. Mauris ac quam odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </div>
    <!-- Tab 4 End -->
     
  </div> <!-- /gradtab-content -->
</section>
<!-- DC Gradient Tabs End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

Vertical Gradient Tabs



About us

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in risus nisl. Aenean porta viverra risus, sed pulvinar orci convallis in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

How we work

Cras pretium augue ut felis lacinia congue. Phasellus consequat mauris ut sapien sagittis suscipit. Integer ut lacus sit amet eros laoreet porta.

Services

Quisque egestas elementum justo, vitae pharetra lorem fermentum sit amet. Ut sodales ipsum quis nunc laoreet condimentum. Aliquam erat volutpat. Integer et tempor leo. Sed semper imperdiet ligula, in gravida enim gravida eget.

Excellence

Nullam sapien neque, accumsan sed placerat a, elementum volutpat purus. Proin feugiat, augue et hendrerit dignissim, dolor quam porttitor ligula, a dignissim felis urna id libero.

Portfolio

Nulla nec augue et metus bibendum viverra. Integer neque odio, placerat quis porttitor eget, bibendum eu risus. Suspendisse erat arcu, placerat vitae posuere sit amet, aliquam a enim. Phasellus ullamcorper blandit consequat.

Examples

Donec velit quam, commodo ac vulputate non, viverra nec massa. Quisque semper convallis sem, a congue nisi posuere a. Ut vel tortor augue.

Contact

Suisque egestas elementum justo, vitae pharetra lorem fermentum sit amet. Ut sodales ipsum quis nunc laoreet condimentum. Aliquam erat volutpat. Integer et tempor leo. Sed semper imperdiet ligula, in gravida enim gravida eget.

Get in touch

Fusce nec nunc arcu. Nam in quam purus. Nullam libero mi, convallis id pellentesque ut, dictum non nulla. Mauris ac quam odio.

View code:

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
<!-- DC vGradient Tabs Start -->
<section class="dc_gradient-vtabs" style="width:90%; height:auto;">
   
  <!-- Tab 1 Caption -->
  <input id="vgrad-tab-1" type="radio" name="radio-set2" class="vgrad-tab-selector-1" checked="checked" />
  <label for="vgrad-tab-1" class="vgrad-tab-label-1">About</label>
   
  <!-- Tab 2 Caption -->
  <input id="vgrad-tab-2" type="radio" name="radio-set2" class="vgrad-tab-selector-2" />
  <label for="vgrad-tab-2" class="vgrad-tab-label-2">Services</label>
   
  <!-- Tab 3 Caption -->
  <input id="vgrad-tab-3" type="radio" name="radio-set2" class="vgrad-tab-selector-3" />
  <label for="vgrad-tab-3" class="vgrad-tab-label-3">Work</label>
   
  <!-- Tab 4 Caption -->
  <input id="vgrad-tab-4" type="radio" name="radio-set2" class="vgrad-tab-selector-4" />
  <label for="vgrad-tab-4" class="vgrad-tab-label-4">Contact</label>
   
  <div class="clear-shadow"></div>
  <div class="vgradtab-content"> <!-- Tab Content Container -->
     
    <!-- Tab 1 Start -->
    <div class="vgradtab-content-1">
      <h2>About us</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in risus nisl. Aenean porta viverra risus, sed pulvinar orci convallis in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      <h3>How we work</h3>
      <p>Cras pretium augue ut felis lacinia congue. Phasellus consequat mauris ut sapien sagittis suscipit. Integer ut lacus sit amet eros laoreet porta. </p>
    </div>
    <!-- Tab 1 End -->
     
    <!-- Tab 2 Start -->
    <div class="vgradtab-content-2">
      <h2>Services</h2>
      <p>Quisque egestas elementum justo, vitae pharetra lorem fermentum sit amet. Ut sodales ipsum quis nunc laoreet condimentum. Aliquam erat volutpat. Integer et tempor leo. Sed semper imperdiet ligula, in gravida enim gravida eget.</p>
      <h3>Excellence</h3>
      <p>Nullam sapien neque, accumsan sed placerat a, elementum volutpat purus. Proin feugiat, augue et hendrerit dignissim, dolor quam porttitor ligula, a dignissim felis urna id libero. </p>
    </div>
    <!-- Tab 2 End -->
     
    <!-- Tab 3 Start -->
    <div class="vgradtab-content-3">
      <h2>Portfolio</h2>
      <p>Nulla nec augue et metus bibendum viverra. Integer neque odio, placerat quis porttitor eget, bibendum eu risus. Suspendisse erat arcu, placerat vitae posuere sit amet, aliquam a enim. Phasellus ullamcorper blandit consequat.</p>
      <h3>Examples</h3>
      <p>Donec velit quam, commodo ac vulputate non, viverra nec massa. Quisque semper convallis sem, a congue nisi posuere a. Ut vel tortor augue. </p>
    </div>
    <!-- Tab 3 End -->
     
    <!-- Tab 4 Start -->
    <div class="vgradtab-content-4">
      <h2>Contact</h2>
      <p>Suisque egestas elementum justo, vitae pharetra lorem fermentum sit amet. Ut sodales ipsum quis nunc laoreet condimentum. Aliquam erat volutpat. Integer et tempor leo. Sed semper imperdiet ligula, in gravida enim gravida eget.</p>
      <h3>Get in touch</h3>
      <p>Fusce nec nunc arcu. Nam in quam purus. Nullam libero mi, convallis id pellentesque ut, dictum non nulla. Mauris ac quam odio.</p>
    </div>
    <!-- Tab 4 End -->
  </div> <!-- /vgradtab-content -->
</section>
<!-- DC vGradient Tabs End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

Flat Tabs


Vision


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque, tortor vel aliquam elementum, lectus urna accumsan orci, eget venenatis ligula nisl quis orci. Integer rhoncus venenatis aliquam. Nullam iaculis vehicula nunc et imperdiet. Nullam gravida nunc libero.

Donec lacinia, odio nec lacinia feugiat, mauris sem condimentum velit, sollicitudin malesuada velit ante quis quam. Fusce non scelerisque augue. Cras volutpat risus a metus fermentum placerat. Nulla adipiscing arcu sed odio semper lobortis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque, tortor vel aliquam elementum, lectus urna accumsan orci, eget venenatis ligula nisl quis orci. Integer rhoncus venenatis aliquam. Nullam iaculis vehicula nunc et imperdiet. Nullam gravida nunc libero.

View code:

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
<!-- DC Flat Tabs Start -->
<div class="dc_flat_tab_main_container" style="width:90%; height:auto;">
    <ul class="flat_tabs">
        <!-- Tab Captions -->
        <li><a href="#ftab1">Vision</a></li>
        <li><a href="#ftab2">Integrity</a></li>
        <li><a href="#ftab3">Persistence</a></li>
        <li><a href="#ftab4">Luck</a></li>
    </ul>
     
    <div class="dc_flat_tab_subcontainer" style="height:auto;"> <!-- Tab Content Container -->
         
        <!-- Tab 1 Start -->
        <div id="ftab1" class="dc_flat_tab_content">
            <h2>Vision</h2>
            <br /><a href="#"><img src="http://cdn.dcodes.net/p/150x80" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque, tortor vel aliquam elementum, lectus urna accumsan orci, eget venenatis ligula nisl quis orci. Integer rhoncus venenatis aliquam. Nullam iaculis vehicula nunc et imperdiet. Nullam gravida nunc libero. </p>
              <p>Donec lacinia, odio nec lacinia feugiat, mauris sem condimentum velit, sollicitudin malesuada velit ante quis quam. Fusce non scelerisque augue. Cras volutpat risus a metus fermentum placerat. Nulla adipiscing arcu sed odio semper lobortis. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque, tortor vel aliquam elementum, lectus urna accumsan orci, eget venenatis ligula nisl quis orci. Integer rhoncus venenatis aliquam. Nullam iaculis vehicula nunc et imperdiet. Nullam gravida nunc libero. </p>
        </div>
        <!-- Tab 1 End -->
         
        <!-- Tab 2 Start -->
        <div id="ftab2" class="dc_flat_tab_content">
            <h2>Integrity</h2>
            <br /><a href="#"><img src="http://cdn.dcodes.net/p/150x80" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque, tortor vel aliquam elementum, lectus urna accumsan orci, eget venenatis ligula nisl quis orci. Integer rhoncus venenatis aliquam. Nullam iaculis vehicula nunc et imperdiet. Nullam gravida nunc libero. </p>
              <p>Donec lacinia, odio nec lacinia feugiat, mauris sem condimentum velit, sollicitudin malesuada velit ante quis quam. Fusce non scelerisque augue. Cras volutpat risus a metus fermentum placerat. Nulla adipiscing arcu sed odio semper lobortis. </p>
        </div>
        <!-- Tab 2 End -->
         
        <!-- Tab 3 Start -->
        <div id="ftab3" class="dc_flat_tab_content">
            <h2>Persistence</h2>
            <br /><a href="#"><img src="http://cdn.dcodes.net/p/150x80" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque, tortor vel aliquam elementum, lectus urna accumsan orci, eget venenatis ligula nisl quis orci. Integer rhoncus venenatis aliquam. Nullam iaculis vehicula nunc et imperdiet. Nullam gravida nunc libero. </p>
              <p>Donec lacinia, odio nec lacinia feugiat, mauris sem condimentum velit, sollicitudin malesuada velit ante quis quam. Fusce non scelerisque augue. Cras volutpat risus a metus fermentum placerat. Nulla adipiscing arcu sed odio semper lobortis. </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque, tortor vel aliquam elementum, lectus urna accumsan orci, eget venenatis ligula nisl quis orci. Integer rhoncus venenatis aliquam. Nullam iaculis vehicula nunc et imperdiet. Nullam gravida nunc libero. </p>
        </div>
        <!-- Tab 3 End -->
         
        <!-- Tab 4 Start -->
        <div id="ftab4" class="dc_flat_tab_content">
            <h2>Luck</h2>
            <br /><a href="#"><img src="http://cdn.dcodes.net/p/150x80" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque, tortor vel aliquam elementum, lectus urna accumsan orci, eget venenatis ligula nisl quis orci. Integer rhoncus venenatis aliquam. Nullam iaculis vehicula nunc et imperdiet. Nullam gravida nunc libero. </p>
              <p>Donec lacinia, odio nec lacinia feugiat, mauris sem condimentum velit, sollicitudin malesuada velit ante quis quam. Fusce non scelerisque augue. Cras volutpat risus a metus fermentum placerat. Nulla adipiscing arcu sed odio semper lobortis. </p>
        </div>
        <!-- Tab 4 End -->
    </div> <!-- /dc_flat_tab_subcontainer -->
</div>
<!-- DC Flat Tabs End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

Vertical Tabs (Style 1)


Vertical Tab One

Tab One

Example of tab auto-resizing.

Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.

Vertical Tab Two

Tab Two

Example of tab auto-resizing.

Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.

Donec ullamcorper nulla non metus auctor firgilla. Cum sociis natoque penatibus et magnis dis parturient montees nascetur ridicuklus mus. Cras justo odio., dapibus ac faiclisis in egestas eget quam.

Vertical Tab Three

Tab Three

Example of tab auto-resizing.

Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.

Vertical Tab Four

Tab Four

Example of tab auto-resizing.

Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.

Donec ullamcorper nulla non metus auctor firgilla. Cum sociis natoque penatibus et magnis dis parturient montees nascetur ridicuklus mus. Cras justo odio., dapibus ac faiclisis in egestas eget quam.

Vertical Tab Five

Tab Five

Example of tab auto-resizing.

Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.

View code:

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
<!-- DC Vertical Tabs Start -->
<dl class="dc_tabs_type_1" style="width:90%; height:370px;">
   
  <!-- Tab 1 Start -->
  <dt class="current">Vertical Tab One</dt>
  <dd class="current">
    <h2>Tab One</h2>
    <p>Example of tab auto-resizing.</p>
    <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
  </dd>
  <!-- Tab 1 End -->
   
  <!-- Tab 2 Start -->
  <dt>Vertical Tab Two</dt>
  <dd>
    <h2>Tab Two</h2>
    <p>Example of tab auto-resizing.</p>
    <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Donec ullamcorper nulla non metus auctor firgilla. Cum sociis natoque penatibus et magnis dis parturient montees nascetur ridicuklus mus. Cras justo odio., dapibus ac faiclisis in egestas eget quam.</p>
  </dd>
  <!-- Tab 2 End -->
   
  <!-- Tab 3 Start -->
  <dt>Vertical Tab Three</dt>
  <dd>
    <h2>Tab Three</h2>
    <p>Example of tab auto-resizing.</p>
    <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
  </dd>
  <!-- Tab 3 End -->
   
  <!-- Tab 4 Start -->
  <dt>Vertical Tab Four</dt>
  <dd>
    <h2>Tab Four</h2>
    <p>Example of tab auto-resizing.</p>
    <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Donec ullamcorper nulla non metus auctor firgilla. Cum sociis natoque penatibus et magnis dis parturient montees nascetur ridicuklus mus. Cras justo odio., dapibus ac faiclisis in egestas eget quam.</p>
  </dd>
  <!-- Tab 4 End -->
   
  <!-- Tab 5 Start -->
  <dt>Vertical Tab Five</dt>
  <dd>
    <h2>Tab Five</h2>
    <p>Example of tab auto-resizing.</p>
    <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
  </dd>
  <!-- Tab 5 End -->
</dl>
<!-- DC Vertical Tabs End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

Horizontal Tabs (Style 2)


Tab One

Tab One

Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.

Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.

Tab Two

Tab Two

Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.

Donec ullamcorper nulla non metus auctor firgilla. Cum sociis natoque penatibus et magnis dis parturient montees nascetur ridicuklus mus. Cras justo odio., dapibus ac faiclisis in egestas eget quam.

Conec ullamcorper nulla non metus auctor fringila. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur riduculus mus. Craas justo odion, dapibus ac facilisis in, egestas eget quam.

Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rididulus mus. Ctas justo odio, dapobus ac facilisis in, egestas eget quam.

Tab Three

Tab Three

Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.

Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.

Tab Four

Tab Four

Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.

Donec ullamcorper nulla non metus auctor firgilla. Cum sociis natoque penatibus et magnis dis parturient montees nascetur ridicuklus mus. Cras justo odio., dapibus ac faiclisis in egestas eget quam.

Conec ullamcorper nulla non metus auctor fringila. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur riduculus mus. Craas justo odion, dapibus ac facilisis in, egestas eget quam.

Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rididulus mus. Ctas justo odio, dapobus ac facilisis in, egestas eget quam.

Tab Five

Tab 5

Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.

Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.

View code:

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
<!-- DC Horizontal Tabs Start -->
<dl class="dc_tabs_type_2" style="width:90%;">
   
  <!-- Tab 1 Start -->
  <dt class="current">Tab One</dt>
  <dd class="current">
    <h2>Tab One</h2>
    <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
  </dd>
  <!-- Tab 1 End -->
   
  <!-- Tab 2 Start -->
  <dt>Tab Two</dt>
  <dd>
    <h2>Tab Two</h2>
    <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Donec ullamcorper nulla non metus auctor firgilla. Cum sociis natoque penatibus et magnis dis parturient montees nascetur ridicuklus mus. Cras justo odio., dapibus ac faiclisis in egestas eget quam.</p>
    <p>Conec ullamcorper nulla non metus auctor fringila. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur riduculus mus. Craas justo odion, dapibus ac facilisis in, egestas eget quam.</p>
    <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rididulus mus. Ctas justo odio, dapobus ac facilisis in, egestas eget quam.</p>
  </dd>
  <!-- Tab 2 End -->
   
  <!-- Tab 3 Start -->
  <dt>Tab Three</dt>
  <dd>
    <h2>Tab Three</h2>
    <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
  </dd>
  <!-- Tab 3 End -->
   
  <!-- Tab 4 Start -->
  <dt>Tab Four</dt>
  <dd>
    <h2>Tab Four</h2>
    <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Donec ullamcorper nulla non metus auctor firgilla. Cum sociis natoque penatibus et magnis dis parturient montees nascetur ridicuklus mus. Cras justo odio., dapibus ac faiclisis in egestas eget quam.</p>
    <p>Conec ullamcorper nulla non metus auctor fringila. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur riduculus mus. Craas justo odion, dapibus ac facilisis in, egestas eget quam.</p>
    <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rididulus mus. Ctas justo odio, dapobus ac facilisis in, egestas eget quam.</p>
  </dd>
  <!-- Tab 4 End -->
   
  <!-- Tab 5 Start -->
  <dt>Tab Five</dt>
  <dd>
    <h2>Tab Five</h2>
    <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
  </dd>
  <!-- Tab 5 End -->
</dl>
<!-- DC Horizontal Tabs End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

Google Tabs (Style 3)


Tab One

Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.

Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.

Pellentesque habitant

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

View code:

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
<!-- DC Google Tabs Start -->
<div class="dc_tabs_type_3_container" style="width:90%; height:auto;">
  <ul id="dc_tabs_type_3">
    <!-- Tab Captions -->
    <li><a href="#" name="#gtab1">One</a></li>
    <li><a href="#" name="#gtab2">Two</a></li>
    <li><a href="#" name="#gtab3">Three</a></li>
    <li><a href="#" name="#gtab4">Four</a></li>
  </ul>
  <div id="dc_tabs_type_3_content" style="height:auto;"> <!-- Tab Content Container -->
     
    <!-- Tab 1 Start -->
    <div id="gtab1">
      <h2>Tab One</h2>
      <p>Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.</p>
      <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.</p>
      <h3>Pellentesque habitant</h3>
      <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
    </div>
    <!-- Tab 1 End -->
     
    <!-- Tab 2 Start -->
    <div id="gtab2">
      <h2>Tab Two</h2>
      <p>Aenean dui nulla, egestas sit amet auctor vitae, facilisis id odio. Donec dictum gravida feugiat.</p>
      <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras pretium elit et erat condimentum et volutpat lorem vehicula</p>
      <p>Morbi tincidunt pharetra orci commodo molestie. Praesent ut leo nec dolor tempor eleifend.</p>
    </div>
    <!-- Tab 2 End -->
     
    <!-- Tab 3 Start -->
    <div id="gtab3">
      <h2>Tab Three</h2>
      <p>Non erat laoreet ullamcorper. Pellentesque magna metus, feugiat eu elementum sit amet, cursus sed diam. Curabitur posuere porttitor lorem, eu malesuada tortor faucibus sed.</p>
      <h3>Duis pulvinar nibh vel urna</h3>
      <p>Donec purus leo, porttitor eu molestie quis, porttitor sit amet ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec accumsan ornare elit id imperdiet. </p>
      <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. </p>
    </div>
    <!-- Tab 3 End -->
     
    <!-- Tab 4 Start -->
    <div id="gtab4">
      <h2>Tab Four</h2>
      <p>Magnis dis parturient montes, nascetur ridiculus mus. Nullam ac massa quis nisi porta mollis venenatis sit amet urna. Ut in mauris velit, sed bibendum turpis.</p>
      <p>Nam ornare vulputate risus, id volutpat elit porttitor non. In consequat nisi vel lectus dapibus sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum sagittis libero.</p>
    </div>
    <!-- Tab 4 End -->
     
  </div> <!-- /dc_tabs_type_3_content -->
</div>
<!-- DC Google Tabs End -->
<div class="dc_clear"></div> <!-- line break/clear line -->
  
<!-- DC Google Tabs Settings -->
  <script type="text/javascript">
    function resetTabs(){
        $("#dc_tabs_type_3_content div").hide(); //Hide all content
        $("#dc_tabs_type_3 a").attr("id",""); //Reset id's     
    }
    var myUrl = window.location.href; //get URL
    var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2    
    var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab
    (function(){
        $("#dc_tabs_type_3_content div").hide(); // Initially hide all content
        $("#dc_tabs_type_3 li:first a").attr("id","current"); // Activate first tab
        $("#dc_tabs_type_3_content div:first").fadeIn(); // Show first tab content
         
        $("#dc_tabs_type_3 a").on("click",function(e) {
            e.preventDefault();
            if ($(this).attr("id") == "current"){ //detection for current tab
             return      
            }
            else{            
            resetTabs();
            $(this).attr("id","current"); // Activate this
            $($(this).attr('name')).fadeIn(); // Show content for current tab
            }
        });
        for (i = 1; i <= $("#dc_tabs_type_3 li").length; i++) {
          if (myUrlTab == myUrlTabName + i) {
              resetTabs();
              $("a[name='"+myUrlTab+"']").attr("id","current"); // Activate url tab
              $(myUrlTab).fadeIn(); // Show url tab content       
          }
        }
    })()
     
  </script>


Opera Tabs (Style 4)


Tab One

Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.

Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.

Pellentesque habitant

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.

View code:

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
<!-- DC Opera Tabs Start -->
<div class="dc_tabs_type_4_container" style="width:90%; height:auto;">
  <ul id="dc_tabs_type_4">
    <!-- Tab Captions -->
    <li><a href="#" title="red-tab1">One</a></li>
    <li><a href="#" title="red-tab2">Two</a></li>
    <li><a href="#" title="red-tab3">Three</a></li>
    <li><a href="#" title="red-tab4">Four</a></li>
  </ul>
  <div id="dc_tabs_type_4_content" style="height:auto;"> <!-- Tab Content Container -->
     
    <!-- Tab 1 Start -->
    <div id="red-tab1">
      <h2>Tab One</h2>
      <p>Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.</p>
      <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.</p>
      <h3>Pellentesque habitant</h3>
      <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
      <p>Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.</p>
    </div>
    <!-- Tab 1 End -->
     
    <!-- Tab 2 Start -->
    <div id="red-tab2">
      <h2>Tab Two</h2>
      <p>Aenean dui nulla, egestas sit amet auctor vitae, facilisis id odio. Donec dictum gravida feugiat.</p>
      <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras pretium elit et erat condimentum et volutpat lorem vehicula</p>
      <p>Morbi tincidunt pharetra orci commodo molestie. Praesent ut leo nec dolor tempor eleifend.</p>
    </div>
    <!-- Tab 2 End -->
     
    <!-- Tab 3 Start -->
    <div id="red-tab3">
      <h2>Tab Three</h2>
      <p>Non erat laoreet ullamcorper. Pellentesque magna metus, feugiat eu elementum sit amet, cursus sed diam. Curabitur posuere porttitor lorem, eu malesuada tortor faucibus sed.</p>
      <h3>Duis pulvinar nibh vel urna</h3>
      <p>Donec purus leo, porttitor eu molestie quis, porttitor sit amet ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec accumsan ornare elit id imperdiet. </p>
      <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. </p>
    </div>
    <!-- Tab 3 End -->
     
    <!-- Tab 4 Start -->
    <div id="red-tab4">
      <h2>Tab Four</h2>
      <p>Magnis dis parturient montes, nascetur ridiculus mus. Nullam ac massa quis nisi porta mollis venenatis sit amet urna. Ut in mauris velit, sed bibendum turpis.</p>
      <p>Nam ornare vulputate risus, id volutpat elit porttitor non. In consequat nisi vel lectus dapibus sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum sagittis libero.</p>
    </div>
    <!-- Tab 4 End -->
     
  </div> <!-- /dc_tabs_type_4_content -->
<!-- DC Opera Tabs End -->
<div class="dc_clear"></div> <!-- line break/clear line -->
<!-- DC Opera Tabs Settings -->
<script type="text/javascript">
/* Tabs 4 */
$(document).ready(function() {
    $("#dc_tabs_type_4_content div").hide(); // Initially hide all dc_tabs_type_4_content
    $("#dc_tabs_type_4 li:first").attr("id","current"); // Activate first tab
    $("#dc_tabs_type_4_content div:first").fadeIn(); // Show first tab dc_tabs_type_4_content
     
    $('#dc_tabs_type_4 a').click(function(e) {
        e.preventDefault();       
        $("#dc_tabs_type_4_content div").hide(); //Hide all dc_tabs_type_4_content
        $("#dc_tabs_type_4 li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show dc_tabs_type_4_content for current tab
    });
})();
</script>


Sliding Tabs

Features: Auto-Resizing Tab Heights, Enable/Disable Sliding.

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.

Tab 2

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Tab 3

Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin. Sed lacus quam, sodales sit amet feugiat sit amet, viverra nec augue. Sed enim ipsum, malesuada quis blandit vel, posuere eget erat. Sed a arcu justo. Integer ultricies, nunc at lobortis facilisis, ligula lacus vestibulum quam, id tincidunt sapien arcu in velit. Vestibulum consequat augue et turpis condimentum mollis sed vitae metus. Morbi leo libero, tincidunt lobortis fermentum eget, rhoncus vel sem. Morbi varius viverra velit vel tempus. Morbi enim turpis, facilisis vel volutpat at, condimentum quis erat. Morbi auctor rutrum libero sed placerat. Etiam ipsum velit, eleifend in vehicula eu, tristique a ipsum. Donec vitae quam vel diam iaculis bibendum eget ut diam. Fusce quis interdum diam. Ut urna justo, dapibus a tempus sit amet, bibendum at lectus. Sed venenatis molestie commodo.

Tab 4

Nulla ultricies ornare erat, a rutrum lacus varius nec. Pellentesque vehicula lobortis dignissim. Ut scelerisque auctor eros sed porttitor. Nullam pulvinar ultrices malesuada. Quisque lobortis bibendum nisi et condimentum. Mauris quis erat vel dui lobortis dignissim.

View code:

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
<!-- DC Sliding Tabs CSS -->
<link rel="stylesheet" href="dcodes/tabs/css/coda-slider-2.0.css" type="text/css" media="screen" />
<!-- DC Sliding Tabs JS -->
<script type="text/javascript" src="dcodes/jquery.easing.js"></script> <!-- jQuery Easing (do not call twice on same page) -->
<script type="text/javascript" src="dcodes/tabs/js/jquery.coda-slider-2.0.js"></script>
<!-- DC Sliding Tabs Settings -->
<script type="text/javascript">
$().ready(function() {
       $('#coda-slider-1').codaSlider({
           dynamicArrows: false, // show side tab arrows
           dynamicTabs: true,
           autoHeight: true, // adjust height of tab automatically
           autoSlide: true, // autoslide tabs
           autoSlideInterval: 3000, // 3000 = 3 seconds
           firstPanelToLoad: 1 // panel to load onstartup
       });
   });
         </script>
  <style type="text/css">
#coda-slider-1, #coda-slider-1 .panel { width: 666px; } /* width of tab container */
</style>
<!-- DC Sliding Tabs Start -->
  <div class="coda-slider-wrapper">
    <div class="coda-slider preload" id="coda-slider-1">
       
      <!-- Tab 1 Start -->
      <div class="panel">
        <div class="panel-wrapper">
          <h2 class="codatitle">Tab 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
        </div>
      </div>
      <!-- Tab 1 End -->
       
      <!-- Tab 2 Start -->
      <div class="panel">
        <div class="panel-wrapper">
          <h2 class="codatitle">Tab 2</h2>
          <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
        </div>
      </div>
      <!-- Tab 2 End -->
       
      <!-- Tab 3 Start -->
      <div class="panel">
        <div class="panel-wrapper">
          <h2 class="codatitle">Tab 3</h2>
          <p>Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin. Sed lacus quam, sodales sit amet feugiat sit amet, viverra nec augue. Sed enim ipsum, malesuada quis blandit vel, posuere eget erat. Sed a arcu justo. Integer ultricies, nunc at lobortis facilisis, ligula lacus vestibulum quam, id tincidunt sapien arcu in velit. Vestibulum consequat augue et turpis condimentum mollis sed vitae metus. Morbi leo libero, tincidunt lobortis fermentum eget, rhoncus vel sem. Morbi varius viverra velit vel tempus. Morbi enim turpis, facilisis vel volutpat at, condimentum quis erat. Morbi auctor rutrum libero sed placerat. Etiam ipsum velit, eleifend in vehicula eu, tristique a ipsum. Donec vitae quam vel diam iaculis bibendum eget ut diam. Fusce quis interdum diam. Ut urna justo, dapibus a tempus sit amet, bibendum at lectus. Sed venenatis molestie commodo.</p>
        </div>
      </div>
      <!-- Tab 3 End -->
       
      <!-- Tab 4 Start -->     
      <div class="panel">
        <div class="panel-wrapper">
          <h2 class="codatitle">Tab 4</h2>
          <p>Nulla ultricies ornare erat, a rutrum lacus varius nec. Pellentesque vehicula lobortis dignissim. Ut scelerisque auctor eros sed porttitor. Nullam pulvinar ultrices malesuada. Quisque lobortis bibendum nisi et condimentum. Mauris quis erat vel dui lobortis dignissim.</p>
        </div>
      </div>
      <!-- Tab 4 End -->
       
    </div>
  </div>
<!-- DC Sliding Tabs End -->
<div class="dc_clear"></div> <!-- line break/clear line -->


© TemplateAccess