Instead of working with id use a common class attribute on similar elements. This way you can easily select them as a collection and apply whatever action needed in a forEach loop.

//get all elements
const items = document.querySelectorAll('.clickable');
//apply event listener to all elements
items.forEach(item => item.addEventListener('click', func));

function func(event) {
  //reset all elements
  items.forEach(item => {
    item.style.color = "black";
  });
  //apply change to clicked element
  event.target.style.color = "blue";
}

<div class="clickable">one</div>
<div class="clickable">two</div>
<div class="clickable">three</div>

There are two main problems with your approach.

1. By using individual IDs for each element, you have to select them by hand one by one, which gets really verbose really quickly. Hiding each one of them individually requires n*n lines of code, which will get monstruously big really fast as the number of elements increase.

2. Each time you execute document.getElementById, then you ask Javascript to go all over the hole DOM and search for the designated element. This is very CPU intensive. You should do it once and reuse it, by storing it in a constant : const $elem1 = document.getElementById("elem1") and then reuse $elem1.

Better yet, instead of giving each element an individual name, give them all the same class name and work with that.

const $elems = Array.from(document.getElementsByClassName("elem"));

console.log("elems = ", $elems)

const clickHandler = event => {
  $elems.forEach($e => $e.style.display = "none");
  event.target.style.display = "block";
};

$elems.forEach($elem =>  $elem.addEventListener("click", clickHandler));

.elem{
    cursor: pointer;
}

<div class="elem">Elem 1</div>
<div class="elem">Elem 2</div>
<div class="elem">Elem 3</div>
<div class="elem">Elem 4</div>
<div class="elem">Elem 5</div>

If including jQuery is an option, it gets even simpler :

const $allElems = $(".elem");

$allElems.click(function() {
  $allElems.hide();
  $(this).show();
})

.elem {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elem">Elem 1</div>
<div class="elem">Elem 2</div>
<div class="elem">Elem 3</div>
<div class="elem">Elem 4</div>
<div class="elem">Elem 5</div>

Good evening folks!

I wrote a script that makes it possible to switch between “” pages by clicking on tabs (see image for example)

Problem: The code I’ve written is very repetative and noob-ish

I have tried writing switch and if/else loops to reduce redundancy, but I’m not good enough to make it.

Could someone help me out?

Thank you very much in advance!

//Getting HTML elements and adding eventListener to trigger function on-click
document.getElementById("archiveBtnOne").addEventListener("click", showFirstTask);
document.getElementById("archiveBtnTwo").addEventListener("click", showSecondTask);
document.getElementById("archiveBtnThree").addEventListener("click", showThirdTask);
document.getElementById("archiveBtnFour").addEventListener("click", showFourthTask);

let firstContent = document.getElementById("aOverviewOne");
let secondContent = document.getElementById("aOverviewTwo");
let thirdContent = document.getElementById("aOverviewThree");
let fourthContent = document.getElementById("aOverviewFour");

//Functions to show current object, and hide other stacked objects
function showFirstTask(){
    document.getElementById("aOverviewOne").style.display = "block";
    document.getElementById("aOverviewTwo").style.display = "none";
    document.getElementById("aOverviewThree").style.display = "none";
    document.getElementById("aOverviewFour").style.display = "none";
}

 function showSecondTask(){
    document.getElementById("aOverviewOne").style.display = "none";
    document.getElementById("aOverviewTwo").style.display = "block";
    document.getElementById("aOverviewThree").style.display = "none";
    document.getElementById("aOverviewFour").style.display = "none";
}

function showThirdTask(){
    document.getElementById("aOverviewOne").style.display = "none";
    document.getElementById("aOverviewTwo").style.display = "none";
    document.getElementById("aOverviewThree").style.display = "block";
    document.getElementById("aOverviewFour").style.display = "none";
}

function showFourthTask(){
    document.getElementById("aOverviewOne").style.display = "none";
    document.getElementById("aOverviewTwo").style.display = "none";
    document.getElementById("aOverviewThree").style.display = "none";
    document.getElementById("aOverviewFour").style.display = "block";
}

archiveBtnOne represents ‘jobb’ with its matching colored div – and so on..
Each button is connected to a div with a matching background color

https://i.stack.imgur.com/5BRi9.jpg