▼
Streaming live at 10am (PST)

Auto hide elements within collection list

Design help CMS
#1

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.

Many thanks

Here is my public share link: LINK

#2

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

  1. grab all elements and create array
  2. loop over array and add to each element click event listener
  3. 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

const sbCard = [...document.querySelectorAll(".sidebar-card")];

sbCard.forEach((el) => {
  const sbcMid = el.querySelector(".sbc__mid");
  const cta = el.querySelector(".sbc-cta-text");

  let sbcMidHeight = sbcMid.clientHeight;

  const isCollapsed = (sbcMid.style.height = `0px`);
  const isVisible = (sbcMid.style.height = `${sbcMidHeight}px`);
  sbcMid.style.height = `${isCollapsed}`;

  cta.addEventListener("click", () => {
    cta.innerHTML != "show details"
      ? (cta.innerHTML = "show details")
      : (cta.innerHTML = "hide details");
    sbcMid.style.height =
      sbcMid.style.height != `${isCollapsed}`
        ? `${isCollapsed}`
        : `${isVisible}`;
  });
});