Tabs Functional

MultiTabs Syntax Highlighter

HTML CSS JS

your code in here

your code in here

 Your Code In here

Writing Code:

<div class='pre tb'>
  <!--[ Active function ]-->
  <input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
  <input class='prei hidden' id='preT-2' type='radio' name='preTab'>
  <input class='prei hidden' id='preT-3' type='radio' name='preTab'>
  <!--[ Header/title ]-->
  <div class='preH tbHd scrlH'>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT-1' data-text='HTML'></label>
    <label for='preT-2' data-text='CSS'></label>
    <label for='preT-3' data-text='JS'></label>
  </div>

  <!--[ Content ]-->
  <div class='preC-1'>
    <pre>Your_code_is_here</pre>
  </div>
  <div class='preC-2'>
    <pre>Your_code_is_here</pre>
  </div>
  <div class='preC-3'>
    <pre>Your_code_is_here</pre>
  </div>
</div>

• The checked attribute defines the first tab that appears by default.
• Make sure id='...' and for='...' attributes have the same value. ID must be unique, there cannot be two identical IDs in one page.
• Change data-text='HTML' attribute in the highlighted section to rename the tab.

---

Tabs 1 Tabs 2 Tabs 3 Tabs 4

Your Tabs 1 here

Your Tabs 2 here

Your Tabs 3 here

Your Tabs 4 here

Writing Code:

<!--[ Active function ]-->
<input class="tbIn hidden" id="fTabs-1" type="radio" name="postTabs" checked="">
<input class="tbIn hidden" id="fTabs-2" type="radio" name="postTabs">
<input class="tbIn hidden" id="fTabs-3" type="radio" name="postTabs">
<input class="tbIn hidden" id="fTabs-4" type="radio" name="postTabs">

<!--[ Tabs header/title, replace class attribute to class='tbHd scrlH stick' if you want to create a floating tab title ]-->
<div class="tbHd scrlH">
  <!--[ Change atribute data-text='...' to replace tabs title ]-->
  <label for="fTabs-1" data-text="Tabs 1"></label>
  <label for="fTabs-2" data-text="Tabs 2"></label>
  <label for="fTabs-3" data-text="Tabs 3"></label>
  <label for="fTabs-4" data-text="Tabs 4"></label>
</div>

<div class="tbCn">
  <!--[ Tabs content ]-->
  <div class="tbText-1">
    
    <p>Your Tabs 1 here</p>
  </div>

  <!--[ Tabs content ]-->
  <div class="tbText-2">
    <p>Your Tabs 2 here</p>
  </div>

  <!--[ Tabs content ]-->
  <div class="tbText-3">
    <p>Your Tabs 3 here</p>
  </div>
  
  <!--[ Tabs content ]-->
  <div class="tbText-4">
    <p>Your Tabs 4 here</p>
  </div>
</div>