We Keep Coding

Why show button is changing style each time i click it

I'm new to javascriptAnd I'm attempting to style the "show more" button. I added a text and a down arrow under it, but when I click it, the show less button "I don't know how to style it" appears with hidden content, then when I click it again, the show more button appears with no icon or style.
function toggleText() {
var showMoreText = document.getElementById("more");
var buttonText = document.getElementById("moreButton");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "inline";
buttonText.innerHTML = "Show More";
} else {
showMoreText.style.display = "inline";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
}
}
.pink {
color: #FF7B5F;
}
#more {
display: none;
}
#moreButton {
background-color: transparent;
border-color: transparent;
}
<span id="startpoint"></span>
<span id="more">
<div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
<a href="#">
<figure class="filter-container">
<img class="img-fluid brand-img" src="./images/filter/logo" alt="Logo">
<figcaption class="product-desc"><P>text</P></figcaption>
<figcaption class="product-desc2"><h4>text</h4></figcaption>
</figure>
</a>
</div>
</span>
<button onclick="toggleText()" id="moreButton">
<p class="pink">Show More</p>
<img class="more" src="./images/downarrow" alt="arrow">
</button>

Because you overriding the p tag iner the button. Use this selector var buttonText = document.querySelector("#moreButton p"); Like that:
function toggleText() {
var showMoreText = document.getElementById("more");
var buttonText = document.querySelector("#moreButton p");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "inline";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('green')
} else {
showMoreText.style.display = "inline";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('green')
}
}
.pink {
color: #FF7B5F;
}
#more {
display: none;
}
#moreButton {
background-color: transparent;
border-color: transparent;
}
.green {
color: green;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<span id="startpoint"></span>
<span id="more">
<div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
<a href="#">
<figure class="filter-container">
<img class="img-fluid brand-img" src="./images/filter/logo" alt="Logo">
<figcaption class="product-desc"><P>text</P></figcaption>
<figcaption class="product-desc2"><h4>text</h4></figcaption>
</figure>
</a>
</div>
</span>
<button onclick="toggleText()" id="moreButton">
<p class="pink">Show More</p>
<img class="more" src="./images/downarrow" alt="arrow">
</button>

Please try it. code is not proper. You have kept dive within the span.
function toggleText() {
var showMoreText = document.getElementById("more");
var buttonText = document.getElementById("moreButton");
var arrowBtn = document.getElementById("arrowButton");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "inline";
buttonText.innerHTML = "Show More";
arrowBtn.style.display = "inline";
} else {
showMoreText.style.display = "inline";
arrowBtn.style.display = "none";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
}
}
.pink {
color: #FF7B5F;
}
#more {
display: none;
}
#moreButton {
background-color: transparent;
border-color: transparent;
cursor: pointer
}
<span id="startpoint"></span>
<span id="more">
<div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
<a href="#">
<figure class="filter-container">
<img class="img-fluid brand-img" src="./images/filter/logo" alt="Logo">
<figcaption class="product-desc"><P>text</P></figcaption>
<figcaption class="product-desc2"><h4>text</h4></figcaption>
</figure>
</a>
</div>
</span>
<button onclick="toggleText()">
<span class="pink" id="moreButton">Show More</span>
<img class="more" src="./images/downarrow" alt="arrow" id="arrowButton">
</button>

How toggle elements inside this intersection observer?

