• Getting Started
    • Welcome
    • Setup with NGINX (OpenResty)
  • General
    • XY Grid
      • Overview
      • Basics
      • Gutters
      • Grid Container
      • Grid Container Fluid
      • Grid Container Full
      • Auto Sizing
      • Responsive Adjustments
      • Collapse Cells
      • Offsets
      • Block Grids
      • Looking for Push/Pull?
      • Vertical Grids
      • Grid Frame
    • Flex Grid (legacy)
      • Overview
    • Float Grid (legacy)
      • Overview
    • GridX
      • GridX beSmall:1
      • GridX beSmall:12
      • GridX beMedium:1
      • GridX beMedium:12
      • GridX beLarge:1
      • GridX beLarge:12
      • beSmall:x beMedium:y beLarge:z
      • Overview
    • GridY
      • Forms
        • Text Inputs
        • Number Inputs
        • Text Area
        • Select Menus
        • Checkboxes and Radio Buttons
        • Help Text (Accessibility)
        • Label Positioning
        • Inline Labels and Buttons
        • File Upload Button
        • Custom Controls (Accessibility)
    • Utilities
      • Prototyping Utilities
        • Overview
        • Enabling Prototype Mode
        • Coming Soon
      • Flexbox Utilities
        • Basic
        • Horizontal Alignment
        • Vertical Alignment
        • Central Alignment
        • Vanilla Flexbox Helper Classes
        • Responsive Classes
        • Source Ordering
      • Visibility Classes
        • Overview
        • Show by Screen Size
        • Hide by Screen Size
        • Generic Hide Classes
        • Orientation Detection
        • Show for Screen Readers Only
        • Hide for Screen Readers Only
        • Creating Skip Links
      • Float Classes
        • Left/Right
        • Center
    • Typography
      • Paragraph
      • Header
      • Header Styles
      • Icons
      • Small Header Segments
      • Links
      • Dividers
      • Unordered Lists
      • Ordered Lists
      • Definition Lists
      • Blockquotes
      • Abbreviations
      • Code
      • Accessibility
      • Keystrokes
      • Print Styles
    • Controls
      • Buttons
        • Basic
        • Sizing
        • Coloring
        • Custom Colors
        • Text Colors
        • Hollow Style
        • Disabled
        • Clear Style
        • Dropdown Arrows
        • Accessibility
      • Button Group
        • Basics
        • Sizing
        • Coloring
        • Even-width Group
        • Stacking
        • Split Buttons
      • Close Button
        • Close Button
        • Making Closable
      • Slider
        • Basics
        • Vertical
        • Disabled
        • Two Handles
        • Data Binding
        • Native Range Slider
        • Non-linear value translation
        • Reflow
      • Switch
        • Basics
        • Radio Switch
        • Sizing Classes
        • Inner Labels
    • Navigation
      • Menu
        • Basic Menu
        • Item Alignment
        • Vertical Menu
        • Simple Style
        • Nested Style
        • Active State
        • Text
        • Icons
        • Icon Top
        • Icon Right
        • Icon Bottom
        • Icon Left
      • Dropdown Menu
        • Horizontal
        • Vertical
        • Preventing FOUC
      • Drilldown Menu
        • Basics
        • autoHeight
        • ScrollTop Drilldown
        • Custom Styling
      • Accordion Menu
        • Basics
        • Submenu Toggle
      • Top Bar
        • Basics
        • Combining With Title Bar
      • Responsive Navigation
        • Responsive Menu
        • Drilldown Dropdown Menu
        • Accordion Dropdown Menu
        • Drilldown Accordion Menu
        • Responsive Toggle
        • Responsive Toggle with animation
        • Preventing FOUC
      • Magellan
        • Setup
        • Sticky Navigation
        • Sticky Navigation Simplified
      • Pagination
        • Basics
        • Centered
      • Breadcrumbs
        • Basics
    • Containers
      • Accordion
        • Basics
        • Multi-expand
        • All Closed
        • Disabled
        • Accordion and URLs
      • Callout
        • Basics
        • Coloring
        • Sizing
        • Making Closable
      • Card
        • Basics
        • Card Divider
        • Images
        • Sizing
      • Dropdown
        • Basics
        • Positioning
        • Top and Bottom Positioned
        • Left and Right Positioned
      • Media Object
        • Basics
        • Section Alignment
        • Stack on Small
        • Nesting Media Objects
      • Off-canvas
        • Setup
      • Reveal
        • Basics
        • Sizing
        • Nested Modal
        • Full Screen
        • No Overlay
        • Animations
        • Ajax
        • Accessibility
      • Table
        • Basics
        • Hover State
        • Stripes
        • Stacked Table
        • Scrolling Table
      • Tabs
        • Basics
        • Vertical Tabs
        • Collapsing Tabs
        • Deep linking
      • Responsive Accordion Tabs
        • Basics
        • Tabs HTML Markup
    • Media
      • Badge
        • Basics
        • Coloring
        • Custom Colors
        • Text Colors
        • Icons
      • Responsive Embed
        • Basics
        • Aspect Ratios
      • Label
        • Basics
        • Coloring
        • Custom Colors
        • Icons
        • Text Colors
      • Orbit
        • Basics
        • Wrapper
        • Slide Container
        • Next/Previous Arrows
        • Bullets
        • Slide Contents
        • Using Animation
        • Disabling Animation
      • Progress Bar
        • Basics
        • Colors
        • With Text
        • Native Progress
        • Native Meter
      • Thumbnail
        • Basics
      • Tooltip
        • Basic
        • Top
        • Clicking
        • Right and Left
        • Top and Bottom Positioned
        • Left and Right Positioned
        • With Anchor ?
    • Plugins
      • Abide
        • Abide Demo
        • Form Errors
        • Initial State
        • Error State
        • Ignored Inputs
        • Event Listener
        • Builtin Patterns and Validators
        • Adding Custom Pattern and Validator
        • Accessibility
      • Equalizer
        • Basics
        • Nesting
        • Equalize By Row
      • Interchange
        • Use with Images
        • Use with HTML
        • Use with Background Images
        • Named Media Queries
        • Programmatic Use
      • Toggler
        • Toggle a CSS class
        • Toggle with Animation
        • Mark as Closable
        • With Alternate Animation
        • Toggle on focus
        • Multiple Targets
      • Smooth Scroll
        • Setup
      • Sticky
        • Basics
        • Advanced
        • Stick to bottom
        • Sticky Navigation
    • Sass
      • Sass Stub Example
    • Building Blocks
      • Navigation
        • Multi Level Accordion File Menu
        • Sticky Social Bar
        • Hero Subnav
        • Top Bar with Animation
        • Multilevel OffCanvas
        • Breadcrumb Nav With Counter
      • Status
        • Clipped Circle Graph
      • Media
        • Pull Quote
        • Responsive Vertical Timeline
      • Containers
        • Responsive Table
        • Flip Card
        • CSS Masonry Grid
        • Profile Card With Action Icons
        • Card Profile Stats
        • Marketing Site Hero Section
        • Dashboard Number Card
        • Dashboard Nav Card
        • Dashboard Table
        • Marketing Site Footer
        • Marketing Site Content Section
        • App Dashboard Layout
        • Social Media Footer
      • Forms
        • Animated Expanding Search Form
        • Floating Label Forms
        • Transluscent Form Overlay
      • Control
        • Social Icons With Hover Effect
        • Social Buttons
        • Rounded Social Buttons
        • Toggle All Switch
        • Simple Content Filter
        • Hover Add To Cart Button
        • Like Button
    • Template Outlines
      • News Or Magazine Outline
    • Templates
      • News Or Magazine
      • Real Estate
      • Ecommerce Homepage
      • Agency
      • Blog W/Sidebar
      • Blog Single Column
      • Portfolio
      • Product Page
    • JQuery Basics
      • JQuery Basics Stub Example
    • JQuery Queries
      • JQuery Queries Stub Example
    • JQuery Actions
      • JQuery Actions Stub Example
    • JQuery Ajax
      • JQuery Actions Stub Example
      • JQuery Ajax Dude
    Zurb Foundation 6 for Seaside
    • Intro
    • Overview

      There are two pieces to a tabbed interface: the tabs themselves, and the content for each tab. The tabs are an element with the class .tabs, and each item has the class .tabs-title. Each tab contains a link to a tab. The href of each link should match the ID of a tab. Alternatively, the ID can be specified with the attribute data-tabs-target.

    • Examples

      • Tab 1
      • Tab 2

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.

    • Smalltalk Source Code

    • Links

      https://foundation.zurb.com/sites/docs/tabs.html#basics
    • Privacy Policy
    • About
    • Disclaimers