Struggling with a JS/Jquery issue on my portfolio website, I admit that I am still just an average programmer.
My portfolio website has five buttons, each representing a different project. For each project, there is a corresponding text description and an image/link. Clicking on the image takes the user to the project URL.
<div class="work-content">
<h2 class="con-active" id="contentOne">Content One</h2>
<h2 class="con-hidden" id="contentTwo">Content Two</h2>
<h2 class="con-hidden" id="contentThree">Content Three</h2>
<h2 class="con-hidden" id="contentFour">Content Four</h2>
<h2 class="con-hidden" id="contentFive">Content Five</h2>
</div>
<div class="moving-zone" style="z-index: 0;">
<a href="about.html" class="popup" id="popupOne">
<div class="popup-content">Background One</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupTwo">
<div class="popup-content">Background Two</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupThree">
<div class="popup-content">Background Three</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupFour">
<div class="popup-content">Background Four</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupFive">
<div class="popup-content">Background Five</div>
</a>
</div>
<ul class="work-ul">
<li class="work-link"><button class="button" id="workOne">WORK</button></li>
<li class="work-link"><button class="button" id="workTwo">WORK</button></li>
<li class="work-link"><button class="button" id="workThree">WORK</button></li>
<li class="work-link"><button class="button" id="workFour">WORK</button></li>
<li class="work-link"><button class="button" id="workFive">WORK</button></li>
</ul>
Upon entering the page, the first project's description and image are displayed (with a class "is-active"). If a user clicks on any button, the current description/image will hide and the new one corresponding to the selected project will show.
I struggle with arrays and Each functions, particularly in removing the "is-active" class from undesired elements and adding it to the desired ones.
Feel free to suggest alternative HTML markup, as this is just my initial attempt and I've been stuck on this for a day.