How to add tabs inside jquery dialog

In this tutorial I will show you that how can we how can we add tabs inside jquery dialog.

Bellow is demo html

<div id="myDialog">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab 1</a></li>
        <li><a href="#tabs-2">tab 2</a></li>
        <li><a href="#tabs-3">tab 3</a></li>
    </ul>
    
    <div id="tabs-1">
        test 1
    </div>
    
    <div id="tabs-2">
        test 2
    </div>
    
    <div id="tabs-3">
        test 3
    </div>
    
</div>
</div>

Bellow is javascript

$(function() {
    $("#tabs").tabs();
    $("#myDialog").dialog();
});

See This Demo for its working

admin

  • dhonet

    hi shah,
    how to make this for content pages but for horizontal hidden content for three columns.