X
GO
en-UScy-GB

Responsive Tab

  Features   >   Short Codes   >   Responsive Tab

Style 1

  • First tab
  • Second tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur. Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur.

Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

SOURCE CODE 
<div class="horizontalTab_Top horizontalTab_Top_1">
    <ul class="resp-tabs-list">
        <li><span>Title 1</span></li>
        <li><span>Title 2</span></li>
    </ul>
    <div class="resp-tabs-container">
        <div class="resp_container">
            <div class="resp_margin">Content text 1 ...</div>
        </div>
        <div class="resp_container">
            <div class="resp_margin">Content text 2 ...</div>
        </div>
    </div>
</div>

Style 3

  • First tab
  • Second tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio gravida felis in, eleifend posuere odio.

Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio gravida felis in, eleifend posuere odio. Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis.

SOURCE CODE 
<div class="verticalTab_Right verticalTab_Right_1">
    <ul class="resp-tabs-list">
        <li><span>Title 1</span></li>
        <li><span>Title 2</span></li>
    </ul>
    <div class="resp-tabs-container">
        <div class="resp_container">
        	<div class="resp_margin">Content text 1 ...</div>
        </div>
        <div class="resp_container">
        	<div class="resp_margin">Content text 2 ...</div>
        </div>
    </div>
</div>

Style 5

  • First tab
  • Second tab
  • Thrid tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur. Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur.

Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur.

Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

SOURCE CODE 
<div class="verticalTab_Left verticalTab_Left_2">
    <ul class="resp-tabs-list">
        <li><span><em class="fa fa-heart-o"></em>Title 1</span></li>
        <li><span><em class="fa fa-heart-o"></em>Title 2</span></li>
    </ul>
    <div class="resp-tabs-container">
        <div class="resp_container">
            <div class="resp_margin">Content text 1 ...</div>
        </div>
        <div class="resp_container">
            <div class="resp_margin">Content text 2 ...</div>
        </div>
    </div>
</div>

Style 7

  • First tab
  • Second tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur. Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur.

Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

SOURCE CODE 
<div class="horizontalTab_Top horizontalTab_Top_3">
    <ul class="resp-tabs-list">
        <li><span>Title 1</span></li>
        <li><span>Title 2</span></li>
    </ul>
    <div class="resp-tabs-container">
        <div class="resp_container">
            <div class="resp_margin">Content text 1 ...</div>
        </div>
        <div class="resp_container">
            <div class="resp_margin">Content text 2 ...</div>
        </div>
    </div>
</div>

Style 9

  • First tab
  • Second tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur. Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur.

Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

SOURCE CODE 
<div class="verticalTab_Right verticalTab_Right_3">
    <ul class="resp-tabs-list">
        <li><span>Title 1</span></li>
        <li><span>Title 2</span></li>
    </ul>
    <div class="resp-tabs-container">
        <div class="resp_container">
            <div class="resp_margin">Content text 1 ...</div>
        </div>
        <div class="resp_container">
            <div class="resp_margin">Content text 2 ...</div>
        </div>
    </div>
</div>

Style 11

  • Responsive Tab 1
  • Responsive Tab 2
  • Responsive Tab 3
  • Long name Responsive Tab 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.

This tab has icon in it.

Suspendisse blandit velit Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravid urna gravid eget erat suscipit in malesuada odio venenatis.

d ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.

SOURCE CODE 
  1. <div class="verticalTab_Left">
  2.   <ul class="resp-tabs-list">
  3.    <li><span>Responsive Tab 1</span></li>
  4.    <li><span>Responsive Tab 2</span></li>
  5.    <li><span>Responsive Tab 3</span></li>
  6.    <li><span>Long name Responsive Tab 4</span></li>
  7.   </ul>
  8.  <div class="resp-tabs-container">
  9.   <div class="resp_container">
  10.    <div class="resp_margin">
  11.     <p>Content text 1 ...</p>
  12.    </div>
  13.   </div>
  14.   <div class="resp_container">
  15.    <div class="resp_margin">
  16.     <p>Content text 2 ...</p>
  17.    </div>
  18.   </div>
  19.   <div class="resp_container">
  20.    <div class="resp_margin">
  21.     <p>Content text 3 ...</p>
  22.    </div>
  23.   </div>
  24.   <div class="resp_container">
  25.    <div class="resp_margin">
  26.     <p>Content text 4 ...</p>
  27.    </div>
  28.   </div>
  29.  </div>
  30. </div>

Style 2

  • First tab
  • Second tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio gravida felis in, eleifend posuere odio.

Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio gravida felis in, eleifend posuere odio. Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis.

