Others | containers | Framework Y

Tabs

Examples

Home
Profile

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Home
Profile

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Examples tab vertical

Installation

<link rel="stylesheet" href='../../HTWF/css/components.css'>
<script src='../../HTWF/scripts/jquery.tab-accordion.js'></script>

Usage

<div class="tab-box">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
    </ul>
    <div class="panel active">
        ...
    </div>
    <div class="panel">
        ..
    </div>
    <div class="panel">
        ...
    </div>
</div>
<!-- second tab -->
<div class="tab-box inverse">
    <div class="panel active">
        ...
    </div>
    <div class="panel">
        ...
    </div>
    <div class="panel">
        ...
    </div>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
    </ul>
</div>

<div class="tab-box">
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#"><i class="im-home"></i> Home</a></li>
        <li><a href="#"><i class="im-speach-bubble5"></i>  Profile</a></li>
    </ul>
    <div class="panel active">
        ...
    </div>
    <div class="panel">
        ...
    </div>
</div>
<!-- second tab -->
<div class="tab-box">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#"><i class="im-home"></i></a></li>
        <li><a href="#"><i class="im-speach-bubble5"></i></a></li>
    </ul>
    <div class="panel active">
        ...
    </div>
    <div class="panel">
        ...
    </div>
</div>
<!-- third tab -->
<div class="tab-box">
    <ul class="nav nav-tabs nav-center">
        <li class="active" data-anima="slide-right-left" data-trigger="hover">
            <a href="#"><i class="im-home anima"></i> Home</a>
        </li>
        <li>
            <a href="#" data-anima="slide-right-left" data-trigger="hover"><i class="im-speach-bubble5 anima"></i>  Profile</a>
        </li>
    </ul>
    <div class="panel active">
        ...
    </div>
    <div class="panel">
        ...
    </div>
</div>

<div class="tab-box pills" data-tab-anima="slide-top-bottom">
    <ul class="nav nav-pills nav-justified">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
    </ul>
    <div class="panel active">
        ...
    </div>
    <div class="panel">
        ...
    </div>
    <div class="panel">
        ...
    </div>
</div>
<!-- second tab -->
<div class="tab-box pills" data-tab-anima="pulse-horizontal">
    <ul class="nav nav-pills nav-center">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
    </ul>
    <div class="panel active">
        ...
    </div>
    <div class="panel">
        ...
    </div>
    <div class="panel">
        ...
    </div>
</div>

<div class="tab-box left">
    <ul class="nav nav-tabs col-md-4">
        <li class="active"><a href="#home">Home</a></li>
        <li><a href="#profile">Profile</a></li>
        <li><a href="#messages">Messages</a></li>
    </ul>
    <div class="panel-box col-md-8">
        <div class="panel active" id="home">
            ...
        </div>
        <div class="panel" id="profile">
            ...
        </div>
        <div class="panel" id="messages">
            ...
        </div>
    </div>
</div>
<!-- second tab -->
<div class="tab-box right">
    <div class="panel-box col-md-8">
        <div class="panel active">
            ...
        </div>
        <div class="panel">
            ...
        </div>
        <div class="panel">
            ...
        </div>
    </div>
    <ul class="nav nav-tabs col-md-4">
        <li class="active"><a href="#"><i class="im-home"></i> Home</a></li>
        <li><a href="#"><i class="im-speach-bubble5"></i> Profile</a></li>
        <li><a href="#"><i class="im-book"></i> Messages</a></li>
    </ul>
</div>

<div class="tab-box left pills" data-tab-anima="fade-right">
    <ul class="nav nav-pills col-md-4">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
    </ul>
    <div class="panel-box col-md-8">
        <div class="panel active" id="home">
            ...
        </div>
        <div class="panel" id="profile">
            ...
        </div>
        <div class="panel" id="messages">
            ...
        </div>
    </div>
</div>
<!-- second tab -->
<div class="tab-box right pills" data-tab-anima="fade-in">
    <div class="panel-box col-md-8">
        <div class="panel active" id="home">
            ...
        </div>
        <div class="panel" id="profile">
            ...
        </div>
        <div class="panel" id="messages">
            ...
        </div>
    </div>
    <ul class="nav nav-pills col-md-4">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
    </ul>
</div>

Main settings

