What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

how to remove scroll bar from accordian

TitanXD

New member
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>

 
In order to hide the horizontal scroll bar in a webbrowser you can insert style"overflow-x:hidden" into the <html> tag, but not in the <body> tag.
 
Back
Top