SOURCE CODE 
<div class="verticalTab_Left verticalTab_Left_1">
    <ul class="resp-tabs-list">
        <li><span>Title 1</span></li>
        <li><span>Title 2</span></li>
    </ul>
    <div class="resp-tabs-container">
        <div class="resp_container">
        	<div class="resp_margin">Content text 1 ...</div>
        </div>
        <div class="resp_container">
        	<div class="resp_margin">Content text 2 ...</div>
        </div>
    </div>
</div>

Style 4

  • First tab
  • Second tab
  • Thrid tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur. Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur.

Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur.

Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

SOURCE CODE 
<div class="horizontalTab_Top horizontalTab_Top_2">
    <ul class="resp-tabs-list">
        <li><span><em class="fa fa-heart-o"></em>Title 1</span></li>
        <li><span><em class="fa fa-heart-o"></em>Title 2</span></li>
    </ul>
    <div class="resp-tabs-container">
        <div class="resp_container">
            <div class="resp_margin">Content text 1 ...</div>
        </div>
        <div class="resp_container">
            <div class="resp_margin">Content text 2 ...</div>
        </div>
    </div>
</div>

Style 6

  • First tab
  • Second tab
  • Thrid tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur. Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur.

Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur.

Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

SOURCE CODE 
<div class="verticalTab_Right verticalTab_Right_2">
    <ul class="resp-tabs-list">
        <li><span><em class="fa fa-heart-o"></em>Title 1</span></li>
        <li><span><em class="fa fa-music"></em>Title 2</span></li>
    </ul>
    <div class="resp-tabs-container">
        <div class="resp_container">
            <div class="resp_margin">Content text 1 ...</div>
        </div>
        <div class="resp_container">
            <div class="resp_margin">Content text 2 ...</div>
        </div>
    </div>
</div>

Style 8

  • First tab
  • Second tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur. Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur.

Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

SOURCE CODE 
<div class="verticalTab_Left verticalTab_Left_3">
    <ul class="resp-tabs-list">
        <li><span>Title 1</span></li>
        <li><span>Title 2</span></li>
    </ul>
    <div class="resp-tabs-container">
        <div class="resp_container">
            <div class="resp_margin">Content text 1 ...</div>
        </div>
        <div class="resp_container">
            <div class="resp_margin">Content text 2 ...</div>
        </div>
    </div>
</div>

Style 10

  • Responsive 1
  • Responsive 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur. Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.

SOURCE CODE 
  1. <div class="horizontalTab_Top">
  2.   <ul class="resp-tabs-list">
  3.    <li><span>Responsive 1</span></li>
  4.    <li><span>Responsive 2</span></li>
  5.   </ul>
  6.  <div class="resp-tabs-container">
  7.   <div class="resp_container">
  8.    <div class="resp_margin">
  9.     <p>Content text 1 ...</p>
  10.    </div>
  11.   </div>
  12.   <div class="resp_container">
  13.    <div class="resp_margin">
  14.     <p>Content text 2 ...</p>
  15.    </div>
  16.   </div>
  17.  </div>
  18. </div>

Style 12

  • Responsive Tab 1
  • Responsive Tab 2
  • Responsive Tab 3
  • Long name Responsive Tab 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.

This tab has icon in it.

Suspendisse blandit velit Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravid urna gravid eget erat suscipit in malesuada odio venenatis.

d ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.

SOURCE CODE 
  1. <div class="verticalTab_Right">
  2.   <ul class="resp-tabs-list">
  3.    <li><span>Responsive Tab 1</span></li>
  4.    <li><span>Responsive Tab 2</span></li>
  5.    <li><span>Responsive Tab 3</span></li>
  6.    <li><span>Long name Responsive Tab 4</span></li>
  7.   </ul>
  8.  <div class="resp-tabs-container">
  9.   <div class="resp_container">
  10.    <div class="resp_margin">
  11.     <p>Content text 1 ...</p>
  12.    </div>
  13.   </div>
  14.   <div class="resp_container">
  15.    <div class="resp_margin">
  16.     <p>Content text 2 ...</p>
  17.    </div>
  18.   </div>
  19.   <div class="resp_container">
  20.    <div class="resp_margin">
  21.     <p>Content text 3 ...</p>
  22.    </div>
  23.   </div>
  24.   <div class="resp_container">
  25.    <div class="resp_margin">
  26.     <p>Content text 4 ...</p>
  27.    </div>
  28.   </div>
  29.  </div>
  30. </div>