I am new to html and I somehow to managed to get an accordian but i am unable to remove the scroll bar : link to website https://memeral.com/commands
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: visible;
}
</style>
</head>
<body>
<h2>Commands</h2>
<button class="accordion">Uncategorized commands</button>
<div class="panel">
<p><meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
display: none;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'Command1')">COmmand 1</button>
<button class="tablinks" onmouseover="openCity(event, 'Command2')">Command 2</button>
<button class="tablinks" onmouseover="openCity(event, 'Command3')">Command 3</button>
<button class="tablinks" onmouseover="openCity(event, 'Command4')">COmmand 4</button>
<button class="tablinks" onmouseover="openCity(event, 'Command5')">Command 5</button>
<button class="tablinks" onmouseover="openCity(event, 'Command6')">Command 6</button>
<button class="tablinks" onmouseover="openCity(event, 'Command7')">COmmand 7</button>
<button class="tablinks" onmouseover="openCity(event, 'Command8')">Command 8</button>
<button class="tablinks" onmouseover="openCity(event, 'Command9')">Command 9</button>
<button class="tablinks" onmouseover="openCity(event, 'Command10')">Command 10</button>
<button class="tablinks" onmouseover="openCity(event, 'Command11')">Command 11</button>
</div>
<div id="Command1" class="tabcontent">
<h3>help</h3>
<p>Shows all commands available. Click on the arrow reactions to change page. Usage: >help</p>
</div>
<div id="Command2" class="tabcontent">
<h3>report</h3>
<p>Report command can be used to report a bug related to Memeral. Usage: >report explain-bug-here</p>
</div>
<div id="Command3" class="tabcontent">
<h3>suggest</h3>
<p>Suggest command can be used to suggest a feature or command to Memeral. Usage: >suggest new-feature-or-command-explained</p>
</div>
<div id="Command4" class="tabcontent">
<h3>choose</h3>
<p>Choose command chooses one of the arguments you give randomly. Usage: >choose Freeway, Faggio, NRG-500</p>
</div>
<div id="Command5" class="tabcontent">
<h3>discord</h3>
<p>Discord command sends you the invite link to Memeral's Discord server. Usage: >discord</p>
</div>
<div id="Command6" class="tabcontent">
<h3>embed</h3>
<p>Embed command lets you create an embed message. You can type whatever you want in it. Some people use it to make a to-do list. Note that you can find all possible colors from the last page of >help command. Usage: >embed Your-Title-Here, Text-Of-Your-Choice, Color</p>
</div>
<div id="Command7" class="tabcontent">
<h3>pfp</h3>
<p>This command sends yours or the target individuals profile picture in chat as a message. Usage: >pfp @name</p>
</div>
<div id="Command8" class="tabcontent">
<h3>rep</h3>
<p>This command lets you give someone you like an reputation point. Usage: >rep @name</p>
</div>
<div id="Command9" class="tabcontent">
<h3>sign</h3>
<p>Sign command lets you draw a something very clever on a sign. Usage: >sign hello!</p>
</div>
<div id="Command10" class="tabcontent">
<h3>urban</h3>
<p>Urban command can be used to search for a word from Urban Dictionary. Usage: >urban word</p>
</div>
<div id="Command11" class="tabcontent">
<h3>vote</h3>
<p>Vote command starts a vote in a channel of your choice. Usage: >vote #channel what-ever-you-are-voting-about</p>
</div>
<div class="clearfix"></div>
</p>
</div>
<button class="accordion">Music commands</button>
<div class="panel">
<p>enter commands are preference.</p>
</div>
<button class="accordion">Currency and gambling commands</button>
<div class="panel">
<p>enter commands are preference.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc.addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent.style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks.className = tablinks.className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: visible;
}
</style>
</head>
<body>
<h2>Commands</h2>
<button class="accordion">Uncategorized commands</button>
<div class="panel">
<p><meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
display: none;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'Command1')">COmmand 1</button>
<button class="tablinks" onmouseover="openCity(event, 'Command2')">Command 2</button>
<button class="tablinks" onmouseover="openCity(event, 'Command3')">Command 3</button>
<button class="tablinks" onmouseover="openCity(event, 'Command4')">COmmand 4</button>
<button class="tablinks" onmouseover="openCity(event, 'Command5')">Command 5</button>
<button class="tablinks" onmouseover="openCity(event, 'Command6')">Command 6</button>
<button class="tablinks" onmouseover="openCity(event, 'Command7')">COmmand 7</button>
<button class="tablinks" onmouseover="openCity(event, 'Command8')">Command 8</button>
<button class="tablinks" onmouseover="openCity(event, 'Command9')">Command 9</button>
<button class="tablinks" onmouseover="openCity(event, 'Command10')">Command 10</button>
<button class="tablinks" onmouseover="openCity(event, 'Command11')">Command 11</button>
</div>
<div id="Command1" class="tabcontent">
<h3>help</h3>
<p>Shows all commands available. Click on the arrow reactions to change page. Usage: >help</p>
</div>
<div id="Command2" class="tabcontent">
<h3>report</h3>
<p>Report command can be used to report a bug related to Memeral. Usage: >report explain-bug-here</p>
</div>
<div id="Command3" class="tabcontent">
<h3>suggest</h3>
<p>Suggest command can be used to suggest a feature or command to Memeral. Usage: >suggest new-feature-or-command-explained</p>
</div>
<div id="Command4" class="tabcontent">
<h3>choose</h3>
<p>Choose command chooses one of the arguments you give randomly. Usage: >choose Freeway, Faggio, NRG-500</p>
</div>
<div id="Command5" class="tabcontent">
<h3>discord</h3>
<p>Discord command sends you the invite link to Memeral's Discord server. Usage: >discord</p>
</div>
<div id="Command6" class="tabcontent">
<h3>embed</h3>
<p>Embed command lets you create an embed message. You can type whatever you want in it. Some people use it to make a to-do list. Note that you can find all possible colors from the last page of >help command. Usage: >embed Your-Title-Here, Text-Of-Your-Choice, Color</p>
</div>
<div id="Command7" class="tabcontent">
<h3>pfp</h3>
<p>This command sends yours or the target individuals profile picture in chat as a message. Usage: >pfp @name</p>
</div>
<div id="Command8" class="tabcontent">
<h3>rep</h3>
<p>This command lets you give someone you like an reputation point. Usage: >rep @name</p>
</div>
<div id="Command9" class="tabcontent">
<h3>sign</h3>
<p>Sign command lets you draw a something very clever on a sign. Usage: >sign hello!</p>
</div>
<div id="Command10" class="tabcontent">
<h3>urban</h3>
<p>Urban command can be used to search for a word from Urban Dictionary. Usage: >urban word</p>
</div>
<div id="Command11" class="tabcontent">
<h3>vote</h3>
<p>Vote command starts a vote in a channel of your choice. Usage: >vote #channel what-ever-you-are-voting-about</p>
</div>
<div class="clearfix"></div>
</p>
</div>
<button class="accordion">Music commands</button>
<div class="panel">
<p>enter commands are preference.</p>
</div>
<button class="accordion">Currency and gambling commands</button>
<div class="panel">
<p>enter commands are preference.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc.addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent.style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks.className = tablinks.className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
