1

I have sharepoint online and I am trying to create a script that takes webparts on a page and puts them into tabs. The solution doesn't need to be dynamic. I asked another question on this, and got a good start, but I am confused on why it isn't working/ where to go from here. My current code is as follows:

        <!---->
        <meta charset="UTF-8">
            <link rel="stylesheet" type="text/css" href="https://x.sharepoint.com/sites/project_sb3/SiteAssets/dev_jqueryui/themes/default/easyui.css">
            <script type="text/javascript" src="https://x.sharepoint.com/sites/project_sb3/SiteAssets/dev_jqueryui/jquery.min.js"></script>
            <script type="text/javascript" src="https://x.sharepoint.com/sites/project_sb3/SiteAssets/dev_jqueryui/jquery.easyui.min.js"></script>

            <script>
            //IDs of webparts to add
            var tabs = ['<id MSOZoneCell_WebPartWPQ12>', '<id MSOZoneCell_WebPartWPQ13>'];

            ExecuteOrDelayUntilScriptLoaded(initTabs, "sp.js");

            func initTabs(){
                //hide all of the webparts
                for(var i=0;i<tabs.length;i++){
                $('#' + tabs[i]).hide();
                }

                //show the first webpart in tab 1

            }

            //show the webpart of the clicked tab
            function clickTab(id){
                for(var i=0;i<tabs.length;i++){
                    if(tabs[i] === id){
                         $('#' + id).show(); 
                    }else{
                         $('#' + tabs[i]).hide();
                    }
                }
            }
            </script>

            <div class="easyui-tabs" style="width:1200px;height:1000px">
                <div title="Project Documents" style="padding:10px" onclick="clickTab('<id MSOZoneCell_WebPartWPQ12>')">

                </div>

                <div title="Project Updates" style="padding:10px" onclick="clickTab('<id MSOZoneCell_WebPartWPQ13>')">

                </div>
            </div>
        <!---->

As I understand it, the above code should hide the two webparts in the 'Tabs' array, then when it loads it shows the first webpart. When a tab is clicked, the other tab's webpart is hidden and the new one should be shown.

This code is not working, and I am wondering if it is because I am not moving the webparts. I hide/show them but I don't add them as children to the tab's zones. If that is the fix, I'm not quite sure how to go about it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.