JavaScript tabifier, tabbed change on button click

Automatically create an HTML tab interface using JavaScript.
In this code you will change the data dynamically in tabbing.
Simply copy this code and paste on your html page.

<script language="javascript">
function firstblock() {
    var ele = document.getElementById("1stblock");
   
        document.getElementById("firsttab").style.backgroundColor="red";
        document.getElementById("secondtab").style.backgroundColor="black";
        document.getElementById("thirdtab").style.backgroundColor="black";
        document.getElementById("2ndblock").style.display="none";
        document.getElementById("3rdblock").style.display="none";
        document.getElementById("1stblock").style.display="block";
       
}
function secondblock() {
    var ele = document.getElementById("2ndblock");
    if(ele.style.display == "block")
    {
            ele.style.display = "none";
      }
    else
    {
        ele.style.display = "block";
        document.getElementById("1stblock").style.display="none";
        document.getElementById("3rdblock").style.display="none";
        document.getElementById("secondtab").style.backgroundColor="red";
        document.getElementById("firsttab").style.backgroundColor="black";
       
       
    }
}
function thirdblock() {
    var elem = document.getElementById("3rdblock");
    if(elem.style.display == "block")
    {
            elem.style.display = "none";
      }
    else
    {
        elem.style.display = "block";
        document.getElementById("2ndblock").style.display="none";
        document.getElementById("1stblock").style.display="none";
        document.getElementById("thirdtab").style.backgroundColor="red";
        document.getElementById("secondtab").style.backgroundColor="black";
        document.getElementById("firsttab").style.backgroundColor="black";

    }

}

</script>
<div style="width:445px;float:left;margin-left:5px;">
<div style="width:440px;height:70px;">
   

                    <div style="width:440px;">
                    <div style="height:22px;background-color:#FF0000;font-weight:bold;padding-left:5px;width:140px;border-top:1px solid #000000;border-right:1px solid #000000;border-left:1px solid #000000;border-left:1px solid #000000;float:left;font-size:15px;line-height:18px;color:#FFFFFF;" align="center" id="firsttab">
                    <a href="#" style="color:#FFFFFF" onClick="javascript:firstblock();">First Tab</a>
                    </div>
                    <div style="height:22px;background-color:#333333;font-weight:bold;padding-left:5px;width:140px;border-top:1px solid #000000;border-right:1px solid #000000;border-left:1px solid #000000;border-left:1px solid #000000;float:right;font-size:15px;line-height:18px;color:#FFFFFF;" align="center" id="thirdtab">
                    <a href="#" style="color:#FFFFFF" onClick="javascript:thirdblock();">Third Tab</a>
                    </div>
                    <div style="height:22px;background-color:#333333;font-weight:bold;width:130px;border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;float:right;font-size:15px;line-height:18px;margin-right:8px;color:#FFFFFF;" align="center" id="secondtab">
                    <a href="#" style="color:#FFFFFF" onClick="javascript:secondblock();">Second Tab</a>
                    </div>
                      
                      
                        <div style="padding:12px 1px 4px 1px;background-color:#FFFFFF;border-bottom:1px solid #000000;border:1px solid #000000;padding-left:5px;width:432px;float:left;" id="fitness-profile">
                      
                      
                                <div id="1stblock">
                                        <p>
                                        1st div text 1st div text 1st div text 1st div text 1st div text 1st div text 1st div text  1st div text 1st div text 1st div text 1st div text 1st div text 1st div text 1st div text 1st div text 1st div text 1st div text 1st div text 1st div text 1st div text 1st div text  1st div text 1st div text 1st div text 1st div text 1st div text 1st div text 1st div text
                                        </p>
                                       
                                        <div align="right"><input type="button" id="next" name="next" value="Next" onClick="javascript:secondblock();"></div>
                                </div>
                                <div id="2ndblock" style="display:none;">
                                        <p>
                                        2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text 2nd div text
                                        </p>
                                        <div align="right"><input type="button" id="next" name="next" value="Next" onClick="javascript:thirdblock();"></div>
                                </div>
                                        <div id="3rdblock" style="display:none;">
                                        <p>
                                        3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text 3rd div text
                                        </p>
                                        <div align="right"><input type="button" id="next" name="next" value="Next"></div>
                                </div>
                               
                        </div>
</div>
</div>
</div>