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.

<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>