Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

tabs sheethalf conflict?

1550111335

Edited 1550112829
I am trying to add tabs to a sheet divided into two halves by having first tab include both sheethalfs and at the end of the sheet itself, like this, but it breaks. Any help would be appreciated. &lt;div class="sheet-section-basic sheet-section"&gt; &lt;img class="sheet-logo" src=" <a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/conan-2d20/Conan2d20.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/conan-2d20/Conan2d20.png</a> " alt="Conan 2d20" /&gt; &lt;!-- Tab links --&gt; &lt;div class="tab1"&gt; &nbsp; &lt;button class="tablinks" onclick="openTab1(event, 'PC')"&gt;PC&lt;/button&gt; &nbsp; &lt;button class="tablinks" onclick="openTab2(event, 'NPC')"&gt;NPC&lt;/button&gt; &lt;/div&gt; &lt;!-- Tab content --&gt; &lt;div id="Tab1" class="tabcontent"&gt; &lt;div class="sheet-break"&gt;&lt;/div&gt; &lt;div class="sheet-section-skills sheet-section sheet-half"&gt; _______ End of sheet is this: &nbsp;&nbsp;&nbsp; &lt;div class="sheet-break"&gt;&lt;/div&gt; &lt;div id="Tab2" class="tabcontent"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="sheet-header"&gt;NPC / Summoned Creatures&lt;/div&gt; ... Any ideas? edit: i didn't put it in the css too.&nbsp; How would that work/look like?
1550148448
Finderski
Pro
Sheet Author
Compendium Curator
You'll need to use HTML and CSS for the tabs. &nbsp;The CSS Wizardy wiki has more information on ways to make tabs look better, but a very basic, functional model would be... HTML: &lt;div class="sheet-main"&gt; &lt;input type='radio' class='sheet-tab sheet-tab1' name='attr_sheetTab' value='1' checked /&gt;Tab 1 &lt;input type='radio' class='sheet-tab sheet-tab2' name="attr_sheetTab" value='2' /&gt; Tab 2 &lt;div class="sheet-tab1"&gt; &lt;!-- tab stuff goes here --&gt; &lt;/div&gt; &lt;div class="sheet-tab2"&gt; &lt;!-- tab stuff goes here --&gt; &lt;/div&gt; &lt;/div&gt; CSS: .sheet-tab1, .sheet-tab2 { display: none; } .sheet-tab1:checked ~ .sheet-tab1 { display: block; } .sheet-tab2:checked ~ .sheet-tab2 { display: block; }