There's no such thing as a functioning Roll20 tabs example

I'm making a character sheet from scratch.  It's going to have too much information to fit on the screen all at once.  I've tried at least two dozen examples of tabs, from the official Roll20 how to pages, to the forums, to w3schools.  None of them work.  Not one.  If anyone would like to prove me wrong, I'd certainly appreciate it. The only thing I haven't done is to cannibalize a working example form an existing character sheet.  Those have 20,000 lines.  I don't have time to sift through those, especially when I don't know what I'm looking for.  I've tried though.  Below is the simplest example I've found.  It also doesn't work, likely because it was written for the web, not for Roll20.  Any working example would do though.  If I can just get one to function, I can tweak it until it looks the way I want. <div class="w3-container">   <h2>Tabs</h2>   <p>Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects. Click on the links below.</p> </div> <div class="w3-bar w3-black">   <button class="w3-bar-item w3-button" onclick="openCity('London')">London</button>   <button class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>   <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button> </div> <div id="London" class="w3-container city">   <h2>London</h2>   <p>London is the capital city of England.</p> </div> <div id="Paris" class="w3-container city" style="display:none">   <h2>Paris</h2>   <p>Paris is the capital of France.</p>  </div> <div id="Tokyo" class="w3-container city" style="display:none">   <h2>Tokyo</h2>   <p>Tokyo is the capital of Japan.</p> </div> <script> function openCity(cityName) {   var i;   var x = document.getElementsByClassName("city");   for (i = 0; i < x.length; i++) {     x[i].style.display = "none";     }   document.getElementById(cityName).style.display = "block";   } </script>

You cant use&nbsp;onclick or any javascript that targets the DOM on roll20. Nor can you use ids, you must use classes. The only way you can do tabs on roll20 is via changing attributes (using inputs or action buttons), and CSS to hide or show parts of the page based on that attribute value. Have you checked out the CSS Wizardry wiki page? The technique is fully described there, with a working example.&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Tabs" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Tabs</a>

Take a look at the Basic Fantasy RPG Expanded sheet . The HTML is under 3000 lines (including the sheet workers). The CSS is under 3000 lines also. The actual HTML starts at line 740 (everything before that is sheetworker code). The tabs on the HTML starts around line 755 while on the CSS it starts&nbsp; around line 270. The actual code is pretty straight forward and simple when compared to some of the other sheets.

GiGs said: Have you checked out the CSS Wizardry wiki page? The technique is fully described there, with a working example.&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Tabs" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Tabs</a> This section displays the better example first, but underneath there is also a collapsed section that shows the older example that requires no JavaScript/sheetworkers.

I feel like I should be embarrassed by this, but I'm really not.&nbsp; Curious. So I woke up this morning and read all your posts.&nbsp; Thank you so much for taking the time to post responses.&nbsp; I very much appreciate it.&nbsp; I had tried the&nbsp; CSS Wizardry wiki page.&nbsp; I hadn't found the&nbsp; Basic Fantasy RPG Expanded sheet &nbsp;though.&nbsp; Then I had an idea.&nbsp; Yesterday I'd discovered that automatic calculations don't work in the preview window, but do work in a game.&nbsp; So I copied and pasted in the CSS Wizardry wiki page example again, but this time, instead of testing it in the preview window, I loaded the game, and sure enough, it works. &lt;face palm emoji&gt; Thanks again for taking time to answer my question = ).

Timothy Z. said: Yesterday I'd discovered that automatic calculations don't work in the preview window, but do work in a game.&nbsp;&nbsp; I've been making heavy use of the new&nbsp; Custom Sheet Sandbox &nbsp;available with a Pro subscription. It's far better for previewing a sheet you're authoring.

Timothy Z. said: Yesterday I'd discovered that automatic calculations don't work in the preview window, but do work in a game. This is pointed out in the Building Character Sheets . Today I've updated the page, along with several others, so you should definitively give it a new read, and check out the new links. It's the first page one should consult when it comes to character sheet creation, as it leads to all the other relevant pages &amp; info. Primal Zed said: I've been making heavy use of the new&nbsp; Custom Sheet Sandbox &nbsp;available with a Pro subscription. It's far better for previewing a sheet you're authoring. Yes, This is the better idea.

Thank you for the Custom Sheet Sandbox suggestion.&nbsp; This should save me a lot of time = ).