Name	Type	Description
Justified tabs	CSS class	Add class `nav-justified` to nav-tabs object. Example: `<ul class="nav nav-tabs nav-justified"> ... </ul>`. For vertical tabs add class `nav-justified-v` to nav-tabs object. Example: `<ul class="nav nav-tabs nav-justified-v"> ... </ul>`.
Left tabs	CSS class	Add class `nav-left` to nav-tabs object. Example: `<ul class="nav nav-tabs nav-left"> ... </ul>`.
Centered tabs	CSS class	Add class `nav-center` to nav-tabs object. Example: `<ul class="nav nav-tabs nav-center"> ... </ul>`.
Animations	Data attribute	Add attribute `data-tab-anima="animation-name"` to tab-box code. Example: `<div class="tab-box" data-tab-anima="fade-right"> ... </div>`. Animations list available on animation page
Tab pills	CSS class	Add class `nav-pills` to nav-tabs object. Example: `<ul class="nav nav-pills"> ... </ul>`.
Target tab	Data attribute	Default tabs are auto linked to the correct panel, but you can set manual tab opening in this way: 1 ) Set the `href` of the link of nav-tabs code with ID of panel you want open. Example: `<ul class="nav nav-tabs"><><a href="#ID">Home</a></li></ul>`. 2 ) Set the `ID` of panel. Example: `<div class="panel" id="ID"> ... </div>`. Example: <div class="tab-box"> <ul class="nav nav-tabs"> <li><a href="#home">Home</a></li> </ul> <div class="panel" id="home"> ... </div> </div>
Tab activation	Javascript	You can activate individual tabs in several ways: $('#myTabs > .nav-tabs li:first').click() // Select first tab $('#myTabs > .nav-tabs li:last').click() // Select last tab $('#myTabs > .nav-tabs li:eq(1)').click() // Select second tab (0-indexed) Example classic - open last tab Example classic - open tab two Example classic - open first tab
Nested tabs	Javascript	Nested vertical justified tabs require a Javascript function before show the nested tab: function initTabAccordion() { setTimeout(function () { startTabAccordion(); }, 300); } function startTabAccordion() { $(".tab-box.left,.tab-box.right").each(function () { var t = $(this).find(".nav"); var p = $(this).find(".panel-box"); if ($(p).outerHeight() < $(t).outerHeight()) $(p).find(".panel").css("height", $(t).outerHeight() + "px"); else $(t).css("height", $(p).find(".panel").outerHeight() + "px"); }); $(".nav.nav-justified-v").each(function () { var count_m = $(this).find("li").length; var a = $(this).find("li a"); $(a).css("height", $(this).outerHeight() / count_m + "px"); $(a).css("line-height", $(a).height() + "px") }); }

Scroll box

Examples

Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Installation

<script src='../../HTWF/scripts/jquery.slimscroll.min.js'></script>

Usage

<!-- FIRST SCROLL BOX -->
<div class="col-md-6">
    <div class="scroll-content" data-height="230"> 
    ... 
    </div>
</div>
<!-- SECOND SCROLL BOX -->
<div class="col-md-6 well" style="max-height:350px">
    <div class="scroll-content" data-height=".col-md-6" data-options="alwaysVisible:true, size:7px, color:#337AB7">
    ...
    </div>
</div>

HTML

Main settings

Name Type Description

HTML initialization Data attribute Add class scroll-content to target object and attribute data-height="123", replace 123 with height in px.

Height

Data attribute

Scroll box's settings are many, the most important is data-height, it's used for set the height of scroll box:

Data attribute	Description
`data-height='auto'` or not inserted	Default value, auto calculate the max height based on: screen height - (footer height + menu height). Add attribute `data-height-remove='123'` to set: screen height - data-height-remove, value in px. If for example screen height is 1080px and data-height-remove='100', scroll box height will be 980px.
`data-height='123'`	Set the height of scrollbox. Replace 123 with height in px.
`data-height='.class'`	Target class of a parent container, will be used container height.
`data-height='#ID'`	Target ID of a parent container, will be used container height.
`data-height='fullscreen'`	Will be used screen full height.
`data-height-remove='123'`	Adjust the height when it's setted to ID or class or full width, this feature remove desired height from original height.

Mobile disabled CSS class To disable the scroll box only on mobile devies and show all content vertically add class scroll-mobile-disabled to scroll-box object. Example: <div class="scroll-content scroll-mobile-disabled"> ... </div>.

Settings Data attribute Most of settings can be passed through data-options attribute: data-options="option-1:value,option-2:value, ...". Example: <div class="scroll-content" data-height=".col-md-6" data-options="alwaysVisible:true, size:7px, color:#337AB7">. Full options here

Complete documentation and external resources

Documentation Plugin website Github page

Collapse

Examples

Lorem ipsum dolor sitamet consectetur adipisicing elito d 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem

Lorem ipsum dolor sitamet consectetur adipisicing elito 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem. L'orem ipsum dolor "sitamet", 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem

Show all

Installation

<link rel="stylesheet" href="../../HTWF/css/components.css">
<script src='../../HTWF/scripts/jquery.tab-accordion.js'></script>

Usage

<div class="collapse-box">
    <button class="collapse-button btn btn-sm btn-sm dropdown-toggle" type="button">
        Open panel - example A <span class="caret"></span>
    </button>
    <div class="panel">
        <div class="well">
            ...
        </div>
    </div>
</div>

<div class="collapse-box">
    <div class="panel">
        <div class="well">
           ...
        </div>
    </div>
    <button class="collapse-button btn btn-sm btn-sm dropdown-toggle" type="button">
        Open panel - example B <span class="caret"></span>
    </button>
</div>

