Section

[one_fourth][accordiongroup][accordion title=”Features Default”][sidenav][sideitem link=”http://weblusive-themes.com/evolution/features/grid/”]Grid[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/features/navigation/”]Navigation[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/features/buttons/”]Buttons[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/features/forms/”]Forms[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/features/wordpress/typography/”]Typography[/sideitem][/sidenav][/accordion][accordion title=”Javascript Features”][sidenav][sideitem link=”http://weblusive-themes.com/evolution/features/orbit-slider/”]Orbit Slider[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/features/clearing/”]Clearing[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/features/dropdown/”]Dropdown[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/features/joyride/”]Joyride[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/features/magellan/”]Magellan[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/features/reveal/”]Reveal[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/features/section/”]Section[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/features/info-tooltips/”]Info Tooltips[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/features/retina-icons-font-axesome/”]Retina Icons – Font Awesome[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/features/tooltips-smallipop/”]Tooltips-Smallipop[/sideitem][/sidenav][/accordion][/accordiongroup] [/one_fourth] [three_fourth]

Section

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

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. [row] [one_third]
Vertical Navigation
[vernavgroup][vernav title=”Section 1″][sidenav][sideitem link=”#”]Link1[/sideitem][sideitem link=”#”]Link2[/sideitem][sideitem link=”#”]Link3[/sideitem][sideitem link=”#”]Link1[/sideitem][/sidenav][sidenav][/vernav][vernav title=”Section 2″][sidenav][sideitem link=”#”]Link1[/sideitem][sideitem link=”#”]Link2[/sideitem][sideitem link=”#”]Link3[/sideitem][sideitem link=”#”]Link1[/sideitem][/sidenav][sidenav][/vernav][/vernavgroup] [/one_third] [two_third]
Horizontal Navigation
[hornavgroup][hornav title=”Section 1″][sidenav][sideitem link=”#”]Link1[/sideitem][sideitem link=”#”]Link2[/sideitem][sideitem link=”#”]Link3[/sideitem][sideitem link=”#”]Link1[/sideitem][/sidenav][/hornav][hornav title=”Section 2″][sidenav][sideitem link=”#”]Link1[/sideitem][sideitem link=”#”]Link2[/sideitem][sideitem link=”#”]Link3[/sideitem][sideitem link=”#”]Link1[/sideitem][/sidenav][/hornav][hornav title=”Section 3″][sidenav][sideitem link=”#”]Link1[/sideitem][sideitem link=”#”]Link2[/sideitem][sideitem link=”#”]Link3[/sideitem][sideitem link=”#”]Link1[/sideitem][/sidenav][/hornav][/hornavgroup]
Tabs Navigation
[tabgroup][tab title=”Section 1″]Content of section 1[/tab][tab title=”Section 2″]Content of section 2[/tab][tab title=”Section 3″]Content of section 3[/tab][/tabgroup] [/two_third] [/row] 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 [/three_fourth]