Documentation

Everything you can do with Beauter

Tabs

Beauter can create simple customisable tabs. Let the example speak itself!

Click on the buttons inside the tabbed menu:

Note that you need to include beauter.min.js at the end for the dynamic event triggering. See how here.

A simple Tab

London is the capital city of England.

Another Tab

You can add colors too.

×

Tab with close button

Do you see a × above ?

<div class="tab">
  <button class="tablinks" onclick="opentab('tab1')">Tab 1</button>
  <button class="tablinks" onclick="opentab('tab2')">Tab 2</button>
  <button class="tablinks _danger" onclick="opentab('tab3')">Tab 3</button>
</div>

<div id="tab1" class="tabcontent">
  <h3>A simple Tab</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="tab2" class="tabcontent _primary">
  <h3>Another Tab</h3>
  <p>You can add colors too.</p>
  <button class="_nightblue">Wow</button>
</div>

<div id="tab3" class="tabcontent">
  <div class="-close _floatRight _f-danger">×</div>

  <h3>Tab with close button</h3>
  <p>Do you see a × above ?</p>
</div>

Sitemap ..

Code licensed under MIT
Docs under CC BY NC SA 4.0.
Designed with
outboxcraft logoOutboxcraft
© 2017