Weebly Tricks #65 - CSS3 Content Tabs Widget

I forgot the name of the guy who requested a content tabs for his site. Anyway, somebody might still need it so here it is. This widget is made with CSS3 using radio buttons which is very common these days for CSS3 effects. The codes has been modified and ready to use for most Weebly Themes. As much as possible, I made the widget independent and won't be affected by your default template settings. So, ready your site and lets begin with this quick and easy tutorial.

CLICK HERE FOR LIVE DEMO

FILES NEEDED
How to use these files? Click Here!

• cctw.css

---

HEADER CODE
Where to place these codes? Click Here!

<link rel="stylesheet" href="http://mwtdatabase.weebly.com/files/theme/cctw.css" type="text/css" />

Note:
Red text - change with your own site address.

---

BODY CODE
Where to place these codes? Click Here!

<section class="tabs">
    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
    <label for="tab-1" class="tab-label-1">About us</label>
   
    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
    <label for="tab-2" class="tab-label-2">How we work</label>
   
    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
    <label for="tab-3" class="tab-label-3">Affiliates</label>
   
    <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
    <label for="tab-4" class="tab-label-4">Contact us</label>
           
    <div class="clear-shadow"></div>
               
    <div class="contenttabs">
        <div class="contenttabs-1">
          <cth2>Title 1</cth2>
            <p>Your Text Here</p>
          <cth3>Title 2</cth3>
          <p>Your Text here</p>
        </div>
        <div class="contenttabs-2">
          <cth2>Title 1</cth2>
            <p> Your Text Here</p>
          <cth3>Title 2</cth3>
          <p>Your Text Here</p>
        </div>
        <div class="contenttabs-3">
          <cth2>Title 1</cth2>
            <p>Your Text Here</p>
        </div>
        <div class="contenttabs-4">
          <cth2>Title 1</cth2>
            <p>Your Text Here</p>
          <cth3>Title 2</cth3>
          <p>Your Text Here</p>
        </div>
    </div>
</section>

Notes:
Red text - The title for each tab.
Green text - The paragraph title/s for each tab.
Blue text - The paragraphs for each tab.

---

CONCLUSION

You can actually insert paragraphs-only if you like, just remove the whole tag enclosed by <cth2> and </cth2>. This widget has three more animation effects as seen on the code source found at the demo page. Keep your tab's title short because they have specific width, however, you can edit it with the external css file. 

Did this widget gave your site a new look? Let me know!

Get email updates and more access! (Free)

Email *

email marketing by activecampaign

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!