I have a few elements I want to toggle wth a function, but by some reason I can't make it work. When the toggle function is executed, the console logs "cannot read the property classList of Undefined". But if I log them before the function starts I can see the elements.
Javascript
const toggle = element => {
element.classList.toggle('toggle');
};
let numberOfProyects = document.getElementsByClassName('portfolio__item'),
proyects = [],
for (var i = 0; i < numberOfProyects.length; i++) {
proyects[i] = document.getElementById(`proyect${i+1}`);
console.log(proyects[i]);
new IntersectionObserver(()=>{
toggle(proyects[i])
},{threshold: .6}).observe(proyects[i]);
};
HTML
<div class="portfolio__item toggle" id="proyect1">
<h3 class="portfolio__item-title">Podomoro Timer</h3>
<img class="portfolio__item-img" src="assets/images/Captura de pantalla (316).png">
<div class="portfolio__item-links">
<div class="overlay portfolio__item-links-overlay">
<a target="_blank" href="https://js-codetalker.github.io/Timer/" class="portfolio__item-links-overlay-link">
<img src="assets/images/world.svg" class="portfolio__item-links-overlay-link-img">
<p class="portfolio__item-links-overlay-link-txt">Go proyect</p>
</a>
</div>
<div class="overlay portfolio__item-links-overlay">
<a target="_blank" href="https://github.com/Js-codetalker/Timer" class="portfolio__item-links-overlay-link">
<img src="assets/images/github.svg" class="portfolio__item-links-overlay-link-img">
<p class="portfolio__item-links-overlay-link-txt">Go github</p>
</a>
</div>
</div>
</div>
<div class="portfolio__item toggle" id="proyect2">
<h3 class="portfolio__item-title">Sample Restaurant</h3>
<img class="portfolio__item-img" src="assets/images/Captura de pantalla (317).png">
<div class="portfolio__item-links">
<div class="overlay portfolio__item-links-overlay">
<a target="_blank" href="https://js-codetalker.github.io/restaurant-example/" class="portfolio__item-links-overlay-link">
<img src="assets/images/world.svg" class="portfolio__item-links-overlay-link-img">
<p class="portfolio__item-links-overlay-link-txt">Go proyect</p>
</a>
</div>
<div class="overlay portfolio__item-links-overlay">
<a target="_blank" href="https://github.com/Js-codetalker/restaurant-example" class="portfolio__item-links-overlay-link">
<img src="assets/images/github.svg" class="portfolio__item-links-overlay-link-img">
<p class="portfolio__item-links-overlay-link-txt">Go github</p>
</a>
</div>
</div>
</div>
What I want is to create a different observer for each element in order to remove the class "toggle" when it reach the expected space in the viewport

(almost) Always use let instead of var when defining variables inside for loops
Also, you don't need store your elements in second array.
const toggle = element => {
element.classList.toggle('toggle');
console.log(element);
};
const proyects = document.getElementsByClassName('portfolio__item');
for (let i = 0; i < proyects.length; i++) {
new IntersectionObserver(() => {
toggle(proyects[i])
}, {
threshold: .6
}).observe(proyects[i]);
};
.container
{
border: 1px solid black;
resize: both;
overflow: auto;
width: 20em;
height: 10em;
}
.container > :after
{
content: attr(id) " class is " attr(class);
}
.container > :not(.toggle) {
background-color: pink;
}
.container >.toggle {
background-color: lightgreen;
}
<div class="container">
<div class="portfolio__item toggle" id="proyect1">
<h3 class="portfolio__item-title">Podomoro Timer</h3>
</div>
<div class="portfolio__item" id="proyect2">
<h3 class="portfolio__item-title">Sample Restaurant (has not toggle by default)</h3>
</div>
<div class="portfolio__item toggle" id="proyect3">
<h3 class="portfolio__item-title">test</h3>
</div>
<div class="portfolio__item toggle" id="proyect4">
<h3 class="portfolio__item-title">test</h3>
</div>
</div>

audio play/pause button problem in multiline

