A simpler way to code this onclick background change - HTML/CSS

Question

Is there a way to simplify this code? I just find it too long for a simple function.

I tried to use querySelectorAll(), but I had a hard time trying to re-code it.

Please see snippet included.

I tried to look for a simplier way, unfortunately I am unable to find any.

function myFunction() {
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");
if (moreText.style.display === "none") {
    moreText.style.display = "inline";
  document.getElementById("more2").style.display = 'none';
  document.getElementById("myBtn").style.backgroundColor = "#000000";
  document.getElementById("myBtn2").style.backgroundColor = "#006668";
} else {
    moreText.style.display = "inline";
  document.getElementById("more2").style.display = 'none';
  document.getElementById("myBtn").style.backgroundColor = "#000000";
  document.getElementById("myBtn2").style.backgroundColor = "#006668";
  } } 
  function myFunction2() {
  var moreText = document.getElementById("more2");
  var btnText = document.getElementById("myBtn2");
if (moreText.style.display === "none") {
    moreText.style.display = "inline";
  document.getElementById("more").style.display = 'none';
  document.getElementById("myBtn").style.backgroundColor = "#006668";
  document.getElementById("myBtn2").style.backgroundColor = "#000000";
} else {
    moreText.style.display = "inline";
  document.getElementById("more").style.display = 'none';
  document.getElementById("myBtn").style.backgroundColor = "#006668";
  document.getElementById("myBtn2").style.backgroundColor = "#000000";
  } } 
   function myFunction3() {
  var moreText = document.getElementById("more3");
  var btnText = document.getElementById("myBtn3");
if (moreText.style.display === "none") {
    moreText.style.display = "inline";
  document.getElementById("more").style.display = 'none';
  document.getElementById("more2").style.display = 'none';
  document.getElementById("myBtn").style.backgroundColor = "#006668";
  document.getElementById("myBtn2").style.backgroundColor = "#006668";
} else {
   moreText.style.display = "inline";
  document.getElementById("more").style.display = 'none';
  document.getElementById("more2").style.display = 'none';
  document.getElementById("myBtn").style.backgroundColor = "#006668";
  document.getElementById("myBtn2").style.backgroundColor = "#006668";
  } } 

div.scrollmenu {
  background-color: #006668;
  overflow: auto;
  white-space: nowrap;
}
#more {display: none;}
#more2 {display: none;}

<div class="scrollmenu">
  <a onclick="myFunction()" id="myBtn" href="#Event1">Event 1</a>
  <a onclick="myFunction2()" id="myBtn2" href="#Event2">Event 2</a>
  </div>
  <span id="more">Display Event Here 1.</span>
<span id="more2">Display Event Here 2.</span>

It's supposed to look like this

Answer 1

You can do something like that:

const myBtns = document.querySelectorAll(".myBtn");
const descriptions = document.querySelectorAll(".description");

function myFunction(e) {
	myBtns.forEach( btn => {		
		btn.classList.remove("active");
	});
	
	descriptions.forEach( description => {
		description.classList.remove("show");	   
	});
	e.target.classList.add("active");
	document.querySelector("."+e.target.getAttribute("data-show")).classList.add("show");
}

div.scrollmenu {
  background-color: orange;
}
.hide {
	display: none;
}

.show {
	display: block;
}

.active {
	background-color: green;
}

<div class="scrollmenu">
	<a onclick="myFunction(event)" class="myBtn" href="#Event1" data-show="more">Event 1</a>
	<a onclick="myFunction(event)" class="myBtn" href="#Event2" data-show="more2">Event 2</a>
</div>
	<span class="hide description more">Display Event Here 1.</span>
	<span class="hide description more2">Display Event Here 2.</span>