JQuery Show All Tab - Issue with on click

Question

I've been looking through other questions and trying out the solutions but haven't figured out one that works so I thought I'd try and get specific help.

When you click any tab, they show all the contents of the tab but in reverse order and with some code in-between the web parts. I am also not sure how to a. get it so the code doesn't show on the web page and b. go back to only showing the one tab if you select a different tab.

code that appears on page:

javascript:commonShowModalDialog('{SiteUrl}/_layouts/itemexpiration.aspx?ID={ItemId}&List={ListId}', 'center:1;dialogHeight:500px;dialogWidth:500px;resizable:yes;status:no;location:no;menubar:no;help:no', function GotoPageAfterClose(pageid){if(pageid == 'hold') {STSNavigate(unescape(decodeURI('{SiteUrl}'))+'/_layouts/hold.aspx?ID={ItemId}&List={ListId}'); return false;} if(pageid == 'config') {STSNavigate(unescape(decodeURI('{SiteUrl}'))+'/_layouts/expirationconfig.aspx?ID={ItemId}&List={ListId}'); return false;}}, null); return false;
0x0
0x1
ContentType
0x01
898

JavaScript code

<script type="text/javascript">
     jQuery(document).ready(function($) {

         $(".s4-wpcell").hide();
         $(".s4-wpcell-plain").hide();


         //Put the Web Part Title for all the Web Parts you wish
         //to put into the tabbed view into the array below.
        setTimeout(function() {
            HillbillyTabs(["Projects;#Projects","Notes;#Notes","Did You Know?;#Did You Know?"]);
        }, 800);

     $('#tabsContainer').click('tabsselect', function (event, ui) {
        var selectedTab = $("#tabsContainer").tabs('option', 'active');
        if(selectedTab = 3){
            $('div#tabsContainer div').show()
       } else{
        //not sure what to add here
    });

});

    function HillbillyTabs(webPartTitles)
    {

        if(webPartTitles == undefined)
        {
            var CEWPID = "";
            $("#tabsContainer").closest("div [id^='MSOZoneCell_WebPart']").find("span[id^='WebPartCaptionWPQ']").each(function()
            {
                CEWPID = $(this).attr("id");
            });

            var index = 0;
            $("span[id^='WebPartCaptionWPQ']").each(function()
            {
                if($(this).attr("id") != CEWPID)
                {
                    var title = $(this).prev("span").text();

                    $("#HillbillyTabs").append('<li><a href="#Tab'+index+'" id="TabHead'+index+'" onclick="HillbillyTabClick(this.id);">'+
                        title+'</a></li>').after('<div id="Tab'+index+'"></div>');

                    var webPart = $(this).prev("span").hide().closest("span").closest("[id^='MSOZoneCell_WebPart']");

                    $("#Tab" + index).append((webPart));
                    index++;
                }
            });
        } else {
        for(index in webPartTitles)
            {
                var title = webPartTitles[index];
                var tabContent = title.split(";#");
                if (tabContent.length > 1)
                {
                    $("#HillbillyTabs").append('<li><a href="#Tab'+index+'" id="TabHead'+index+'" onclick="HillbillyTabClick(this.id);">'+
                        tabContent[0]+'</a></li>').after('<div id="Tab'+index+'"></div>');

                    for(i = 1; i < tabContent.length; i++)
                    {
                        $("span[id^='WebPartCaptionWPQ']").each(function()
                        {
                            $(this).prev("span:contains('"+tabContent[i]+"')").each(function()
                            {
                                 if ($(this).text() == tabContent[i]){

                                    var webPart = $(this).closest("span").closest("[id^='MSOZoneCell_WebPart']").parent();

                                    $("#Tab" + index).append((webPart));
                                 }

                            });
                        });
                    }
                }
                else
                {
                    $("span[id^='WebPartCaptionWPQ']").each(function()
                    {
                        $(this).prev("span:contains('"+title+"')").each(function()
                        {
                             if ($(this).text() == title){
                                $("#HillbillyTabs").append('<li><a href="#Tab'+index+'" id="TabHead'+index+'" onclick="HillbillyTabClick(this.id);">'+
                                    title+'</a></li>').after('<div id="Tab'+index+'"></div>');

                                var webPart = $(this).hide().closest("span").closest("[id^='MSOZoneCell_WebPart']");

                                $("#Tab" + index).append((webPart));
                             }

                        });
                    });
                }
            }
        }

         //code to add it show all tab
        index++;
        var title = "Expand All";

        $("#HillbillyTabs").append('<li><a href="#Tab'+index+'" id="TabHead'+index+'" oonclick="HillbillyTabClick(this.id);">'+
        title+'</a></li>').after('<div id="Tab'+index+'"></div>');

        var webPart = $(this).prev("span").hide().closest("span").closest("[id^='MSOZoneCell_WebPart']");

        $("#Tab" + index).append((webPart));


        $("#tabsContainer").tabs();
        $(".s4-wpcell").show();
        $(".s4-wpcell-plain").show();


   }

    function SetCookie(id)
    {
           var date = new Date();
           //make the cookie expire in 5 minutes
           date.setTime(date.getTime()+(300*1000));
           var expires = "; expires="+date.toGMTString();
           document.cookie = "ActiveTab="+id+expires+"; path=/";
    }

    function ShowActiveTab()
    {
        var name = "ActiveTab";
        var cookieArray = document.cookie.split(";");
        for (index in cookieArray)
        {
            var keyValuePair = cookieArray[index].split("=");
            var key = keyValuePair[0];
            key  = key.replace(/^\s+|\s+$/g, "");
            if (key == name)
            {
                var value = keyValuePair[1];
                $("#" + value).click();
                return;
            }
        }
    }

</script>
<div id="tabsContainer"><ul id="HillbillyTabs"></ul></div>

This is the code I am attempting to use to create the on click function of the show all tab. It shows all the contents but on the loading of the page but when I click the tab

 $('#tabsContainer').click('tabsselect', function (event, ui) {
    var selectedTab = $("#tabsContainer").tabs('option', 'active');
    if(selectedTab = 3){
        $('div#tabsContainer div').show()
   } else{
    //not sure what to add here
});

Thanks for taking the time, let me know if you need anymore information

Answer 1

I'm having trouble understanding enough of your question to provide too much help. Perhaps putting together a jsfiddle we could see would be helpful.

As far as the code displaying on the page, it's either coming from your javascript, a javascript library you're using, or its just on the page somewhere as text in the HTML. First I would do a search on your project files to find it. That ought to do it. If not, try excluding javascript libraries you're using to see if it disappears. That will point to the problem.

Regardless, I think we need more info or a jsfiddle demo to see.