The solution starter code has been published for download but it will need updating to work on your PWA configuration but it is very simple and this blog post covers the changes needed. The download will just save a lot of typing and includes the full source code. The solution starter code can be downloaded from the Microsoft Gallery using the link here: https://gallery.technet.microsoft.com/Online-Server-PDP-tabs-c8012555
Once downloaded, open the file to edit in your chosen editor (notepad will do if you have nothing else, I use Visual Studio Code or Notepad++). This solution starter is set to work with two web parts, the web parts seen below in my Project Online DEV instance.
In this post we will walkthrough adding in a 3rd web part to the script as that will provide the steps needed to get the correct web part references to update the script:
Firstly we need the web part div ID, to do this, when on the Project Detail Page in PWA press F12 and this will load the browser dev tools:
Using the element selector:
Select the web part, one at a time like below and click:
The DOM Explorer will then update and show you the web part div. You need to copy the div id as outlined in red below:
Repeat this for all the web parts on that page with you wish to move to use tabs then the browser dev tools can be closed.
Save the file and upload to a library in the PWA Site, for example mine is uploaded to the Shared Documents library. Then add a Content Editor Web Part to the target Project Detail Page in PWA at the top of the page and edit that new web part:
Fully test on a DEV / TEST PWA instance first before using in Production. The script is provided "As is" with no warranties etc.