I am very new to front end development and stuck while working with tabs in HTML. I am trying to display content in tabs and somehow I an able to do it but it only works if any of the tab button is pressed. The entire content shows up as the page loads and eventually as the tab buttons are clicked, it works fine.
Can somebody please correct me?
https://jsfiddle.net/pndmyaf7/
CSS
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
.tab-content>.tab-pane {
height: 1px;
overflow: hidden;
display: block;
visibility: hidden;
}
.tab-content>.active {
height: auto;
overflow: auto;
visibility: visible;
}
HTML
<fieldset class="tab" style="margin-top: 150px ";>
<legend align="center">Exposure Breakdown</legend>
<button class="tablinks" onclick="openTab(event, 'exposure_by_asset_type')">Asset Class</button>
<button class="tablinks" onclick="openTab(event, 'exposure_by_leh_sector')">LEH Sector</button>
<button class="tablinks" onclick="openTab(event, 'exposure_by_gics_sector')">GICS Sector</button>
</fieldset>
<div id="exposure_by_asset_type" class="tab-content">
<h3>Test0</h3>
</div>
<div id="exposure_by_leh_sector" class="tab-content">
<h3>Tes1</h3>
</div>
<div id="exposure_by_gics_sector" class="tab-content">
<h3>Test2</h3>
</div>
JS
function openTab(evt, chart_id) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(chart_id).style.display = "block";
evt.cur`enter code here`rentTarget.className += " active";
}
Set the visibility of the content initially to none. You can simply add this to your css file:
.tab-content {
display: none;
}
Related
Haizz.
Hello guys..
I'm learning Web Dev in: https://www.w3schools.com/.
I did a very simple homework here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs
```
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
```
But.... When I try to exchange the traditional for-loop to for..in loop. It not work?
Ex.
for (i in tabcontent) {
tabcontent[i].style.display = "none";
}
After many time I try to make it work. I've found that all statement follow the first for..in loop will be skip !!!????
It mean the Function will auto-break after a for..in loop. The first for..in loop work as normal, but the rest statement after it is simply skip. The Function break at this point?
If anyone knew this problem please help me to understand it. X__X
The "auto-break" you're seeing is an uncaught exception breaking execution –
you should have your browser's console open to see any errors that occur and are uncaught.
That change yields an
Uncaught TypeError: Cannot set property 'display' of undefined
at openCity (<anonymous>:6:33)
at HTMLButtonElement.onclick (tryit.asp?filename=tryhow_js_tabs:1)
since for..in loops over properties of objects, not array elements as you imagine, and i ends up (as evidenced by console.log(i)) being 0, 1, 2, and then finally length, and tabcontent.length has no style property, so the equivalent of
tabcontent.length.style.display = ...
naturally fails.
You can go with the for in loop. The loop will give you indexes but because you have not converted it to an array you get some extra (unwanted properties) hence the error.
The key is to make the conversion, after that you are safe with the for in loop:
let tabContent = Array.from(document.getElementsByClassName("tabcontent"))
Example proof: https://jsfiddle.net/sqfgb0k6/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script>
function openCity(evt, cityName) {
let i, tablinks
let tabContent = Array.from(document.getElementsByClassName("tabcontent"))
for (let i in tabContent) {
tabContent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (let i in tabContent) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
This is the example of tab menu please check below, what I'm trying to do when I clicked the button ALL it will display all the tabcontent and each tab content has its own tab menu. TIA!
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
/* Fade in tabs */
#-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
}
</head><body><div class="tab"><button class="tablinks" onclick="openCity(event, 'All')">All</button><button class="tablinks" onclick="openCity(event, 'London')">London</button><button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button><button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button></div><div id="All" class="tabcontent"></div><div id="London" class="tabcontent"><h3>London</h3><p>London is the capital city of England.</p></div><div id="Paris" class="tabcontent"><h3>Paris</h3><p>Paris is the capital of France.</p></div><div id="Tokyo" class="tabcontent"><h3>Tokyo</h3><p>Tokyo is the capital of Japan.</p></div></body></html>
Just add a condition in the beginning for the "All" arguments and display all tabcontent
See code snippet
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
if (cityName === 'All') {
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "block";
}
} else {
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
evt.currentTarget.className += " active";
}
body {
font-family: Arial;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: block;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
/* Fade in tabs */
#-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="tab">
<button class="tablinks active" onclick="openCity(event, 'All')">All</button>
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="All" class="tabcontent">
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
You need to give the content and tab content their own ids. Then cause the tab dropdown to become active after the tab in the menu is clicked. What it looks like to me at the moment is that you are trying to activate everything all at once.
I personally would use classes for this instead of ids for the sake of selection.
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
Give the button with the 'All' an id of id="defaultOpen" THEN add the above line outside the onClick function like this
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
</script>
Hope it helps. Here is the link
How to change url path, while using include html method at javascript in inner tab container.
Am using single page layout in my web site, and used tab style, each tab have own html page with include method.
I have attached my sample file, Please suggest how to url path changed without refreshing page.
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
// page load
document.getElementById("Submenu1").innerHTML='<object type="text/html" data="submenu1.html" ></object>';
document.getElementById("Submenu2").innerHTML='<object type="text/html" data="submenu2.html" ></object>';
document.getElementById("Submenu3").innerHTML='<object type="text/html" data="submenu3.html" ></object>';
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Submenu1')" id="defaultOpen">SubMenu 1</button>
<button class="tablinks" onclick="openCity(event, 'Submenu2')">SubMenu 2</button>
<button class="tablinks" onclick="openCity(event, 'Submenu3')">SubMenu 3</button>
</div>
<div id="Submenu1" class="tabcontent">
<h1>external submenu1.html page here</h1>
</div>
<div id="Submenu2" class="tabcontent">
<h1>external submenu2.html page here</h1>
</div>
<div id="Submenu3" class="tabcontent">
<h1>external submenu3.html page here</h1>
</div>
I Hope, will understand my request, sorry for poor english.
You can use window.location.hash = "#"+cityName; If you want change url without refreshing page.
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
window.location.hash = "#"+cityName;
}
Please help me in solving the below problem
I have a navigation bar , with 3 buttons :
1. home 2. info 3. restart
info and restart buttons are php pages .
1. home button , displays a content written inside
I want to display the home button content by default when page loads .
Currently how my navigation bar works is , it fetches all 3 tabs content and hides it . It displays the content only when clicking on the buttons .
Below is the code
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
<style>
body {font-family: "Lato", sans-serif;}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
<body>
<div class="tab" >
<button class="tablinks" onclick="openCity(event, 'Home')" id="defaultOpen"><b>Home</b></button>
<button class="tablinks" onclick="openCity(event, 'Info')"><b>Info</b></button>
<button class="tablinks" onclick="openCity(event, 'Restart')"><b>Restart</b></button>
</div>
<div id="Home" class="tabcontent">
<h3><font face="arial" /><u>Information About Web Page</u></h3>
<p>
Hello World !
</p>
</div>
<div id="Info" class="tabcontent">
<h3>Information</h3>
<p>
<?php
include('a.php');
?></p>
</div>
<div id="Restart" class="tabcontent">
<h3><font face="arial" />restart</h3>
<p>
<?php
include('restart.php');
?></p>
</div>
</body>
When i use document.getElementById("defaultOpen").focus(); im not able to open home tab by default when page loads .
Currently, it is showing Hi, until you click another menu item. Then it grabs the altText attribute and displays that text.
Is that what you want?
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
var defaultOpen = document.getElementById('defaultOpen');
defaultOpen.getElementsByTagName('b')[0].innerHTML = defaultOpen.getAttribute('altTxt');
}
// Get the element with id="defaultOpen" and click on it
//document.getElementById("defaultOpen").click();
<style>
body {font-family: "Lato", sans-serif;}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
<body>
<div class="tab" >
<button class="tablinks" onclick="openCity(event, 'Home')" id="defaultOpen" altTxt="Home"><b>Hi</b></button>
<button class="tablinks" onclick="openCity(event, 'Info')"><b>Info</b></button>
<button class="tablinks" onclick="openCity(event, 'Restart')"><b>Restart</b></button>
</div>
<div id="Home" class="tabcontent" style="display: block">
<h3><font face="arial" /><u>Information About Web Page</u></h3>
<p>Hello World !</p>
</div>
<div id="Info" class="tabcontent">
<h3>Information</h3>
<p>
<?php
include('a.php');
?></p>
</div>
<div id="Restart" class="tabcontent">
<h3><font face="arial" />restart</h3>
<p>
<?php
include('restart.php');
?></p>
</div>
</body>
Do this, perform the home click action on after body load.It will auto trigger home click.
Add change your body tag like this
<body onload="openCity(event, 'Home')">
//others code
</body>
I am using materialize css and on a navbar I have a dropdown that opens on mouse over on the icon more vert (on the example on the right hand side).
When I click on the link within the dropdown, the target fires correctly, but the dropdown does not close.
Working example here. I would like the dropdown menu to close automatically after it has being clicked. Below my html code:
<ul id="dropdown1" class="dropdown-content collection">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<nav class="blue darken-3">
<div class="nav-wrapper">
<ul id="tabs" class="left">
<li><b>Item 1</b></li>
<li><b>Item 2</b></li>
</ul>
<ul class="right">
<li><a class="dropdown-button" href="#!" data-activates="dropdown1"><i class="material-icons tiny">more_vert</i></a></li>
</ul>
</div>
</nav>
<div id="1" class="tabcontent_gfs">
content 1 here
</div>
<div id="2" class="tabcontent_gfs">
content 2 here
</div>
and here the javascript
(function($) {
$(function() {
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
hover: true, // Activate on hover
belowOrigin: true, // Displays dropdown below the button
alignment: 'right' // Displays dropdown with edge aligned to the left of button
}
);
}); // End Document Ready
})(jQuery); // End of jQuery name space
var currentTabGFS = null;
function openGFS(evt, tabName, ThirdValue) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent_gfs");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
var text = document.getElementById(tabName);
text.innerHTML = text.innerHTML.replace('{var}',tabName);
currentTabGFS = tabName;
}
document.getElementById("defaultOpenGFS").click();
function dismissGFS(){
document.getElementById(currentTabGFS).style.display='none';
};
and part of the css:
<style class="cp-pen-styles">
.dropdown-content {
background-color: #FFFFFF;
margin: 0;
display: none;
min-width: 350px;
height: 120px;
max-height: auto;
margin-left: -1px;
overflow: auto;
opacity: 0;
position: absolute;
white-space: nowrap;
z-index: 1;
will-change: width, height;
}
</style>
Per the materialize dropdown docs, you can use $('.dropdown-button').dropdown('close'); in your click handler for those links, but you need to upgrade materialize because your current version doesn't support it.
(function($) {
$(function() {
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
hover: true, // Activate on hover
belowOrigin: true, // Displays dropdown below the button
alignment: 'right' // Displays dropdown with edge aligned to the left of button
});
}); // End Document Ready
})(jQuery); // End of jQuery name space
var currentTabGFS = null;
function openGFS(evt, tabName, ThirdValue) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent_gfs");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
var text = document.getElementById(tabName);
text.innerHTML = text.innerHTML.replace('{var}', tabName);
currentTabGFS = tabName;
$('.dropdown-button').dropdown('close');
}
document.getElementById("defaultOpenGFS").click();
function dismissGFS() {
document.getElementById(currentTabGFS).style.display = 'none';
};
body {
font-family: "Lato", sans-serif;
}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 0px 0px;
border: 0px solid #ccc;
border-top: none;
}
/* Style the close button */
.topright {
float: right;
cursor: pointer;
font-size: 20px;
}
.topright:hover {
color: red;
}
nav .nav-wrapper i.material-icons {
height: 48px;
line-height: 48px;
}
nav ul a {
font-size: 2.1rem;
color: #FFF;
}
nav,
nav .nav-wrapper i,
nav a.button-collapse,
nav a.button-collapse i {
height: 75px;
line-height: 75px;
}
</style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> <style class="cp-pen-styles"> .dropdown-content {
background-color: #FFFFFF;
margin: 0;
display: none;
min-width: 350px;
height: 120px;
max-height: auto;
margin-left: -1px;
/* Add this to keep dropdown in line with edge of navbar */
/* overflow: hidden;*/
/* Changed this from overflow-y:auto; to overflow:hidden; */
overflow: auto;
opacity: 0;
position: absolute;
white-space: nowrap;
z-index: 1;
will-change: width, height;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<ul id="dropdown1" class="dropdown-content collection">
<li>Item 1
<label>
<input type="checkbox"><span class="lever"></span></label>
</li>
<li>Item 2
<label>
<input type="checkbox"><span class="lever"></span></label>
</li>
</ul>
<nav class="blue darken-3">
<div class="nav-wrapper">
<ul id="tabs" class="left">
<li><b>Item 1</b></li>
<li><b>Item 2</b></li>
</ul>
<ul class="right">
<li><a class="dropdown-button" href="#!" data-activates="dropdown1"><i class="material-icons tiny">more_vert</i></a></li>
</ul>
</div>
</nav>
<div id="1" class="tabcontent_gfs">
content 1 here
</div>
<div id="2" class="tabcontent_gfs">
content 2 here
</div>