Here I am showing tabs with basic data. It will go to next tab whenever I click next tab button.
Can anybody help me how to switch tabs automatically after few seconds, like first 30 sec tab1,next 30 sec tab2 - after tab2 it should come to tab1
function openPage(pageName, elmnt, color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
var updatedTime = document.lastModified;
document.getElementById("time1").innerHTML = updatedTime;
document.getElementById("time2").innerHTML = updatedTime;
* {
box-sizing: border-box
}
/* Set height of body and the document to 100% */
body,
html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home {
background-color: red;
}
#News {
background-color: green;
}
<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<div id="Home" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
<div class="footer">
<p>Last Updated On : <span id="time1"></span><br>
<p>Software Version</p>
</div>
</div>
<div id="News" class="tabcontent">
<h3>News</h3>
<p>Some news this fine day!</p>
<div class="footer">
<p>Last Updated On : <span id="time2"></span><br>
<p>Software Version</p>
</div>
</div>
You mean this?
I would perhaps clear the timeout if someone clicks any tab in case they want to stay on it
function openPage(pageName, elmnt, color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
window.addEventListener("load", function() {
// Get the element with id="defaultOpen" and click on it
const tabs = document.querySelectorAll(".tablink");
let cnt = 0;
for (let i = 0; i < tabs.length; i++) {
if (tabs[i].id === "defaultOpen") {
cnt = i;
break;
}
}
tabs[cnt].click(); // clicks defaultOpen first time
const tId = setInterval(function() {
cnt++;
if (cnt >= tabs.length) cnt = 0;
tabs[cnt].click();
}, 3000);
const lmID = setInterval(function() {
var updatedTime = document.lastModified;
document.getElementById("time1").innerHTML = updatedTime;
document.getElementById("time2").innerHTML = updatedTime;
},1000)
})
* {
box-sizing: border-box
}
/* Set height of body and the document to 100% */
body,
html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home {
background-color: red;
}
#News {
background-color: green;
}
<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<div id="Home" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
<div class="footer">
<p>Last Updated On : <span id="time1"></span><br>
<p>Software Version</p>
</div>
</div>
<div id="News" class="tabcontent">
<h3>News</h3>
<p>Some news this fine day!</p>
<div class="footer">
<p>Last Updated On : <span id="time2"></span><br>
<p>Software Version</p>
</div>
</div>
Related
I'm looking to move some content on a page, into a set of tabs higher on the page via javascript or any other means. I can't edit WHERE on the page this code exists, but I can set Pre/Post HTML on the fields and thus give it a class or an ID to mess with.
I built it out here to play with
If you don't want to go there, here's the code:
function openTab(evt, tabName) {
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(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
/* 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: #0090bf;
color: #fff;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
```
<!-- I can edit this section as needed. -->
<section class="panel panel-persondetails">
<div class="tab">
<button class="tablinks active" onclick="openTab(event, 'tab1')">Tab Name 1</button>
<button class="tablinks" onclick="openTab(event, 'tab2')">Tab Name 2</button>
<button class="tablinks" onclick="openTab(event, 'tab3')">Tab Name 3</button>
</div>
<div id="tab1" class="tabcontent" style="display: block;">
<div>
replace me with stuff 1
</div>
</div>
<div id="tab2" class="tabcontent">
<div>
replace me with stuff 2
</div>
</div>
<div id="tab3" class="tabcontent">
<div>
replace me with stuff 3
</div>
</div>
</section>
<!-- The following is elsewhere on the page and I can't move it. I can add pre/post HTML which is how I'd wrap it in a div and give it an ID or class to hopefully use js to show it in the tabs above instead. -->
<div id="content-tab-1">I want this in tab1.</div>
<div id="content-tab-2">I want this in tab2.</div>
<div id="content-tab-3">I want this in tab3.</div>
Where are the JS experts locked in quarantine and itching for a problem to solve? Thanks all!
You could do something like
var newContent = $("#content-tab-1]").detach();
$("#tab1").find("div").first().html(newContent);
Obviously you'll have to put that wherever you need it, and expand for tabs 2 and 3.
I edited your JSFiddle and I think that I did the thing that you were asking. Initially, the content below the tabs is set to the contents of the element that said, "I want this in tab1". After that, the program simply gets the corresponding content each time you switch to a different tab. Here's the link to the JSFiddle:
Tab Switching Demo
// START WITH THE CONTENT AS THE FIRST TAB ITEM
var contents = document.getElementById("content-tab1").innerHTML;
document.getElementById("tabcontent").innerHTML = contents;
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
// MAKE ALL OF THE TABS LOOK INACTIVE
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
//CHANGE THE DISPLAY AND CSS PROPERTIES OF THE CLICKED TAB
var contents = document.getElementById("content-" + tabName).innerHTML;
console.log(contents);
document.getElementById("tabcontent").innerHTML = contents;
evt.currentTarget.className += " active";
console.log(evt.currentTarget.id);
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
/* 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: #0090bf;
color: #fff;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<!-- I can edit this section as needed. -->
<section class="panel panel-persondetails">
<div class="tab">
<button id="tab1" class="tablinks active" onclick="openTab(event, 'tab1')">Tab Name 1</button>
<button id="tab2" class="tablinks" onclick="openTab(event, 'tab2')">Tab Name 2</button>
<button id="tab3" class="tablinks" onclick="openTab(event, 'tab3')">Tab Name 3</button>
</div>
<div class="tabcontent" style="display: block;">
<div id="tabcontent">
replace me with stuff 1
</div>
</div>
</section>
<br>
<!-- The following is elsewhere on the page and I can't move it. I can add pre/post HTML which is how I'd wrap it in a div and give it an ID or class to hopefully use js to show it in the tabs above instead. -->
<div id="content-tab1">I want this in tab1.</div>
<div id="content-tab2">I want this in tab2.</div>
<div id="content-tab3">I want this in tab3.</div>
var tabcontent = document.getElementsByClassName("tabcontent");
var tablinks = document.getElementsByClassName("tablinks");
insertToTab(1);
console.log('tablinks ', tablinks);
for (let i = 0; i < tablinks.length; i++) {
tablinks[i].addEventListener('click', bindClick2(i))
}
function bindClick2(i) {
return function() {
insertToTab(i + 1);
for (j = 0; j < tabcontent.length; j++) {
tabcontent[j].style.display = "none";
}
for (j = 0; j < tablinks.length; j++) {
tablinks[j].className = tablinks[j].className.replace(" active", "");
}
var tabName = 'tab' + (+i + 1);
document.getElementById(tabName).style.display = "block";
this.className += " active";
}
}
function insertToTab(i) {
var currContentTab = document.getElementById("content-tab-" + i);
var currTabcontent = document.getElementById("tab" + i)
currTabcontent.innerText = currContentTab.innerText;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
/* 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: #0090bf;
color: #fff;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<section class="panel panel-persondetails">
<div class="tab">
<button class="tablinks active">Tab Name 1</button>
<button class="tablinks">Tab Name 2</button>
<button class="tablinks">Tab Name 3</button>
</div>
<div id="tab1" class="tabcontent" style="display: block;">
<div>
replace me with stuff 1
</div>
</div>
<div id="tab2" class="tabcontent">
<div>
replace me with stuff 2
</div>
</div>
<div id="tab3" class="tabcontent">
<div>
replace me with stuff 3
</div>
</div>
</section>
<div id="content-tab-1">I want this in tab1.</div>
<div id="content-tab-2">I want this in tab2.</div>
<div id="content-tab-3">I want this in tab3.</div>
I have Created a HTML page with four tabs including one default tab with details in that default tab. But when I was in another tab I have refreshed the page and it was returned the default tab content.
But I need to create my page, when I refresh the page on non-default tab, I need to stay the same tab.
This is the html code.
<nav id="navBar">
<button id="defaultOpen" class="tablink" onclick="openPage('Home',this);" style="margin-left: 100px">Home</button>
<button class="tablink" onclick="openPage('Map',this);">Map</button>
<button class="tablink" onclick="openPage('About',this);">About Us</button>
<button class="tablink" onclick="openPage('Contact',this);">Contact Us</button>
</nav>
<div id="Home" class="tabcontent">
<h3>This is home</h3>
<p>welcome to the home</p>
</div>
<div id="Map" class="tabcontent">
<h3>This is Map</h3>
</div>
<div id="About" class="tabcontent">
<h3>This is About</h3>
</div>
<div id="Contact" class="tabcontent">
<h3>This is contact</h3>
</div>
<script>
function openPage(pageName,elmnt) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = '#2f3542';
}
document.getElementById("defaultOpen").click();
</script>
Here is my style sheet
#navBar{
background-color: #555;
overflow: hidden;
border: none;
top: 0;
left: 0;
width: 100%;
position: fixed;
}
.tablink{
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding:14px 16px;
font-size: 17px;
}
.tablink:hover{
background-color: #777;
}
.tabcontent{
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
I have learned this code in www.w3schools.com site. Please help me to solve this problem...
I have a website with three sections containing tabbed areas. I had an older version of this which worked fine, and showed all sections correctly at all times, however as I was changing to a new layout the tabbed sections stopped functioning, I then changed them to some new code and ended up preferring this instead. I then noticed that my content would only show in one section at a time, so some sections do not show up when the page is loaded, unless the tab link is active/clicked.
I recall finding a way to fix this before but I've looked online and can't find anything, and didn't save a version of my old JS code to refer back to. I was hoping someone could help me remember why this happens and how to fix it.
I should note that I have unique IDs for my code and I have not reflected this in my code, as I had that issue the first time round. The unique IDs do not help fix the issue unfortunately.
function openPage(pageName, elmnt, color) {
// Hide all elements with class="tabcontent" by default */
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Remove the background color of all tablinks/buttons
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
// Show the specific tab content
document.getElementById(pageName).style.display = "block";
// Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
h3 {
font-size: 15px;
word-spacing: 2px;
font-weight: 100;
letter-spacing: 1px;
text-transform: uppercase;
font-family: 'IBM Plex Mono', sans-serif;
}
h2 {
font-size: 40px;
color: white;
word-spacing: 2px;
margin-bottom: 15px;
font-weight: 700;
letter-spacing: 1px;
font-family: 'IBM Plex Serif', sans-serif;
}
p {
font-weight: 300;
font-size: 15px;
color: white;
text-align: justify;
line-height: 1.5;
}
.new-section__black {
padding: 5%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
transition: .5s ease;
background-color: #000;
height: 100%;
}
/* Style tab links */
.tablink {
float: left;
outline: none;
cursor: pointer;
margin: 0 1%;
padding: 5px 5px;
font-size: 17px;
width: 10%;
}
.link-black {
background-color: #fff;
color: #000;
border: 1px solid #000;
}
.link-white {
background-color: #000;
color: #fff;
}
.tablink:first-of-type {
margin-left: 5%;
}
.tablink:last-of-type {
margin-right: 5%;
}
.link-black:active,
.link-black:hover {
background-color: #000;
color: #fff;
box-shadow: 2px 2px 10px #555;
}
.link-white:active,
.link-white:hover {
background-color: #fff;
color: #000;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
width: 100%;
display: none;
margin-top: 1%;
padding: 100px 20px;
height: 100%;
}
.content-black {
color: #000;
}
.content-white {
color: #fff;
}
.tabcontent .col:first-of-type {
margin-left: 0;
}
#defaultOpen {
display: block;
}
<section class="card new-section__black new_section">
<button class="tablink link-white" onclick="openPage('Tab1', this)" id="defaultOpen">
<h3>Tab1</h3>
</button>
<button class="tablink link-white" onclick="openPage('Tab2', this)">
<h3>Tab2</h3>
</button>
<button class="tablink link-white" onclick="openPage('Tab3', this)">
<h3>Tab3</h3>
</button>
<button class="tablink link-white" onclick="openPage('Tab4', this)">
<h3>Tab4</h3>
</button>
<div id="Tab1" class="tabcontent content-white">
<div class="col span-2-of-2">
<h2>Tab1</h2>
<p>Text</p>
</div>
</div>
<div id="Tab2" class="tabcontent content-white">
<div class="col span-2-of-2">
<h2>Tab2</h2>
<p>Text</p>
</div>
</div>
<div id="Tab3" class="tabcontent content-white">
<div class="col span-2-of-2">
<h2>Tab3</h2>
<p>Text</p>
</div>
</div>
<div id="Tab4" class="tabcontent content-white">
<div class="col span-2-of-2">
<h2>Tab4</h2>
<p>Text</p>
</div>
</div>
</section>
Here is a CodePen example of what I have.
If you have multiple sets of "tabs" on the page, you need to scope your interactions to that specific <section>.
function openPage(pageName, elmnt, color) {
// Get the parent node, make all DOM selections based on this
var section = elmnt.parentElement;
// Hide all elements with class="tabcontent" by default */
var i, tabcontent, tablinks;
tabcontent = section.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Remove the background color of all tablinks/buttons
tablinks = section.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
// Show the specific tab content
section.getElementById(pageName).style.display = "block";
// Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
Also, you repeat element id values everywhere, this is not proper HTML and will lead to unexpected behavior. Each id should be unique. (you currently have multiple "defaultOpen" elements, you have multiple "Tab1", "Tab2", etc... rename them with no repeated values)
I am trying to do a side navigation that:
Just have ONE open sublist (close other)
Select only the clicked link in sublist
There are tons of examples out there, but I have not found any good sample in Vanilla Javascript.
HTML
<div class="sidenav">
Home
<button class="btn">Module 1</button>
<div class="list">
Link 1
Link 2
Link 3
</div>
<button class="btn">Module 2</button>
<div class="list">
Link 1
Link 2
Link 3
</div>
</div>
Javascript
var dropdown = document.getElementsByClassName("btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
The complete CSS is found on this Fiddle:
http://jsfiddle.net/q2en6djg/1/
Any clue, hint or help is appreciated.
You can consider an active CSS class to make it easier:
var dropdown = document.getElementsByClassName("btn");
var l = dropdown.length;
var i;
for (i = 0; i < l; i++) {
dropdown[i].addEventListener("click", function() {
for (var j = 0; j < l; j++) {
if (this != dropdown[j])
dropdown[j].classList.remove('active')
}
this.classList.toggle('active');
});
}
/*To select the sub item*/
var sub = document.querySelectorAll(".list a");
for (var i = 0; i < sub.length; i++) {
sub[i].addEventListener("click", function() {
this.classList.toggle('active');
});
}
* {
font-family: "Trebuchet MS", sans-serif;
font-size: 7em;
}
.sidenav {
margin-top: 0px;
height: auto;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #555;
overflow-x: hidden;
}
.sidenav a,
.btn {
padding: 10px 10px 10px 20px;
text-decoration: none;
font-size: 17px;
color: #fff;
display: block;
text-align: left;
border: none;
background: none;
width: 100%;
cursor: pointer;
outline: none;
border-bottom: 1px solid #777;
box-sizing:border-box;
}
.sidenav a:hover,
.sidenav a.active,
.btn:hover,
.btn.active {
background-color: #777;
}
.list {
display: none;
background-color: #999;
padding-left: 0px;
}
.active+.list {
display: block;
}
<div class="sidenav">
Home
<button class="btn">Module 1</button>
<div class="list">
Link 1
Link 2
Link 3
</div>
<button class="btn">Module 2</button>
<div class="list">
Link 1
Link 2
Link 3
</div>
</div>
I found some really helpful tutorial to help me use javascript to expand and collapse content, but now I can't figure out how to make it only expand one at a time... So that when one div is expanded, if you click to expand another one, it collapses the first one. Any ideas? Here is the tutorial that i have followed
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="collapsible"> Expand </button>
<div class="content">
<p>Some content</p>
</div>
You can select all the <div class="content"> and then set each of those to display: none. Snippet below:
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
//add new code here
var contents = document.querySelectorAll('div.content')
contents.forEach((content) => {
content.style.display = "none"
})
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<button class="collapsible"> Expand </button>
<div class="content">
<p>Some content</p>
</div>
<button class="collapsible"> Expand </button>
<div class="content">
<p>Some content2</p>
</div>
Hope this helps