we want make a audio toggle button play and pause like this script.
i have 15000 line and i want add every line audio button with different audio source.
i am using this source now if you gave me good suggestion or new script work for me thankful to you.
i want only one time save javascriptm, make change in html for every line.
if you want to check demo visit now
var count =0;
document.getElementById("toggle-button").onclick = function() {
if(count%2==0){
document.getElementById("player2").play();
document.getElementById("icons").classList.remove("fa-play-circle-o");
document.getElementById("icons").classList.add("fa-pause-circle-o");
}else{
document.getElementById("player2").pause();
document.getElementById("icons").classList.add("fa-play-circle-o");
document.getElementById("icons").classList.remove("fa-pause-circle-o");
}
count++;
}
.d-table {
display:table !important;
}
.d-table-cell {
display:table-cell !important;
}
.w-100 {
width: 100% !important;
}
.w-10 {
width: 8% !important;
}
.tar {
text-align: left !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class=" d-table w-100">
<p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
<div class="d-table-cell tar w-10">
<audio id="player2" src="http://www.mp3naat.com/download/owais-raza-qadri/mustafa-jaan-e-rehmat.mp3"></audio>
<a id="toggle-button"><i id="icons" class="fa fa-play-circle-o fa-2x"></i></a>
</div>
</div>

The HTML contains duplicate ids. You can substitute clsss for id and use .quesrySelectorAll() and .forEach() to attach click event to each element which plays or pauses <audio> element that is e.target.parentElement.previousElementSibling. The CSS needs to be adjusted as to icon display and toggling.
HTML
<div class=" d-table w-100">
<p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
<div class="d-table-cell tar w-10">
<audio class="player" src="http://www.mp3naat.com/download/owais-raza-qadri/mustafa-jaan-e-rehmat.mp3"></audio>
<a class="toggle-button"><i class="icons" class="fa fa-play-circle-o fa-2x">play</i></a>
</div>
</div>
<div class=" d-table w-100">
<p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
<div class="d-table-cell tar w-10">
<audio class="player" src="http://www.mp3naat.com/download/owais-raza-qadri/mein-jashn-e-aamad-e-sarkar.mp3"></audio>
<a class="toggle-button"><i class="icons" class="fa fa-play-circle-o fa-2x">play</i></a>
</div>
</div>
JavaScript
let toggleButtons = document.querySelectorAll('.toggle-button')
let handleToggle = e => {
console.log(e.target);
let audio = e.target.parentElement.previousElementSibling;
let icon = e.target.parentElement.firstElementChild;
if (audio.paused) {
audio.play();
icon.classList.remove("fa-play-circle-o");
icon.classList.add("fa-pause-circle-o");
} else {
if (!audio.paused) {
audio.pause();
icon.classList.add("fa-play-circle-o");
icon.classList.remove("fa-pause-circle-o");
}
}
}
toggleButtons.forEach(button => button.addEventListener('click', handleToggle));
jsfiddle https://jsfiddle.net/8z9uq5kL/

jQuery caoursel slider not updating width on window resize

I've recently added a slider to my page and after some tweaking it works fine apart from one issue - when I resize the window, specifically make it smaller, the slider is not centered anymore and at low resolution on firefox the arrows go outside the window, here's the code for the slider
$(function () {
console.log('DOM1');
$(document).ready(function () {
var speed = 6000;
var run = setInterval(rotate, speed);
var slides = $('.slide');
var container = $('#slides ul');
var width = $('#slides ul');
var elm = container.find(':first-child').prop("tagName");
var item_width = container.width();
var prev = 'prev'; //id of previous button
var next = 'next'; //id of next button
slides.width(item_width); //set the slides to the correct pixel width
container.parent().width(item_width);
container.width(slides.length * item_width); //set the slides container to the correct total width
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
$('#buttons a').click(function (e) {
if (container.is(':animated')) {
return false;
}
if (e.target.id === prev) {
container.stop().animate({
'left': 0
}, 1000, function () {
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
});
}
if (e.target.id === next) {
container.stop().animate({
'left': item_width * -2
}, 1000, function () {
container.find(elm + ':last').after(container.find(elm + ':first'));
resetSlides();
});
}
return false;
});
$('#carousel').mouseenter(function () {
clearInterval(run);
}).mouseleave(function () {
run = setInterval(rotate, speed);
});
function resetSlides() {
container.css({
'left': -1 * item_width
});
}
});
function rotate() {
$('#next').click();
}
});
#carousel {
position: relative;
width:100%;
margin-top: 10px;
flex-basis: 100%;
display: flex;
justify-content: center;
}
.btn-bar{
position: absolute;
width: 100%;
#media only screen and (max-width: 1200px) {
width: 100%;
}
z-index: 4;
}
#buttons a {
position: absolute;
text-align:center;
display:block;
font-size:50px;
float:left;
outline:0;
margin:-50px 60px;
color:#FFFFFF;
text-decoration:none;
padding:9px;
width:35px;
}
a#prev{
cursor: pointer;
left: 0;
width: 40px;
height: 40px;
border-bottom: 1px solid white;
border-left: 1px solid white;
transform: rotate(45deg);
#media only screen and (max-width: 720px) {
display: none;
}
}
a#next{
cursor: pointer;
right: 0;
width: 40px;
height: 40px;
border-top: 1px solid white;
border-right: 1px solid white;
transform: rotate(45deg);
#media only screen and (max-width: 720px) {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<title>OHIR — Imprint Media</title>
<link rel="stylesheet" href="./css/main.css">
<link rel="shortcut icon" href="images/3d5bb643659eb0b2a80acbe35c5073e5.png">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="container">
<div class="logo" id="OVERLAY"></div>
<div class="ohir"><p class="col">OHIR</p></div>
<nav class="col">
Książka
Fragment
Autor
<button>KUPUJĘ</button>
</nav>
</div>
<section class="OVERLAY hidden">
<a>MODERNIST CUISINE</a>
<a>IMPRINT MEDIA</a>
<a>WYDAWNICTWO BARBELO</a>
<button onclick="hideOverlayFunction()">POWRÓT</button>
</section>
</header>
<main>
<button onclick="topFunction()" id="myBtn" title="Go to top"><img src="images/arrow_up.svg"></button>
<section class="container OHIR">
<p>OHIR</p>
</section>
<section class="container ONBOARD">
<div class="book"></div>
<!--<img class='col' src="images/62d204dec2048b53e33842d869865586.png">-->
<div class="border">
<p> > Witaj na pokładzie Ohira.</p>
<p> > Kiedy będziesz gotowy na podróż w nieznane?</p>
<button>KUPUJĘ</button>
</div>
<div id="carousel">
<div class="btn-bar">
<div id="buttons"><a id="prev" onclick="prevFunction()"></a><a id="next" onclick="nextFunction()"></a> </div>
</div>
<div id="slides">
<ul>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase">Tak bardzo chciałbym odrodzić się jako Ohir.</span>
</p>
</div>
<div class="authorContainer">
<p class="quote-author HAL">HAL 9000</p>
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase">
Po przeczytaniu Ohira zbudowałem mój pierwszy ścigacz.</p>
</div>
<div class="authorContainer">
<p class="quote-author">Anakin Skywalker</p>
</div>
<div class="counter">
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase"></span>Chciałbym, żeby mój następny statek był taki, jak Ohir.</p>
</div>
<div class="authorContainer">
<p class="quote-author">Kapitan Jean-Luc Picard</p>
</div>
<div class="counter">
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase">Gdybym znów miał walczyć z cylinami, chciałbym mieć Ohira we flocie.</p>
</div>
<div class="authorContainer">
<p class="quote-author">Admirał William Adama</p>
</div>
</li>
</ul>
</div>
<div class="counter">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</section>
<a class="anchor" id="STORY"></a>
<section class="container STORY">
<video id="videoStory" onpause="pauseFunction()">
<source src="video/Ohir_fb%20video%20cover.mp4" type="video/mp4">
</video>
<button onclick="playFunction()" id="playBtn" title="play video">OHIR, OPOWIEDZ MI O KSIĄŻCE</button>
</section>
<section class="container FRAGMENT">
<a class="anchor" id="FRAGMENT"></a>
<div class="book"></div>
<div class="col">
<h3>ZAINTERESOWANY?</h3>
<p>Przeczytaj darmowy fragment i dowiedz się jak zaczyna się przygoda z Ohirem. Wpisz swój adres e-mail, aby otrzymać PDF</p>
<!--<input type="email" placeholder="e-mail">-->
<form action="http://YOURWEBSITE/index.php?option=com_acymailing&ctrl=sub" method="post">
<input id="user_email" type="text" name="user[email]" value="" placeholder="e-mail" />
</form>
<button>PROSZĘ O FRAGMENT</button>
</div>
<div class="AUTHOR">
<a class="anchor" id="AUTHOR"></a>
<h3>SZCZEPAN AUGUST URAWSKI</h3>
<span><p>Autor Ohira. Urodzony drogą naturalną w Warszawie, niemodyfikowany, bez dotacji unijnych. Rocznik 1983. Losy poprowadziły go ku ziemiom obcym, gdzie pracuje, tęskni, marzy i pisze. Pisał od kiedy pamięta. Bywały to scenariusze. Ku jego zaskoczeniu powstała też ogromna i fascynująca powieść SF.</p></span>
</div>
</section>
<section class="mobile author">
<div class="mobileAUTHOR">
<h3>SZCZEPAN AUGUST URAWSKI</h3>
<span><p>Autor Ohira.<br> Urodzony drogą naturalną w Warszawie, niemodyfikowany, bez dotacji unijnych. Rocznik 1983. Losy poprowadziły go ku ziemiom obcym, gdzie pracuje, tęskni, marzy i pisze. Pisał od kiedy pamięta. Bywały to scenariusze. Ku jego zaskoczeniu powstała też ogromna i fascynująca powieść SF.</p></span>
</div>
</section>
<section class="container SHOP">
<div class="book"></div>
<div class="border">
<h3>KUP KSIĄŻKĘ</h3>
<span> > Piękne wydanie Ohira</span>
<span> > 432 strony tekstu</span>
<span> > Sprawna i tania wysyłka kurierska za 9.90</span>
<h2 class="price">30 PLN</h2>
<button>KUPUJĘ</button>
</div>
</section>
<section class="container FOUR">
<div class="book"></div>
<div class="border">
<h3>ZESTAW CZTERECH KSIĄŻEK</h3>
<span> > Cztery książki drukowane</span>
<span> > 432 stron każda</span>
<span> > Sprawna i tania wysyłka kurierska za 9.90</span>
<div class="priceROW"><h2 class="price">99 PLN </h2><button>KUPUJĘ</button></div>
</div>
</section>
</main>
<footer>
<img class="col" src="./images/Imprint%20Media_logo.svg">
<span>
<p><b>Imprint Media Agencja Wydawnicza</b></p>
<p>ul. Chmielna 2/31</p>
<p>00-020 Warszawa</p>
</span>
<div class="line"></div>
<span>
<p>Znajdź nas na Facebooku!</p>
<p>tel. 22 24 15018</p>
<p>sklep#imprintmedia.pl</p>
</span>
<div class="line"></div>
<span>
<p>Jak wydać książkę?</p>
<p>Poznaj ofertę Imprint Media</p>
<p>Projektowanie i dystrybucja książek</p>
</span>
</footer>
</body>
I really need help with this, if anyone could help me, that would be great.
Thank you!

