{"id":5917,"date":"2015-08-03T12:15:09","date_gmt":"2015-08-03T09:15:09","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=5917"},"modified":"2017-12-21T16:44:22","modified_gmt":"2017-12-21T14:44:22","slug":"jquery-tabs-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tabs-example\/","title":{"rendered":"jQuery Tabs example"},"content":{"rendered":"

[three_fourth]In a recent post<\/a>, we showed the Dialog component example from jQuery ui library and how it’s simple to integrate and use it in a web application.
\nIn this example, we will see another component from the same perfect library, it’s jQuery ui Tabs<\/a>.
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

Tabs! What is it?<\/h3>\n

Yes, like the browser tabs, we can integrate this feature in a web application using HTML, javascript and css code, we can find all needs in one library: jQuery ui<\/a>.<\/p>\n

A single content area with multiple panels, each associated with a header in a list.
\nhttps:\/\/jqueryui.com\/tabs\/<\/a><\/p><\/blockquote>\n

When and where<\/h3>\n

Assume you have an E-commerce website and you need to present your product details but you will not taking all the webpage area to do this job. So! Displaying your product details into tabs over a limited area is a very good idea. You can add a tab for general info, a tab for images, a tab for long description etc.<\/p>\n

\"Tabs<\/a>
Tabs example<\/figcaption><\/figure>\n

1. Basic tabs example<\/h2>\n

We will use:<\/p>\n