Q:

Javascript Program to implement Vertical Tab

YasminRadwan26
Save to bookmark
|
2022-05-24
|
  122 
0

Javascript Program to implement Vertical Tab using javascript in order to show the hidden data.

JavaScript programming, examples, JavaScript programming examples,
login and add your own answer to this question

All Answers

YasminRadwan26
2022-05-24
need an explanation for this answer? contact us directly to get an explanation for this answer 

<html>
<head>
<style>


.tab {
    border: 1px solid #ccc;
    background-color: black;
    width: 100%;
    height: 190px;
}


.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
    color:white;
}


.tab button:hover {
    background-color: orange;
    color:black;
}

.tabdata {
    float: left;
    padding: 0px 12px;
    border: 1px solid #ccc;
    width: 619px;
    border-top:none;
    height: 100px;
}
</style>

</head>
<body>
<h1>Vertical Tab</h1>
<p>Click on the buttons to get the inside Data:</p>

<div class="tab">
  <button class="tabs" onclick="openTab(event, 'HTML')" id="defaultOpen">HTML</button>
  <button class="tabs" onclick="openTab(event, 'CSS')">CSS</button>
  <button class="tabs" onclick="openTab(event, 'JavaScript')">JavaScript</button>
</div>

<div id="HTML" class="tabdata">
  <h3>HTML</h3>
  <p>HTML is used to define the content of web pages.</p>
</div>

<div id="CSS" class="tabdata">
  <h3>CSS</h3>
  <p>CSS is used to specify the layout of web pages.</p> 
</div>

<div id="JavaScript" class="tabdata">
  <h3>JavaScript</h3>
  <p>JavaScript is used to program the behavior of web pages.</p> 
</div>

<script>
function openTab(evt, language) {
    var i, tabdata, tabs;
    tabdata = document.getElementsByClassName("tabdata");
    for (i = 0; i < tabdata.length; i++) {
        tabdata[i].style.display = "none";
    }
    tabs = document.getElementsByClassName("tabs");
    for (i = 0; i < tabs.length; i++) {
        tabs[i].className = tabs[i].className.replace(" active", "");
    }
    document.getElementById(language).style.display = "block";
    evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();
</script>
     
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

Similar questions

need a help?

find thousands of online teachers now