Content...
Foundation
Sections
Sections are similar to tabs as a way to selectively show a single panel of content at a time.
Section 1. 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.
Section 1. 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.
Section 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.
Sections Replace Accordion, Tabs, Vertical Nav & Nav Bar
Sections replace a few things that you are used to from Foundation 3. We've taken the accordion, the tabs and the vertical nav and combined them into this really flexible plugin that can handle all of those. The single JS file handles all the interactions, but the classes you add to the element control how it gets rendered and styled across our breakpoint.
Build With Predefined HTML Classes
There are two ways to build sections in Foundation 4, with our predefined HTML classes or with our structure and mixins. Building a sections using our predefined classes is super-easy, you just need to create a <div class="section-container" data-section> as a wrapper for the sections themselves. Inside of this wrapper, you'll create either a <section class="section"> or <div class="section">. Within that you'll include some sort of .title (this can be headers or a paragraph) and a <div class="content">. Here is the markup you'll need:
If you want to use ZURB's default styles for section elements you can apply the auto, tabs, accordion, vertical-nav, or horizontal-nav classes. By default, section elements will be an accordion on mobile and tabs on desktops and tablets. If you want to adjust this behavior and force a particular format for your section, you will need to set data-section equal to the format you want to force as shown in the variations below.
<div class="section-container auto" data-section>
<section class="active">
<p class="title" data-section-title><a href="#panel1">Section 1</a></p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#panel2">Section 2</a></p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>This example will automatically switch between tabs and accordion based on the resolution of the device.
The class options:
- auto
- tabs
- accordion
- vertical-nav
- horizontal-nav
For these styles to come across, make sure you have the default Foundation CSS package or that you've selected section from a custom package. These should be linked up following our default HTML page structure.
Variations
Accordion
Adding an accordion class to the section container will show an accordion on both small and large screens.
<div class="section-container accordion" data-section="accordion">
<section class="active">
<p class="title" data-section-title><a href="#">Section 1</a></p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#">Section 2</a></p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>Tabs
Adding a tabs class to the section container will enable tabs on both small and large screens.
<div class="section-container tabs" data-section="tabs">
<section class="active">
<p class="title" data-section-title><a href="#">Section 1</a></p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#">Section 2</a></p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>Vertical Tabs
Adding a vertical-tabs class to the section container and setting data-section="vertical-tabs" will enable tabs on both small and large screens.
<div class="section-container vertical-tabs" data-section="vertical-tabs">
<section class="active">
<p class="title" data-section-title><a href="#">Section 1</a></p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#">Section 2</a></p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#">Section 3</a></p>
<div class="content" data-section-content>
<p>Content of section 3.</p>
</div>
</section>
</div>Vertical Nav/Accordion
Adding a vertical-nav class to the section container will enable vertical navigation elements on large screens and show an accordion on small screens.
Vertical navigation elements usually appear within the grid so the width can be controlled on desktop.
Use the side-nav class on the list to apply the Foundation navigation styles
<div class="row">
<div class="large-3 columns">
<div class="section-container vertical-nav" data-section="vertical-nav" data-options="one_up: false;">
<section>
<p class="title" data-section-title><a href="#">Section 1</a></p>
<div class="content" data-section-content>
<ul class="side-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="divider"></li>
<li><a href="#">Link 1</a></li>
</ul>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#">Section 2</a></p>
<div class="content" data-section-content>
<ul class="side-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="divider"></li>
<li><a href="#">Link 1</a></li>
</ul>
</div>
</section>
</div>
</div>
<div class="large-9 columns">
<p>Content to the right of the navigation.</p>
</div>
</div>Content to the right of the navigation.
Horizontal Nav/Nav Bar
Adding a horizontal-nav class to the section container will enable horizontal navigation elements on large screens and show an accordion on small screens.
Horizontal navigation is a combination of the tab setting with vertical navigation drop downs.
Use the side-nav class on the list to apply the Foundation navigation styles
<div class="section-container horizontal-nav" data-section="horizontal-nav" data-options="one_up: false;">
<section>
<p class="title" data-section-title><a href="#">Section 1</a></p>
<div class="content" data-section-content>
<ul class="side-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="divider"></li>
<li><a href="#">Link 1</a></li>
</ul>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#">Section 2</a></p>
<div class="content" data-section-content>
<ul class="side-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="divider"></li>
<li><a href="#">Link 1</a></li>
</ul>
</div>
</section>
</div>
Deep Linking
Set deep-linking to true to enable deep linking to sections of content. Deep linking allows visitors to visit a predefined URL with a hash that points to a particular section of the content. Deep linking also requires a matching data-slug on the content section that the hash should point to, without the pound (#) sign.
<div class="section-container auto" data-section data-options="deep_linking: true">
<section class="active">
<p class="title" data-section-title><a href="#section1">Section 1</a></p>
<div class="content" data-slug="section1" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#section2">Section 2</a></p>
<div class="content" data-slug="section2" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>Nested Sections
You can infinitely nest Section elements to create more complicated Section layouts.
Content 1 Summary Paragraphs
Detail awesome stuff!
Detail awesome stuff numeroe duo.
Content 2
<div class="section-container auto" data-section>
<section class="active">
<p class="title"><a href="#section1">ROOT: Section 1</a></p>
<div class="content" data-slug="section1">
<p>Content 1 Summary Paragraphs</p>
<div class="section-container auto" data-section>
<section>
<p class="title"><a href="#section1-1">DETAIL: #1</a></p>
<div class="content">
<p>Detail awesome stuff!</p>
</div>
</section>
<section>
<p class="title"><a href="#section1-2">DETAIL: #2</a></p>
<div class="content">
<p>Detail awesome stuff numeroe duo.</p>
</div>
</section>
</div>
</div>
</section>
<section>
<p class="title"><a href="#section2">ROOT: Section 2</a></p>
<div class="content" data-slug="section2">
<p>Content 2</p>
</div>
</section>
</div>
Note: The section element can be replaced with a div.section element if you do not want to use HTML5 elements.
Building with Mixins
If you are keen on SCSS and use it for your Foundation projects, you have access to mixins that will let you create any type of section you want and change it within a media query too! Building a section with our mixins requires a bit of predefined structure, but you can choose the classes or ID's to style them with. Start with some sort of block-level container, we use a <div>. This container needs to have data-section="type-of-section". The section types are explained above. Inside this you create "sections", which can be an HTML5 section element or a <div class="section">, that will hold content.
Title and Content Elements
Inside of these "sections" you created you'll need to add a title and content. To create the title element, use something like a <p>, <h5>, etc and give it an attribute of data-section-title. After this, you add <div data-section-content> and fill it with your content.
Here's an example structure you might use with the section mixin:
<div class="your-class-name" data-section="auto"> <!-- Can use "auto", "accordion", "tabs", "vertical-nav", or "horizontal-nav" -->
<section class="your-section-class">
<p class="your-title-class" data-section-title><a href="#section1">Section 1</a></p>
<div class="your-content-class" data-slug="section1" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section class="your-section-class">
<p class="your-title-class" data-section-title><a href="#section2">Section 2</a></p>
<div class="your-content-class" data-slug="section2" data-section-content>
<p>Content of section 2.</p>
</section>
</div>
</div>Here's a look at the available options for the mixins you need to create sections:
@include section-container($base-style, $section-type) { ... }
/* Container Options */
/* This controls whether or not you include default styles when chaining classes, set to true or false */
$base-style: true
/* This controls the style for the section you are using: accordion, tabs, vertical-tabs, vertical-nav, horizontal-nav */
$section-type: accordion
@include section($section-type, $title-selector, $content-selector, $title-padding, $title-color, $title-font-size, $title-bg, $title-bg-hover, $title-bg-active, $title-color-active, $content-bg, $content-padding, $section-border-size, $section-border-style, $section-border-color) { ... }
/* Section Options */
/* Control which section type styles come across: accordion, tabs, vertical-tabs, vertical-nav, horizontal-nav */
$section-type: accordion
/* You can set the class that is used for the title elements */
$title-selector: ".title"
/* You can set the class that is used for the content elements */
$content-selector: ".content"
/* Give the titles some padding, can be any px or em-calc() value */
$title-padding: $section-padding
/* give the titles a color, any color value */
$title-color: $section-title-color
/* Set the font size for titles */
$title-font-size: $section-font-size
/* Set the background color for titles */
$title-bg: $section-title-bg
/* Change title background for hover */
$title-bg-hover: $section-title-bg-hover
/* Change title background for .active */
$title-bg-active: $section-title-bg-active
/* Change title color for .active */
$title-color-active: $section-title-color
/* Content area background color */
$content-bg: $section-content-bg
/* Content area padding */
$content-padding: $section-content-padding
/* Border size in pixels */
$section-border-size: $section-border-size
/* Border style */
$section-border-style: $section-border-style
/* Border color */
$section-border-color: $section-border-colorAuto Configuration
The default use case for our section plugin is to create accordions on small screens and tabs on large screens.
<div class="section-auto-sample" data-section="auto">
<section class="active">
<p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
<div class="content-sample" data-slug="section1" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
<div class="content-sample" data-slug="section2" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
.section-auto-sample {
@include section-container($section-type:accordion);
& > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
@media #{$small} {
@include section-container(false,$section-type:tabs);
& > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
}
}Accordion Configuration
You can have your section act like an accordion the entire time, like so:
<div class="section-auto-sample-accordion" data-section="accordion">
<section class="active">
<p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
<div class="content-sample" data-slug="section1" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
<div class="content-sample" data-slug="section2" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
.section-auto-sample-accordion {
@include section-container($section-type:accordion);
& > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
}Tabs Configuration
You can have your section act like tabs the entire time, like so:
<div class="section-auto-sample-tabs" data-section="tabs">
<section class="active">
<p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
<div class="content-sample" data-slug="section1" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
<div class="content-sample" data-slug="section2" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
.section-auto-sample-tabs {
@include section-container($section-type:tabs);
& > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
}Vertical Tabs Configuration
You can have your section act like vertical tabs on large screen and go back to accordion on small screens, like so:
<div class="section-auto-sample-vtabs" data-section="vertical-tabs">
<section class="active">
<p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
<div class="content-sample" data-slug="section1" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
<div class="content-sample" data-slug="section2" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
.section-auto-sample-vtabs {
@include section-container($section-type:accordion);
& > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
}
@media #{$small} {
.section-auto-sample-vtabs {
@include section-container($section-type:vertical-tabs);
& > section { @include section($section-type:vertical-tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
}
}Vertical Nav Configuration
You can have your section act like vertical navigation the entire time, like so:
<div class="nav-container">
<nav>
<div class="section-auto-sample-vnav" data-section="vertical-nav">
<section>
<p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
<div class="content-sample" data-slug="section1" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
<div class="content-sample" data-slug="section2" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
</nav>
<section class="page-content">
<p>Content...</p>
</section>
</div>
.nav-container { @include grid-row($behavior:nest);
> nav { @include grid-column($columns:4); }
}
.section-auto-sample-vnav {
@include section-container($section-type:accordion);
& > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
}
@media #{$small} {
.section-auto-sample-vnav {
@include section-container($section-type:vertical-nav);
& > section { @include section($section-type:vertical-nav, $title-selector:".title-sample", $content-selector:".content-sample"); }
}
}Horizontal Nav Configuration
You can have your section act like horizontal navigation the entire time, like so:
<div class="section-auto-sample-hnav" data-section="horizontal-nav">
<section>
<p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
<div class="content-sample" data-slug="section1" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
<div class="content-sample" data-slug="section2" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
.section-auto-sample-hnav {
@include section-container($section-type:accordion);
& > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
}
@media #{$small} {
.section-auto-sample-hnav {
@include section-container($section-type:horizontal-nav);
& > section { @include section($section-type:horizontal-nav, $title-selector:".title-sample", $content-selector:".content-sample"); }
}
}Custom Styles Using the Mixin
You have access to a few options that will make styling the sections really easy and you can add onto it as you want. You'll still need the data-section attribute to match the style you give the mixin.
<div class="section-auto-sample-custom" data-section="tabs">
<section class="active">
<p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
<div class="content-sample" data-slug="section1" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
<div class="content-sample" data-slug="section2" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
.section-auto-sample-custom {
@include section-container($section-type:tabs);
& > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample", $title-padding: 10px 50px, $title-color:#000, $title-bg:pink, $title-bg-hover:darken(pink,5%), $title-bg-active: #fff, $title-color-active: darken(pink,10%)); }
}Default SCSS Variables
$include-html-section-classes: $include-html-classes;
/* We use these to set padding and hover factor */
$section-title-padding: em-calc(15);
$section-content-padding: em-calc(15);
$section-function-factor: 10%;
/* These style the titles */
$section-title-color: #333;
$section-title-color-active: #333;
$section-title-bg: #efefef;
$section-title-bg-active: darken($section-title-bg, $section-function-factor);
$section-title-bg-active-tabs: #fff;
$section-title-bg-hover: darken($section-title-bg, $section-function-factor / 2);
/* Want to control border size, here ya go! */
$section-border-size: 1px;
$section-border-style: solid;
$section-border-color: #ccc;
/* Font controls */
$section-font-size: em-calc(14);
/* Control the color of the background and some size options */
$section-content-bg: #fff;
$section-vertical-nav-min-width: em-calc(200);
$section-vertical-tabs-title-width: em-calc(200);
$section-bottom-margin: em-calc(20);
$title-selector: ".title";
$content-selector: ".content";
$active-region-selector: ".active";
Note: em-calc(); is a function we wrote to convert px to em.
Using the JavaScript
Before you can use sections you'll want to verify that both jQuery (or Zepto) and
foundation.js are available on your page. You can refer to the javascript documentation on setting that up.
Just add foundation.section.js AFTER the foundation.js file. Your markup should look something like this:
<body>
...
<script>
document.write('<script src=/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.section.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation();
</script>
</body>
Required Foundation Library: foundation.section.js
Then, you'll need to add a data-attribute to make the JS work properly on that element. That looks like:
<div class="section-container auto" data-section>
<section class="active">
<p class="title" data-section-title><a href="#panel1">Section 1</a></p>
<div class="content" data-section-content>
<ul class="side-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="divider"></li>
<li><a href="#">Link 1</a></li>
</ul>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#panel2">Section 2</a></p>
<div class="content" data-section-content>
<ul class="side-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="divider"></li>
<li><a href="#">Link 1</a></li>
</ul>
</div>
</section>
</div>
Note: If you are using Sections in a Modal, or they are being loaded via AJAX, or they are hidden when Foundation is initialized, you will need to reflow the sections to get tabs to display properly:
$('#myModal').on('opened', function () {
$(this).foundation('section', 'reflow');
});
Optional JavaScript Configuration
You can either set these options in a data-options attribute in the markup, data-options="option: value; option2: value syntax", or pass in on initialization.
{
deep_linking: false, // Allows for querystring hashtag direct linking
one_up: true, // Ensures the first section is shown on initial view
multi_expand: false, // For accordion, allows more than one section to be expanded at the same time.
rtl: false, // Flags for right-to-left behavior
callback: function (){} // Called when a section is selected.
}