Wednesday, 19 February 2014

Filled Under:
, , ,

how to create tabs dynamic example in html

                  in this post to you provide how to create dynamic tab menu using jQuery. standards compliant with menu tabs and sub contents are defined using HTML.and contents of this menu are search engine friendly. here you should set one tab default when the page is loads. if your default tab contains a sub content, that content will be show. here follow some steps to create dynamic tab menu and use it where were you wish.

first create one index.html file and include below two .js file and one .css file.

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

Than put below jQuery code in <head> tag.

<script language="javascript">
$(document).ready(function() {
    var tabs = $("#container-1").tabs();
    var tabCounter = 1;

    $('#add_tab').click( function(){
        var ul = tabs.find( "ul" );
        var current_idx = ul.find("li").length + 1;
        $("<li><a href='#fragment-" + current_idx + "'>Menu</a></li>" ).appendTo( ul );
        tabs.append("<div id='fragment-" + current_idx + "'>Content of Added Menu" + current_idx + "</div>");
        tabs.tabs("select", 1);

After follow abow step write few line html code look like this.

<div id="container-1">
        <li><a href="#fragment-1">Menu 1</a></li>
        <li><a href="#fragment-2">Menu 2</a></li>
        <li><a href="#fragment-3">Menu 3</a></li>
    <div id="fragment-1">Content of First Menu by</div>
    <div id="fragment-2">Content of Second Menu by</div>
    <div id="fragment-3">Content of Third Menu by</div>
        <button id="add_tab">Add Tab</button>

             now you can add new tab easily by clicking "Add Tab" button and enjoy. you can see live demo or free download complate example by clicking download button.

            if you have any query or problem in PHP or PHP framework like Codeigniter, WordPress, Magento than you can freely contact on this email :


  1. Greetings. I know this is somewhat off-topic, but I was wondering if you knew where I could get a captcha plugin for my comment form? I’m using the same blog platform like yours, and I’m having difficulty finding one? Thanks a lot.

    AWS Training in Bangalore | Amazon Web Services Training in Bangalore

    Amazon Web Services Training in Pune | Best AWS Training in Pune

    AWS Online Training | Online AWS Certification Course - Gangboard