• Home
    • Tabbed Slider
    • Fading Slider
  • Gallery
    • Portfolio 1 Column
    • Portfolio 2 Columns
    • Portfolio 3 Columns
    • Portfolio 4 Columns
    • Portfolio Detailed View
    • Galleria
  • Blog
    • Index
    • Single Post
    • Archive Page
  • Pages
    • About Us
    • Testimonials
    • Services
    • Sitemap
    • Pricing Boxes
    • 404 Error Page
    • Layout options
      • Right Sidebar
      • Left Sidebar
      • Full Width
      • Column Layouts
    • Intro Blurb Options
      • Title & Teaser Text
      • Title & Recent Tweet
      • Title Only
      • Custom_HTML
    • Footer Options
      • One Column Footer
      • Two Columns Footer
      • Three Columns Footer
      • Four Columns Footer
      • Five Columns Footer
      • Six Columns Footer
  • Typography
  • Code Snippets
    • Style Snippets
    • Column Snippets
    • Gallery and Image Snippets
    • jQuery Tabs and Toggles
    • Tooltips
  • Skins
    • New Minimal Variations
      • Minimal Soft Blue
      • Minimal Soft Green
      • Minimal Soft Brown
      • Minimal White
      • Minimal Soft Yellow
      • Minimal Soft Lavender
    • New Matte Variations
      • Blue
      • Steel Blue
      • Olive
      • Soft Orange
      • Tan
      • Lavender
      • Wine
    • Matte Varitaions
      • Slate Grey
      • Hot Pink
      • Teal
      • Navy
      • Primary Purple
      • Primary Blue
      • Earthy Green
      • Primary Orange
      • Primary Red
      • Deep Sea Green
      • Coffee
      • Rich Black
      • Primary Green
      • Copper
      • Silver
      • Sienna
      • Soft Purple
      • Soft Teal
    • Glossy Variations
      • Glossy Blue
      • Glossy Purple
      • Glossy Black
      • Glossy Red
      • Glossy Teal
      • Glossy Green
    • Glass Variations
      • Frosted Glass Aurora
      • Frosted Glass Wood
      • Black Glass Mosaic
      • Black Glass Space
      • Black Glass Space Blue
    • Classics
      • Classic Silver
      • Classic White Lights
  • Contact

jQuery Tabs & Toggles

Adding popular modern jQuery effects couldn't be easier.

Home / Code Snippets / jQuery Tabs & Toggles

jQuery Toggle Content

Creating toggle content like those seen below couldn’t be easier. They’re also great for FAQ’s! Check out an implementation here:

Minimalist Toggle Style

Nunc dignissim est

Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Quisque aliquam. Nunc iaculis suscipit. Dignissim convallis. Donec faucibus.

Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Nullam dignissim convallis est

Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Nullam volutpat convallis. Nunc iaculis suscipit dui

Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Framed Toggle Style

Nullam dignissim est

Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Dignissim convallis mi. Nam sit amet dui?

Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Quisque iaculis est dui

Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Top
jQuery Minimalist Arrow Tabs

Now you can create elegant minimalist arrow tabs like the ones used for the blog’s comments and recent and related post modules. Check out the implementation here: Blog Comments

  • Tab 1
  • Tab 2
  • Tab 3
This is the first tab

Vestibulum eu lorem elit. Donec porta vulputate sem, sed interdum ligula semper quis. Pellentesque sollicitudin condimentum nisl, in euismod augue vestibulum feugiat.

This is the second tab

You can put anything in here… Below is a checklist for example…

  • Check list item #1
  • Check list item #2
  • Nullam dignissim convallis est.
  • Proin porttitor; sem in ultrices suscipit, diam odio volutpat lorem, scelerisque aliquet odio lorem non orci.
  • Nullam dignissim convallis est.
  • Proin porttitor; sem in ultrices suscipit, diam odio volutpat lorem.
  • Scelerisque aliquet odio lorem non orci.

Tab content 3

jQuery Framed Tabs
  • Tab 1
  • Tab 2
  • Tab 3

Vestibulum eu lorem elit. Donec porta vulputate sem, sed interdum ligula semper quis. Pellentesque sollicitudin condimentum nisl, in euismod augue vestibulum feugiat. Quisque sem elit, faucibus at rutrum a, iaculis ut nunc. Nulla facilisi. Aenean convallis nulla semper nisl vestibulum lobortis? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam molestie aliquam porta. Nunc justo enim, convallis sit amet placerat quis, suscipit vel erat. Sed leo ligula, vulputate at hendrerit id, lacinia at sapien. Aenean venenatis elementum interdum. Mauris non sed.

This is the second tab

You can put anything in here… Below is a checklist for example…

  • Check list item #1
  • Check list item #2
  • Nullam dignissim convallis est.
  • Proin porttitor; sem in ultrices suscipit, diam odio volutpat lorem, scelerisque aliquet odio lorem non orci.
  • Nullam dignissim convallis est.
  • Proin porttitor; sem in ultrices suscipit, diam odio volutpat lorem.
  • Scelerisque aliquet odio lorem non orci.

Third slide content 3

Top

Code Snippets

  • Style Snippets
  • Column Snippets
  • Gallery & Image Snippets
  • jQuery Tabs & Toggles
  • Tooltips
  • @JasonMarti @larssonpatrik @colaja Thanks for the RTs and mention about webtreats. Much appreciated!!!
Features
  • Layout Options
  • Admin Panel
  • Intro Blurb Options
  • Skins & Color Variations
  • Typography
Galleries
  • Portfolio 1 Column
  • Portfolio 2 Columns
  • Portfolio 3 Columns
  • Portfolio 4 Columns
  • Wordpress Default
  • Image Shortcodes
Demo Content
  • About Us
  • Contact Us
  • Testimonials
  • Services
  • Feature Lists
  • Services
  • Pricing
Documentation
  • Online Documentation
  • FAQs
  • Getting Started
  • Language Support
  • Customizations
  • Changelog
Shortcodes
  • Style Shortcodes
  • Column Shortcodes
  • Gallery & Image Shortcodes
  • jQuery Tabs & Toggles
  • Widget Shortcodes
Layouts
  • Left Sidebar
  • Right Sidebar
  • Full Width
  • Column Layouts
© 2009 WebTreats ETC. All Rights Reserved