FANDOM


 
Line 1: Line 1:
 
*<code>.tabbernav</code> - The list of tabs users can click to change which content is displayed.
 
*<code>.tabbernav</code> - The list of tabs users can click to change which content is displayed.
 
*<code>.tabber</code> - A content container which may or may not be visible depending on which tab was previously clicked.
 
*<code>.tabber</code> - A content container which may or may not be visible depending on which tab was previously clicked.
  +
-----
  +
Edit:
  +
  +
Here is the HTML generated by the example on [[Help:Tabber]].
  +
<syntaxhighlight lang="html5">
  +
<div class="tabber tabberlive">
  +
<ul class="tabbernav">
  +
<li class="tabberactive">
  +
<a title="First Tab Title" href="#">First Tab Title</a>
  +
</li>
  +
<wbr>
  +
<li>
  +
<a title="Second Tab Title" href="#">Second Tab Title</a>
  +
</li>
  +
<wbr>
  +
<li>
  +
<a title="Third Tab Title" href="#">Third Tab Title</a>
  +
</li>
  +
<wbr>
  +
</ul>
  +
<div class="tabbertab" title="First Tab Title" style="display: block;">
  +
<p>First tab sample text.</p>
  +
</div>
  +
<div class="tabbertab" title="Second Tab Title" style="display: none;">
  +
<p>Second tab content goes here.</p>
  +
</div>
  +
<div class="tabbertab" title="Third Tab Title" style="display: none;">
  +
<p>Third tab content goes here.</p>
  +
</div>
  +
</div>
  +
</syntaxhighlight>

Latest revision as of 01:52, February 1, 2020

  • .tabbernav - The list of tabs users can click to change which content is displayed.
  • .tabber - A content container which may or may not be visible depending on which tab was previously clicked.

Edit:

Here is the HTML generated by the example on Help:Tabber.

<div class="tabber tabberlive">
  <ul class="tabbernav">
    <li class="tabberactive">
      <a title="First Tab Title" href="#">First Tab Title</a>
    </li>
    <wbr>
    <li>
      <a title="Second Tab Title" href="#">Second Tab Title</a>
    </li>
    <wbr>
    <li>
      <a title="Third Tab Title" href="#">Third Tab Title</a>
    </li>
    <wbr>
  </ul>
  <div class="tabbertab" title="First Tab Title" style="display: block;">
    <p>First tab sample text.</p>
  </div>
  <div class="tabbertab" title="Second Tab Title" style="display: none;">
    <p>Second tab content goes here.</p>
  </div>
  <div class="tabbertab" title="Third Tab Title" style="display: none;">
    <p>Third tab content goes here.</p>
  </div>
</div>
Community content is available under CC-BY-SA unless otherwise noted.