<% @side_nav = "js" %>
<% @page_title = "Sections" %>

<%= @page_title %>

Sections are similar to tabs as a way to selectively show a single panel of content at a time.

Section 1

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

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.

Section 3


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 paragragh) 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.

<%= code_example '

Section 1

Content of section 1.

Section 2

Content of section 2.

', :html %>

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.

<%= code_example '

Section 1

Content of section 1.

Section 2

Content of section 2.

', :html %>
Tabs

Adding a tabs class to the section container will enable tabs on both small and large screens.

<%= code_example '

Section 1

Content of section 1.

Section 2

Content of section 2.

', :html %>
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

<%= code_example '

Content to the right of the navigation.

', :html %>
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

<%= code_example ' ', :html %>
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.

<%= code_example '

Section 1

Content of section 1.

Section 2

Content of section 2.

', :html %>

Note: The section element can be replaced with a div.section element if you do not want to use HTML5 elements.


Section 1

Content of section 1.

Section 2

Content of section 2.

', :html %>
-->
Default SCSS Variables
<%= code_example ' /* We use these to set padding and hover factor */ $section-padding: emCalc(15px); $section-function-factor: 10%; /* These style the titles */ $section-title-color: #333; $section-title-bg: #efefef; $section-title-bg-active: darken($section-title-bg, $section-function-factor); $section-title-bg-active-tabs: #fff; /* Want to control border size, here ya go! */ $section-border-size: 1px; $section-border-style: solid; $section-border-color: #ccc; /* Control the color of the background and some size options */ $section-content-bg: #fff; $section-vertical-nav-min-width: emCalc(200px); $section-bottom-margin: emCalc(20px); ', :css %>

Note: emCalc(); is a function we wrote to convert px to em.


Using the JavaScript

You'll need to include zepto.js and foundation.js above the sections plugin. Above your closing </body> tag include the following line of code and make sure you have the JS in your directory.

Read how to install Foundation JavaScript

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:

<%= code_example ' ', :html %>
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.

<%= code_example " { deep_linking: false, one_up: true, rtl: false, callback: function (){} }", :js %>
<%= render "_sidebar-components.html.erb" %>