Close Dropdown when Selecting Another

How can I amend this JavaScript code that will hide an open dropdown if another dropdown is selected? The original code came from the W3.CSS documentations, but I'm unsure of how to amend it. I tried replacing w3-show with w3-hide, tried removing and adding the classes within the JavaScript, but nothing seems to be doing the trick.
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("mySidebar");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
$('body').addClass("fixedPosition"); /* prevents page from scrolling when mobile navbar is open */
} else {
x.className = x.className.replace(" w3-show", "");
$('body').removeClass("fixedPosition");
}
}
//dropdowns on mobile nav
function myDropFunc(dropParam) {
var x = document.getElementById(dropParam);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-light-grey";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-light-grey", "");
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<div class="w3-sidebar w3-bar-block w3-card-2 w3-animate-right" style="width: 100%;" id="mySidebar">
<div class="w3-panel w3-display-container w3-padding-large">
<span onclick="myFunction()" class="w3-button w3-red w3-display-topright" style="margin-top: -22px;"><i class="fa fa-times fa-2x" aria-hidden="true"></i></span>
</div>
<div class="w3-dropdown-click w3-border-bottom">
<button class="w3-button w3-padding-large w3-text-black w3-border-bottom" onclick="myDropFunc('it-services')">IT SERVICES <i class="fa fa-caret-down"></i></button>
<div id="it-services" class="w3-dropdown-content w3-bar-block w3-card-2" style="z-index: 1000;">
IT Support
Managed IT Services
Network Design and Administration
IT Disaster Recovery
</div>
</div>
<div class="w3-dropdown-click w3-border-bottom">
<button class="w3-button w3-padding-large w3-text-black w3-border-bottom" onclick="myDropFunc('web-services')">WEB SERVICES <i class="fa fa-caret-down"></i></button>
<div id="web-services" class="w3-dropdown-content w3-bar-block w3-card-2" style="z-index: 1000;">
Website Support
Web Design Package
Affordable SEO
</div>
</div>
</div>

