StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>create tab with <code>active: 0</code> (assuming index of <code>search</code> tab is 0 that is it is the first tab) on click event of tab heading of <code>details</code> create tab again with <code>active: 0</code> on search validation <code>unbind</code> <code>click</code> event from <code>details tab</code> and trigger <code>click</code> on <code>a</code> tag inside the heading <code>li</code> of <code>details</code> tab once <code>details tab</code> is opened again bind it's click event to create <code>tabs</code> with <code>active: 0</code></p> <pre><code><div id="tabs"> <ul> <li><a href="#tabs-1">Search</a></li> <li id="deactive"><a href="#tabs-2">Details</a></li> //add id deactive </ul> <div id="tabs-1"> <input id="search" type="text" /> <button>Search</button> </div> <div id="tabs-2"></div> </div> </code></pre> <p><strong>script</strong></p> <pre><code>$("#tabs").tabs({ active: 0 }); $('#deactive').click(function () { $('#tabs').tabs({ active: 0 //refer to api documentation of jquery ui-tabs }) }) $('button').click(function () { var value = $('#search').val().toLowerCase() if (value == " your comparison/validation criteria ") { $('#deactive').unbind('click') $('#deactive >a').trigger('click') $('#deactive').click(function () { $('#tabs').tabs({ active: 0 //refer to api documentation of jquery ui-tabs }) }) } }) </code></pre> <p><a href="http://jsfiddle.net/PAm5t/" rel="nofollow"><strong>CLICK HERE FOR DEMO</strong></a></p> <p><a href="http://jsfiddle.net/UD_B/PAm5t/2/" rel="nofollow"><strong>DEMO FOR POPULATING DETAILS TAB ON THE BASIS OF SEARCH</strong></a></p> <p><strong>NOTE</strong> that this will keep the <code>DETAILS TAB</code> disabled all time, if you don't want this behavior you have to tailor the code as per your requirement</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload