Hi,
I’m working on my own portfolio website and have come across a problem that I think needs a bit of custom code to solve which I’m struggling with and would really appreciate any help.
I’ve created a CMS collection of my projects that displays initially just as a list with the rest of the content hidden. When the title of one of the projects is clicked the content for that project is displayed.
If the name of that project is clicked again the content is hidden, but if another project name is clicked the previous one stays open whereas I’d like it to automatically close so that only one project is ever open at one time.
Hi @kyn_taylor you can achieve it with JS.
Element that should be revealed have to be hidden first (you have it done) . You should grab parent element of your element and each one add function that will listen for click
grab all elements and create array
loop over array and add to each element click event listener
the function on click should:
3.1 - add class active to current (clicked) element
3.2 - set condition IF element doesn’t contain active add class active
3.4 - grab item that is hidden (by class or attribute)
3.5 - remove class `hidden
Here is simple example. It is not created exactly to your structure but I have described logic and snippet.
const navItems = Array.from(document.querySelectorAll(".menu-links_container")); // containers
navItems.forEach((item) => {
item.addEventListener("click", () => {
removeActive(navItems); // first remove class active on all menu-links_container
// linksAction();
const isActive = item.classList.contains("active");
if (!isActive) {
item.classList.add("active"); // than add class active on clicked menu item
const linkWrapper = item.querySelector(".menu-links_wrapper"); //get links wrapper of clicked menu item
linkWrapper.classList.remove("hidden"); // remove class hidden
}
});
});
Hope that helps
EDIT: I thing that people also using Tabs for this task so search forum if you will find something more manageable if you are not familiar with programming.
EDIT 2: Here is another snippet I have in drawer you can customise to your needs