v11 Facelift(FL)

Custom Tab

Tabslet a jQuery plugin for tabs

PLUGIN 다운로드 사이트 바로가기

박스명

Tab 1
Tab 2
Tab 3

탭내용1

탭내용2

탭내용3

가로형(Foundation Tab)

박스명

Tab 1
Tab 2
Tab 3

탭내용1

탭내용2

탭내용3

세로형(Foundation Tab)

박스명

Tab 1
Tab 2
Tab 3

탭내용1

탭내용2

탭내용3

<div class="row collapse">
	<div class="medium-3 columns">
	<ul class="tabs vertical" id="example-vert-tabs" data-tabs>
		<li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
		<li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
		<li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
	</ul>
	</div>
	<div class="medium-9 columns">
        <div class="tabs-content vertical" data-tabs-content="example-vert-tabs">
            <div class="tabs-panel is-active" id="panel1v">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div class="tabs-panel" id="panel2v">
            <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
            </div>
            <div class="tabs-panel" id="panel3v">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
	</div>
</div>