What you can do is hide all w3-dropdown-content before you show the dropdown that was clicked.
To do this you can amend myDropFunc(...) to close all content before it shows the clicked content
Here is the relevant piece of code to do this in that function. It gets all content by the classname w3-dropdown-content and iterates through each node to remove the w3-show class (whether it has it or not)
var allDropDownContent = document.getElementsByClassName("w3-dropdown-content");
for (var i = 0; i < allDropDownContent.length; i++) {
allDropDownContent[i].className = allDropDownContent[i].className.replace(" w3-show", "");
}
and a full working example
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("mySidebar");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
$('body').addClass("fixedPosition"); /* prevents page from scrolling when mobile navbar is open */
} else {
x.className = x.className.replace(" w3-show", "");
$('body').removeClass("fixedPosition");
}
}
//dropdowns on mobile nav
function myDropFunc(dropParam) {
// close all drop down content before showing clicked one.
var x = document.getElementById(dropParam);
if (x.className.indexOf("w3-show") == -1) {
var allDropDownContent = document.getElementsByClassName("w3-dropdown-content");
for (var i = 0; i < allDropDownContent.length; i++) {
allDropDownContent[i].className = allDropDownContent[i].className.replace(" w3-show", "");
}
x.className += " w3-show";
x.previousElementSibling.className += " w3-light-grey";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-light-grey", "");
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<div class="w3-sidebar w3-bar-block w3-card-2 w3-animate-right" style="width: 100%;" id="mySidebar">
<div class="w3-panel w3-display-container w3-padding-large">
<span onclick="myFunction()" class="w3-button w3-red w3-display-topright" style="margin-top: -22px;"><i class="fa fa-times fa-2x" aria-hidden="true"></i></span>
</div>
<div class="w3-dropdown-click w3-border-bottom">
<button class="w3-button w3-padding-large w3-text-black w3-border-bottom" onclick="myDropFunc('it-services')">IT SERVICES <i class="fa fa-caret-down"></i></button>
<div id="it-services" class="w3-dropdown-content w3-bar-block w3-card-2" style="z-index: 1000;">
IT Support
Managed IT Services
Network Design and Administration
IT Disaster Recovery
</div>
</div>
<div class="w3-dropdown-click w3-border-bottom">
<button class="w3-button w3-padding-large w3-text-black w3-border-bottom" onclick="myDropFunc('web-services')">WEB SERVICES <i class="fa fa-caret-down"></i></button>
<div id="web-services" class="w3-dropdown-content w3-bar-block w3-card-2" style="z-index: 1000;">
Website Support
Web Design Package
Affordable SEO
</div>
</div>
</div>