CLICKABLE TABS.....

♥ DO NOT redistribute.
♥ DO NOT use in anything you sell OR give away.
♥ DO NOT use if you're not going to credit me. Credit is REQUIRED on the page you use it on.
♥ DO NOT REMOVE MY CREDIT FROM THE CODING
♥ Tutorials for my tabs are at the bottom of this page.
♥ I will add more styles some day!
♥ I strongly suggest picking one style if using on multiple pages, unless you know what you're doing.
♥ If you have any issues with any of my rules than don't use. It's that simple.

♥ These tabs are PREVIEW pictures.
They are NOT clickable until they are on your website.

style one

Put this code on the page you want the tabs on:

<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openSwtab(event, 'one')" id="defaultOpen">one</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openSwtab(event, 'two')">two</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openSwtab(event, 'three')">three</a></li>
</ul>

<div id="one" class="tabcontent">
<b>You can add more/less tabs if you need more/less. THIS IS JUST A PICTURE OF THE TABS IT IS NOT CLICKABLE</b> <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis tellus suscipit, scelerisque purus et, mollis tortor. Pellentesque ut ultrices eros, et aliquam lorem. Nam id metus sit amet leo dignissim vehicula eget vitae neque. Phasellus et facilisis orci. Cras varius finibus augue. Ut eget est egestas, elementum ligula dapibus, commodo erat. Curabitur ut pulvinar. vehicula eget vitae neque. Phasellus et facilisis orci. Cras varius finibus augue. Ut eget est egestas, elementum ligula dapibus, adipiscing elit. Donec quis tellus suscipit, scelerisque purus et, mollis tortor. Pellentesque ut ultrices eros, et aliquam lorem.

</div>

<div id="two" class="tabcontent">
This is the second tabs area.

</div>

<div id="three" class="tabcontent">
This is the third tabs area.

</div>

// Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {tabcontent[i].style.display = "none";}

// Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {tablinks[i].className = tablinks[i].className.replace(" active", "");}

// Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(SwtabName).style.display = "block"; evt.currentTarget.className += " active";}

// Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();
</script>

Put this code on your style.css page:

style two

Put this code on the page you want the tabs on:

</div>

<div id="two" class="tabcontent">
This is the second tabs area.

</div>

<div id="three" class="tabcontent">
This is the third tabs area.

</div>

// Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(SwtabName).style.display = "block"; evt.currentTarget.className += " active";}

// Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();
</script>

Put this code on your style.css page:

style three

Put this code on the page you want the tabs on:

</div>

<div id="two" class="tabcontent">
This is the second tabs area.

</div>

<div id="three" class="tabcontent">
This is the third tabs area.

</div>

// Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(SwtabName).style.display = "block"; evt.currentTarget.className += " active";}

// Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();
</script>

Put this code on your style.css page:

tab tutorials

install tabs tutorial This tutorial is only compatible with MY tab styles {CLICK HERE} the steps 1. This is seriously so easy. Just follow the directions on the tabs page. If you still don't get it than I'll try to explain it further. Where it says "Put this code on the page you want the tabs on" you just copy and paste the code where you want your tabs. Example, If I want tabs on my stylesheets page than I'd paste that code on the stylesheets.php page. 2. Copy the coding where it says "Put this code on your style.css page" and paste it on your style.css page (or wherever your website layouts styling is which is more than likely a style.css page) That's it! PLEASE be very careful when dealing with tabs because just like stylesheets, if you delete something on accident it can mess up the entire thing.

RETURN TO ADAM MCQUAID

welcome to adammcquaid.ca

updates

MM/DD

MM/DD

MM/DD

MM/DD

MY NEW SITES

ADAM LINKS

LISTED AT

LINK EXCHANGE

LIKE ME

MY SITES

Button Rotation

Goal Horn ..click to hear

CLICKABLE TABS.....

style one

style two

style three

tab tutorials

affies

STATS