JQuery

How to Create JQuery UI Tabs

JQuery UI tabs
Written by Deepak Raj

Jquery UI tabs are sets of logically grouped content that allow us to quickly flip betweenh them. Tabs have became one of the most used UI components in web design. Tabs are generally used to break content into multiple sections that can be swapped to save space. Tabs allow us to save space like accordions. Different implemention of HTML tabs are available and Jquery UI one of the simplest one. For adding Jquery tabs in your HTML page First you have to make sure that you include the theme css file and include the Jquery UI file. if css is not set properly JQuery Tabs will not be rendered properly. JQuery UI provide us tabs ( )  method drastically changes the appearance  of HTML elements inside the page.

How to Create JQuery UI Tabs

1 – Adding Jquery and CSS Library File

After Download the JQuery UI Theme include the given source code in Between Head Tag. If you are not download the JQuery UI first Download it. Click Here To Download Jquery UI.

<link  rel="stylesheet"  href="css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>

2 – Creating Tabs

Tabs must be in a list either ordered list <ol> OR unordered list <ul>. Each tab title must be within each <li> and wrapped by anchor <a> tag with an href attributes.

<ul>
<li><a href="#tabs-6">HTML</a></li>
<li><a href="#tabs-7">CSS</a></li>
<li><a href="#tabs-8">Java Script</a></li>
</ul>

3 – Adding Content in every Tab

After creating tabs we add content every tabs.

<div id="tabs-5">
<ul>
<li><a href="#tabs-6">HTML</a></li>
<li><a href="#tabs-7">CSS</a></li>
<li><a href="#tabs-8">Java Script</a></li>
</ul>
<div id="tabs-6">
<p>HTML  -Hyper Text Markup Language SGML -Standard Generalized Markup Language XML -eXtensible Markup Language HTML Editors- Notepad Wordpad TextEdit gedit Blue Fish Notepad++ Aptana Eclipse Vi / Emacs Net Beans Adobe Muse Amaya Adobe GoLive (Replacd by  Adobe Dreamweaver) Adobe Dreamweaver Microsoft Front…HTML  -Hyper Text Markup Language SGML -Standard Generalized Markup Language XML -eXtensible Markup Language HTML Editors- Notepad Wordpad TextEdit gedit Blue Fish Notepad++ Aptana Eclipse Vi / Emacs Net Beans Adobe Muse Amaya Adobe GoLive (Replacd by  Adobe Dreamweaver) Adobe Dreamweaver Microsoft Front…HTML  -Hyper Text Markup Language SGML -Standard Generalized Markup Language XML -eXtensible Markup Language HTML Editors- Notepad Wordpad TextEdit gedit Blue Fish Notepad++ Aptana Eclipse Vi / Emacs Net Beans Adobe Muse Amaya Adobe GoLive (Replacd by  Adobe Dreamweaver) Adobe Dreamweaver Microsoft Front… </p>
</div>
<div id="tabs-7">
<p>HTML  -Hyper Text Markup Language SGML -Standard Generalized Markup Language XML -eXtensible Markup Language HTML Editors- Notepad Wordpad TextEdit gedit Blue Fish Notepad++ Aptana Eclipse Vi / Emacs Net Beans Adobe Muse Amaya Adobe GoLive (Replacd by  Adobe Dreamweaver) Adobe Dreamweaver Microsoft Front…ion
ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div id="tabs-8">
<p>HTML  -Hyper Text Markup Language SGML -Standard Generalized Markup Language XML -eXtensible Markup Language HTML Editors- Notepad Wordpad TextEdit gedit Blue Fish Notepad++ Aptana Eclipse Vi / Emacs Net Beans Adobe Muse Amaya Adobe GoLive (Replacd by  Adobe Dreamweaver) Adobe Dreamweaver Microsoft Front…. </p>
<p>HTML  -Hyper Text Markup Language SGML -Standard Generalized Markup Language XML -eXtensible Markup Language HTML Editors- Notepad Wordpad TextEdit gedit Blue Fish Notepad++ Aptana Eclipse Vi / Emacs Net Beans Adobe Muse Amaya Adobe GoLive (Replacd by  Adobe Dreamweaver) Adobe Dreamweaver Microsoft Front… </p>
</div>

4 – Styling the Tabs

Make attractive using CSS.

<style>
#tabs-5{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>

5 -Initialize The tabs using JQuery

Next we need to initialize the tabs using JQuery.

<script>
$(function() {
$( "#tabs-5" ).tabs({
heightStyle:"fill",
collapsible:true,
hide:"slideUp"
});
JQueryUI
256
});
</script>

If you facing any type of problem with this source code then you can Download the Complete source code in zip Formate by clicking the below button Download Now otherwise you can send Comment.

About the author

Deepak Raj

Hi, This is Deepak Raj from Sourcecodessite.com.I am a Web Developer, Blogger, Online Instructor and SEO consultant who has been working online for last 4 years and he is running several successful websites on the internet.

Leave a Comment