We Keep Coding

How To Switch Tab Automatically

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>

Accordion panel extra expand

Our website uses an accordion with collapsible panels. Inside one of the accordion panels there are a couple of checkboxes that can be checked or unchecked. Checkbox 1 -if checked- shows another set of two checkboxes but the accordion panel does not expand when the hidden checkboxes show.
How do I make the accordion panel also expand when the new checkboxes appear?
The below HTML + CSS + JS is being used.
// Accordion panels
var acc = document.getElementsByClassName("troubleshooter-accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
// Hide checkboxes
function showextra() {
var checkBox = document.getElementById("check1a");
var extra = document.getElementById("checkbox1a-extra");
if (checkBox.checked == true){
extra.style.display = "block";
} else {
extra.style.display = "none";
}
}
.troubleshooter-accordion {
background-color: rgba(0,175,75,1.00);
border: 1px solid rgba(0,175,75,1.00);
color: rgba(255,255,255,1.00);
padding: 16px;
cursor: pointer;
width: 100%;
text-align: center;
outline: none;
font-size: 1.15em;
transition: 0.4s;
margin-top: 2px;
border-radius: 8px;
}
.active, .troubleshooter-accordion:hover {
background-color: rgba(255,255,255,1.00);
border: 1px solid rgba(0,145,255,1.00);
color: rgba(0,145,255,1.00);
}
.troubleshooter-panel {
padding: 0 16px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
border-radius: 8px;
}
.troubleshooter-panel h4 {
margin: 16px 0
}
.infobox {
border: 2px solid rgba(0,175,75,1.00);
border-radius: 8px;
margin-top: 16px;
padding: 24px 16px;
}
.checkbox-extra {
display: none;
margin-left: 24px;
}
<button class="troubleshooter-accordion">Accordion</button>
<div class="troubleshooter-panel">
<h4 align="center">Check the boxes below</h4>
<hr>
<p>
<label><input type="checkbox" id="check1a" name="check1a" value="check1a" class="check1a" onclick="showextra()"> Checkbox 1</label>
<div class="checkbox-extra" id="checkbox1a-extra">
<p>
<label><input type="checkbox" id="check1a1" name="check1a1" value="check1a1" class="check1a1"> Checkbox 1-A</label><br>
<label><input type="checkbox" id="check1a2" name="check1a2" value="check1a2" class="check1a2"> Checkbox 1-B</label>
</p>
</div>
<hr>
</p>
<p>
<label><input type="checkbox" id="check1b" name="check1b" value="check1b" class="check1b"> Checkbox 2</label>
</p>
<hr>
</div>

When you expand the accordion the first time you are setting it's max-height value by:
panel.style.maxHeight = panel.scrollHeight + "px";
When you are expanding the accordion a second time, this should ofcourse happen again or else the max-height stays the same.
To fix this, you can simply look for the parent panel from the checkbox and set the max-height again:
var panel = checkBox.closest('.troubleshooter-panel');
panel.style.maxHeight = panel.scrollHeight + "px";
Full code:
// Accordion panels
var acc = document.getElementsByClassName("troubleshooter-accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
// Hide checkboxes
function showextra() {
var checkBox = document.getElementById("check1a");
var extra = document.getElementById("checkbox1a-extra");
if (checkBox.checked == true){
extra.style.display = "block";
var panel = checkBox.closest('.troubleshooter-panel');
panel.style.maxHeight = panel.scrollHeight + "px";
} else {
extra.style.display = "none";
var panel = checkBox.closest('.troubleshooter-panel');
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
.troubleshooter-accordion {
background-color: rgba(0,175,75,1.00);
border: 1px solid rgba(0,175,75,1.00);
color: rgba(255,255,255,1.00);
padding: 16px;
cursor: pointer;
width: 100%;
text-align: center;
outline: none;
font-size: 1.15em;
transition: 0.4s;
margin-top: 2px;
border-radius: 8px;
}
.active, .troubleshooter-accordion:hover {
background-color: rgba(255,255,255,1.00);
border: 1px solid rgba(0,145,255,1.00);
color: rgba(0,145,255,1.00);
}
.troubleshooter-panel {
padding: 0 16px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
border-radius: 8px;
}
.troubleshooter-panel h4 {
margin: 16px 0
}
.infobox {
border: 2px solid rgba(0,175,75,1.00);
border-radius: 8px;
margin-top: 16px;
padding: 24px 16px;
}
.checkbox-extra {
display: none;
margin-left: 24px;
}
<button class="troubleshooter-accordion">Accordion</button>
<div class="troubleshooter-panel">
<h4 align="center">Check the boxes below</h4>
<hr>
<p>
<label><input type="checkbox" id="check1a" name="check1a" value="check1a" class="check1a" onclick="showextra()"> Checkbox 1</label>
<div class="checkbox-extra" id="checkbox1a-extra">
<p>
<label><input type="checkbox" id="check1a1" name="check1a1" value="check1a1" class="check1a1"> Checkbox 1-A</label><br>
<label><input type="checkbox" id="check1a2" name="check1a2" value="check1a2" class="check1a2"> Checkbox 1-B</label>
</p>
</div>
<hr>
</p>
<p>
<label><input type="checkbox" id="check1b" name="check1b" value="check1b" class="check1b"> Checkbox 2</label>
</p>
<hr>
</div>

Why does JavaScript write an element to the console but not update the css display value via a function?

I'm completing an assignment for university as part of a group. We have encountered an issue with a certain event not triggering when using JavaScript to change css properties on button click. We are not looking for anyone to write/re-write our code to be industry standard, but we are looking to work out (with a little help from you) where we have gone wrong.
We are tasked with writing a report and presenting it in webpage format.
We are writing the page using HTML/CSS and a small amount of JavaScript for things like drop-down menus and displaying sections of the page on button click.
The particular issue we can't work out (code below) is when a menu button is clicked, the JS should populate the heading of the page and display a div in the body.
I can either get it to work as intended, though only 3 div are referenced (the code seems to ignore the array elements after the 3rd), or get it to work with all headings but no div are referenced (per below).
CMVE as follows (full code below):
let sections = ["Cooper", "Jenna", "Lyly", "Mick", "Samuel", "Stanton", "Welcome"];
var visSection = null;
/* var i;
for (i=0; i<sections.length;i++) {
console.log(sections[i]);
}
*/
function changeActiveSection(sectionID) {
if (visSection === sectionID) {
visSection = null;
} else {
visSection = sectionID;
}
hideSections();
}
function hideSections() {
var i, targetSection, headerText;
for (i = 0; i < sections.length; i++) {
targetSection = sections[i];
section = document.getElementById(visSection);
if (visSection === targetSection) {
// console.log(visSection, targetSection, section);
section.style.display = "block";
headerText = visSection;
} else {
section.style.display = "none";
}
populateHeader(headerText);
}
}
function populateHeader(headerText) {
var ob;
ob = document.getElementById("header-content");
ob.innerText = headerText;
}
<!doctype HTML>
<html>
<body>
<header>
<h1 id="header-content" style="display: block;">Welcome to The A2-Group-12 Team</h1>
</header>
Stanton
<div id="Stanton" class="body-panel" style="display: none;">
<h2> this is a placeholder heading </h2>
<p> this is some placeholder body text. </p>
<p> Stanton </p>
</div>
<script>
//Insert JS from JS snippet
</script>
</body>
</html>
I feel we may be misunderstanding a datatype somewhere perhaps, but we are all still learning and have been staring at this for days (the issue is probably right in front of our eyes!).
Full code Snippet with CSS:
let sections = ["Cooper", "Jenna", "Lyly", "Mick", "Samuel", "Stanton", "Welcome"];
var visSection = null;
var i;
for (i = 0; i < sections.length; i++) {
console.log(sections[i]);
}
function changeActiveSection(sectionID) {
if (visSection === sectionID) {
visSection = null;
} else {
visSection = sectionID;
}
hideSections(visSection);
}
function hideSections(sectionID2) {
var i, targetSection, headerText;
for (i = 0; i < sections.length; i++) {
targetSection = sections[i];
section = document.getElementById(sectionID2);
if (visSection === targetSection) {
console.log(visSection, targetSection, section);
section.style.display = "block";
headerText = visSection;
} else {
section.style.display = "none";
}
populateHeader(headerText);
}
}
function populateHeader(headerText) {
var ob;
ob = document.getElementById("header-content");
ob.innerText = headerText;
}
var dropdown = document.getElementsByTagName("button");
var i, objCol;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
/*Sets the font family for entire page.
removes entire margin for body section to create borderless display.*/
body {
font-family: Arial, Veranda, Serif;
margin: 0;
}
/*Sets attributes for the nav menu root element*/
#nav-menu {
height: 100%;
width: 15%;
position: fixed;
top: 0;
left: 0;
background-color: #353940;
overflow-x: hidden;
text-decoration: none;
text-align: center;
z-index: 1;
}
/*specifies hyperlink button text attributes*/
#nav-menu a {
text-decoration: none;
color: white;
font-size: 12pt;
display: block;
border-top: 1px solid white;
overflow: visible;
height: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
/*Specifies most dropdown button attributes.*/
button.drop-button {
text-decoration: none;
background-color: #353940;
border: 0;
width: 100%;
color: white;
height: 20px;
outline: none;
font-size: 12pt;
border-top: 1px solid white;
overflow: visible;
padding-top: 5px;
padding-bottom: 5px;
}
/*Active class to highlight activated dropdown buttons*/
button.active {
background: #230fa8;
}
/*container class for dropdown menu items - hidden by default (display is manupulated via JS)*/
.dropdown-content {
display: none;
background-color: #4a5059;
}
/*specifies layout for dropdown menu items*/
.dropdown-content a {
display: block;
padding-top: 5px;
}
/*keeps header in line with rest of body*/
#header-content {
padding-left: 17%;
}
/*specifies positioning for body container divs*/
.body-panel {
position: absolute;
padding-left: 17%;
width: 75%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" meta charset="utf-8" />
<title>Assignment 2 Group 12</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1 id="header-content" style="display: block;">Welcome to The A2-Group-12 Team</h1>
</header>
<main>
<nav id="nav-menu">
Home
<button class="drop-button">About Us &#x25BC </button>
<div class="dropdown-content" style="display: none;">
Stanton
Jenna
Cooper
</div>
<button class="drop-button">Profile ▼</button>
<div class="dropdown-content">
Test
</div>
IT Work
Industry Data
Our Project
IT Technologies
</nav>
<div id="Welcome" class="body-panel" style="display: none;">
<h2> </h2>
<p> Please select an option from the menu. </p>
</div>
<div id="Stanton" class="body-panel" style="display: none;">
<h2> this is a placeholder heading </h2>
<p> this is some placeholder body text. </p>
<p> Stanton </p>
</div>
<div id="Jenna" class="body-panel" style="display: none;">
<h2> this is a placeholder heading </h2>
<p> this is some placeholder body text. </p>
<p> Jenna </p>
</div>
<div id="Cooper" class="body-panel" style="display: none;">
<h2> this is a placeholder heading </h2>
<p> this is some placeholder body text. </p>
<p> Cooper </p>
</div>
</main>
<footer>
</footer>
<script>
//JS from snippet goes here
</script>
</body>
</html>

let sections = ["Cooper", "Jenna", "Lyly", "Mick", "Samuel", "Stanton", "Welcome"];
var visSection = null;
var i;
for (i = 0; i < sections.length; i++) {
console.log(sections[i]);
}
function changeActiveSection(sectionID) {
if (visSection === sectionID) {
visSection = null;
} else {
visSection = sectionID;
}
hideSections(visSection);
}
function hideSections(sectionID2) {
var i, targetSection, headerText;
for(i = 0; i < sections.length; i++) {
targetSection = sections[i];
section = document.getElementById(targetSection);
if(visSection === targetSection) {
console.log(visSection, targetSection, section);
section.style.display = "block";
populateHeader(visSection); // moved to here as per Andreas point
} else {
if (typeof(section) != 'undefined' && section != null){
section.style.display = "none";
}
}
//populateHeader(headerText); <- move as per Andreas point
}
}
function populateHeader(headerText) {
var ob;
ob = document.getElementById("header-content");
ob.innerText = headerText;
}
var dropdown = document.getElementsByTagName("button");
var i, objCol;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
/*Sets the font family for entire page.
removes entire margin for body section to create borderless display.*/
body {
font-family: Arial, Veranda, Serif;
margin: 0;
}
/*Sets attributes for the nav menu root element*/
#nav-menu {
height: 100%;
width: 15%;
position: fixed;
top: 0;
left: 0;
background-color: #353940;
overflow-x: hidden;
text-decoration: none;
text-align: center;
z-index: 1;
}
/*specifies hyperlink button text attributes*/
#nav-menu a {
text-decoration: none;
color: white;
font-size: 12pt;
display: block;
border-top: 1px solid white;
overflow: visible;
height: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
/*Specifies most dropdown button attributes.*/
button.drop-button {
text-decoration: none;
background-color: #353940;
border: 0;
width: 100%;
color: white;
height: 20px;
outline: none;
font-size: 12pt;
border-top: 1px solid white;
overflow: visible;
padding-top: 5px;
padding-bottom: 5px;
}
/*Active class to highlight activated dropdown buttons*/
button.active {
background: #230fa8;
}
/*container class for dropdown menu items - hidden by default (display is manupulated via JS)*/
.dropdown-content {
display: none;
background-color: #4a5059;
}
/*specifies layout for dropdown menu items*/
.dropdown-content a {
display: block;
padding-top: 5px;
}
/*keeps header in line with rest of body*/
#header-content {
padding-left: 17%;
}
/*specifies positioning for body container divs*/
.body-panel {
position: absolute;
padding-left: 17%;
width: 75%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" meta charset="utf-8" />
<title>Assignment 2 Group 12</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1 id="header-content" style="display: block;">Welcome to The A2-Group-12 Team</h1>
</header>
<main>
<nav id="nav-menu">
Home
<button class="drop-button">About Us &#x25BC </button>
<div class="dropdown-content" style="display: none;">
Stanton
Jenna
Cooper
</div>
<button class="drop-button">Profile ▼</button>
<div class="dropdown-content">
Test
</div>
IT Work
Industry Data
Our Project
IT Technologies
</nav>
<div id="Welcome" class="body-panel" style="display: none;">
<h2> </h2>
<p> Please select an option from the menu. </p>
</div>
<div id="Stanton" class="body-panel" style="display: none;">
<h2> this is a placeholder heading </h2>
<p> this is some placeholder body text. </p>
<p> Stanton </p>
</div>
<div id="Jenna" class="body-panel" style="display: none;">
<h2> this is a placeholder heading </h2>
<p> this is some placeholder body text. </p>
<p> Jenna </p>
</div>
<div id="Cooper" class="body-panel" style="display: none;">
<h2> this is a placeholder heading </h2>
<p> this is some placeholder body text. </p>
<p> Cooper </p>
</div>
</main>
<footer>
</footer>
<script>
//JS from snippet goes here
</script>
</body>
</html>

The problem lies in your for loop.
You are passing in the sectionID2 so it is always the item selected and stored as section.
You loop sets the visibility of the item for every iteration instead of the current section that is being tested against.
change section = document.getElementById(sectionID2); to section = document.getElementById(targetSection); and it should work (untested).
for(i = 0; i < sections.length; i++) {
targetSection = sections[i];
section = document.getElementById(targetSection);
if(visSection === targetSection) {
console.log(visSection, targetSection, section);
section.style.display = "block";
populateHeader(visSection); // moved to here as per Andreas point
} else {
section.style.display = "none";
}
//populateHeader(headerText); <- move as per Andreas point
}

Manage dropdown lists in a sidenav

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>

How to align center an accordion in CSS?

There is an accordion on the left container of my webpage which is left aligned by default. I am using CSS to align it center. I have tried using position: center, align: left and margin-left: 5px in the CSS code but those are not working. Can anyone help me out. Thanks in advance.
Here is my code for CSS:
var acc_leftpanel = document.getElementsByClassName("accordion_leftpanel");
var i;
for (i = 0; i < acc_leftpanel.length; i++) {
acc_leftpanel[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + 'px';
}
}
}
button.accordion_leftpanel {
background-color: #2da0d9;
color: #444;
cursor: pointer;
padding: 5px;
width: 60%;
border: none;
align: center;
text-align: center;
outline: none;
font-size: 12px;
transition: 0.4s;
border-radius: 25px;
}
button.accordion_leftpanel.active,
button.accordion_leftpanel:hover {
background-color: #5ebb61;
}
button.accordion_leftpanel:after {
color: #ffffff;
font-weight: bold;
float: center;
margin-left: 8px;
}
<div class="leftcontentborder">
<p align="center">LIST OF SOLVED PAPERS</p>
<button class="accordion_leftpanel" align="center">June 2014</button>
<div class="panel">
<p>Paper 2</p>
<p>Paper 3</p>
</div>
</div>

Center using using margin, margin: 0 auto;
Also, check out https://developer.mozilla.org/en-US/docs/Web/CSS

You can add a class to your CSS if you want to center the all inside leftcontentborder.
.leftcontentborder {
text-align: center;
}