Expandable Content技术问题：点击收起后如何恢复其他盒子可见性

Hey Derek, great job getting the "hide others when expanding" functionality working! The missing piece here is handling the collapse state—right now your code doesn't tell the browser to bring back the other boxes when you collapse an already expanded div. Let's break down how to fix this:

The Core Issue #

Your current logic only runs when you expand a new box: it hides all other boxes, but there's no code that reverses this when you collapse the active one. We need to add a check to see if the box you're clicking is already expanded, and if so, restore all other boxes to visible.

Step-by-Step Fix #

Let's adjust your click handler to account for both scenarios (expanding a new box, collapsing the active one):

1. Check if the clicked box is already expanded
   First, we'll check for a class that marks the expanded state (I'll assume you're using a class like expanded—adjust if you're using a different marker).
2. Handle collapse first
   If the box is already expanded:
   • Remove the expanded state from the clicked box
   • Remove the "hidden" class from all other boxes to make them visible again
3. Handle expansion as before
   If the box is collapsed:
   • Hide all other boxes
   • Apply the expanded state to the clicked box

Example Modified Code #

Here's how this might look in your JavaScript (adjust selectors to match your actual code):

// Target all your expandable divs
const expandableBoxes = document.querySelectorAll('.expandable');

expandableBoxes.forEach(box => {
  box.addEventListener('click', function() {
    // Check if this box is currently expanded
    const isCurrentlyExpanded = this.classList.contains('expanded');
    
    // Loop through all boxes to update their state
    expandableBoxes.forEach(otherBox => {
      if (isCurrentlyExpanded) {
        // If collapsing, restore all boxes to visible and remove expanded state
        otherBox.classList.remove('hide', 'expanded');
      } else {
        // If expanding, hide other boxes and remove their expanded state
        if (otherBox !== this) {
          otherBox.classList.add('hide');
          otherBox.classList.remove('expanded');
        }
      }
    });
    
    // Toggle the expanded state of the clicked box (only if we're expanding)
    if (!isCurrentlyExpanded) {
      this.classList.add('expanded');
    }
  });
});

Key Notes #

• Make sure your CSS has the hide class set to hide elements (e.g., display: none; or visibility: hidden; depending on your desired behavior)
• The expanded class should handle the styling for your open state (like increased height, padding, etc.)
• If you're using inline styles instead of classes to hide/expand, adjust the code to add/remove those styles instead of class names

This way, when you click an expanded box to collapse it, all other boxes will pop back into view exactly how you want!

内容的提问来源于stack exchange，提问作者Derek Buckingham