Question

I have implemented the jquery-ui default tabs and my client has come back to me requesting that upon initially landing on the page that a home page message exist which is separate from the tabs themselves. So to illustrate…I have five tabs with five correspond div’s with associated content. Need to add another div of content that would be displayed at initialization and then once a tab was selected it would disappear and not be accessible. The li elements all require a corresponding div to work with and if I try setting the extra li to display:none, the jquery initialization removes it…is there a simple solution to this or am I going to have to write custom code for this?

 $(document).ready(function () {
            $(".tabs").tabs({ event: "mouseover", fx: { opacity: 'toggle', duration: 'fast' }
            });
        });

Added

 $(document).ready(function(){
        $("#blank").remove();});

html

    <div class="tabs">
<ul>
      <li id="blank" class="tabsm"><a href="#keytab-x" style="display: none"></a></li>
      <li class="tabsm"><a href="#keytab-1"tab1</a></li>
      <li class="tabsm"><a href="#keytab-2">tab2t</a></li>
      <li class="tabsm"><a href="#keytab-3">tab3</a></li>
      <li class="tabsm"><a href="#keytab-4">tab4</a></li>
      <li class="tabsm"><a href="#keytab-5">tab5</a></li>
</ul>}
 <div id="keytab-x">
                    <h2>
                        this is the default</h2>
                    <p>
                        </p>
                </div>
    <div id="keytab-1">
                    <h2>
                        this is tab 1</h2>
                    <p>
                        </p>
                </div>
    <div id="keytab-2">
                    <h2>
                        this is the tab 2</h2>
                    <p>
                        </p>
                </div>
    <div id="keytab-3">
                    <h2>
                        this is the tab 3</h2>
                    <p>
                        </p>
                </div>
</div>
etc..

Answer 1

OK,

as mentioned use a remove:

$('#tabs').tabs('remove', 2);

or position a layer over your tabs, that is removed/hidden in the DOM after x amount of time or when the tabs are interacted with.

I did this once for an advertising block that would overlay the tabs.

You can have your structure like:

<div id="tabs">
    <ul>
        <li>
            <a href='#tabs1">tab 1</a>
        </li>
         <li>
            <a href='#tabs2">tab 2</a>
        </li>
    </ul>
    <div id="tabs1"> my tab1 content</div>
    <div id="tabs2"> my tab2 content </div>
    <div id="myOverlay"> my overlay content </div>
</div> <!-- end tabs -->

With how jQuery UI tabs work, only the divs that have an id that match the hash in the ul will be considered part of the “tabs” – any other divs render as normal divs. So with some css to position the overlay absolutely and some jquery to handle hiding it (when I did it, I used a slidedown), you’ll be all set.