<div class="collapse-box">
    <div class="panel">
        <div class="well">
            ...
        </div>
    </div>
    <button class="collapse-button btn btn-sm btn-sm dropdown-toggle" type="button" data-time="3000" data-height="50">
        Open panel - example C <span class="caret"></span>
    </button>
</div>

<div class="collapse-box" data-height="50">
    <div class="panel">
        ...
    </div>
    <div class="text-center;">
        <a class="collapse-button" data-button-open-text="Hide all" data-button-close-text="Show all">
            <b>Show all</b> <span class="caret"></span>
        </a>
    </div>
</div>

Main settings

Name Type Description

HTML settings

Data attribute

Collapse settings are 2, data-time and data-height of collapse panel height and open height. Example: <button class="collapse-button dropdown-toggle" type="button" data-time="3000" data-height="50">Open</button>.

Data attribute	Description
data-time	Number of milliseconds for open animation `data-time='1000'`
data-height (for opened height)	Set the height in px of collapse when it's opened, must be placed on collapse button code `data-height='50'`
data-height (for collapse panel height)	Set the height in px of collapse panel, must be placed on collapse panel object `<div class="collapse-box" data-height="50">`

Javascript initialization

Javascript

Collapse a panel with function $('#collapse-id .panel').collapse(). Function allow 2 settings, time and height. Example: $('#collapse-id .panel').collapse({ height: 150, time: 1500 }).

Demo A Demo B Demo C Demo D

Accordion

Examples

Accordion item 1

Accordion item 2

L'orem ipsum dolor "sitamet", Cras justo odio 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem. L'orem ipsum dolor "sitamet", Cras justo odio 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem

Accordion item 3

Accordion item 1

Accordion item 2

Accordion item 3

Accordion item 1

Accordion item 2

Accordion item 3

Installation

<link rel="stylesheet" href="../../HTWF/css/components.css">
<script src='../../HTWF/scripts/jquery.tab-accordion.js'></script>

Usage

<div class="list-group accordion-list">
    <div class="list-group-item">
        <a href="#"> Accordion item 1</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
    <div class="list-group-item">
        <a href="#"> Accordion item 2</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
    <div class="list-group-item">
        <a href="#"> Accordion item 3</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
</div>

<div class="list-group accordion-list" data-type="accordion" data-time="1000">
    <div class="list-group-item">
        <a href="#"> Accordion item 1</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
    <div class="list-group-item">
        <a href="#"> Accordion item 2</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
    <div class="list-group-item">
        <a href="#"> Accordion item 3</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
</div>

<div class="list-group accordion-list" data-type="visible">
    <div class="list-group-item">
        <a href="#"> Accordion item 1</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
    <div class="list-group-item">
        <a href="#"> Accordion item 2</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
    <div class="list-group-item">
        <a href="#"> Accordion item 3</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
</div>

Main settings

Name Type Description

HTML settings

Data attribute

Accordion settings are 2, data-time and data-type. Example: <div class="list-group accordion-list" data-time="3000" data-type="visible">...</div>.

Data attribute	Default	Description
data-time	500	Number of milliseconds for open and close animations. `data-time='1000'`
data-type	--	Set the accordion type, value accepted are `accordion` and `visible`. Example: `data-type='accordion'`.
data-open	--	Open the select tab automatically on page load. Insert a number from 0 to. Example: `data-open='1'`.

Steps

Examples

Register

Illo mus beataeus, dispernatu uerto caldaia mortillos.llam donec rem posuere tempora eveniet nibh perspiciatis cupidatat error per parturient justo.

Login

Illo mus beataeus, dispernatu uerto caldaia mortillos.llam donec rem posuere tempora eveniet nibh perspiciatis cupidatat error per parturient.

Profile

Illo mus beataeus, dispernatu uerto caldaia mortillos.llam donec rem posuere tempora eveniet nibh perspiciatis cupidatat error per parturient justo.

Usage

<div class="row box-steps">
    <div class="step-item col-md-4">
        <span class="step-number">1</span>
        <h3>...</h3>
        <p>
            ...
        </p>
    </div>
    <div class="step-item col-md-4">
        <span class="step-number">2</span>
        <h3>...</h3>
        <p>
            ...
        </p>
    </div>
    <div class="step-item col-md-4">
        <span class="step-number">3</span>
        <h3>...</h3>
        <p>
            ...
        </p>
    </div>
</div>

Containers

Tabs

Examples

Examples tab vertical

Installation

Usage

Main settings

Scroll box

Examples

Installation

Usage

Main settings

Complete documentation and external resources

Collapse

Examples

Installation

Usage

Main settings

Accordion

Examples

Installation

Usage

Main settings

Steps

Examples

Register

Login

Profile

Usage

Resources

WordPress

Main components

Components

Components

Titles

Headers

Footer

Containers

Sections

Page templates

Containers

Tabs

Examples

Examples tab vertical

Installation

Usage

Main settings

Scroll box

Examples

Installation

Usage

Main settings

Complete documentation and external resources

Collapse

Examples

Installation

Usage

Main settings

Accordion

Examples

Installation

Usage

Main settings

Steps

Examples

Register

Login

Profile

Usage