Tabs Functional Tabs Functional 0
Tabs Functional

Tabs Functional

Addon Style Team Tokko
Follow
#1

MultiTabs Syntax Highlighter

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.

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>
Your Ads For Post In Here
if you want to request theme or script please, Read Here!
Please Disable the AdBlock or add our website in Whitelist to Support Unity UI - Side
Read Here! Unity UI - Side Terms and Rules
Remove Edit Edit This Thread
Reply
#Ads
Unity UI - Side Announcement
[img]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTLC4ZZbkRXo4ily7oesAAd3wd0m4OlJgG7NsQaejhuZBoVK_1r1JOr_M7KtIxf5XRYxziaZm_Of9i2nhtHdqzA7Iuo-dUEfZXn_kDw7nziU29lKckXzSuywgr21422qyCjsrhvJDyr9C39Wpw-cyqx6qFu7Cwkw9GFJwBN8clwWC1mYiPCsS9YGz_/s1600/New%20Tokko%20Blogger.png[/img]
Your Ads Here
Comment Tools

image quote pre code