如何在document ready时默认折叠Accordion？求CSS/JS实现方案

Got it, let's get your accordion behaving exactly how you want it! Since you've already implemented the accordion structure, here's a straightforward way to set it to collapsed by default and add smooth toggle functionality when users click.

1. Set Default Collapsed State with CSS #

First, we'll ensure the accordion content stays hidden as soon as the page loads. Add this CSS to your stylesheet:

/* Hide accordion content panels by default */
.panel-collapse {
  display: none;
}

/* Show content when the panel is marked as active */
.panel-collapse.active {
  display: block;
}

Note: If your accordion uses a different class name for the collapsible content (instead of .panel-collapse), replace it with the class from your existing code.

2. Add JavaScript for Toggle Behavior #

Next, we'll use jQuery (since most accordion snippets rely on it) to initialize the collapsed state and handle click toggles. Add this script right before your closing </body> tag or in a dedicated JS file:

$(document).ready(function() {
  // Initialize: Ensure all accordions start collapsed
  $('.panel-collapse').removeClass('active');
  $('.accordion-toggle').addClass('collapsed'); // Mark triggers as collapsed

  // Handle click to toggle expand/collapse
  $('.accordion-toggle').on('click', function(e) {
    e.preventDefault(); // Prevent default link behavior
    
    // Get the target content panel linked to the clicked trigger
    const targetPanel = $(this).attr('href');
    
    // Toggle the active class to show/hide the panel
    $(targetPanel).toggleClass('active');
    
    // Toggle the collapsed state on the trigger button
    $(this).toggleClass('collapsed');
  });
});

Quick Checks for the Script: #

• Replace .accordion-toggle with the actual class name of your accordion's clickable trigger elements (check your existing code to find this).
• Make sure your trigger links have an href attribute pointing to the ID of their corresponding content panel (e.g., <a href="#panel-1" class="accordion-toggle"> pairs with <div id="panel-1" class="panel-collapse">).

3. Optional: Add Visual State Indicators #

If you want to give users a clear visual cue (like an arrow) for expanded/collapsed states, add this CSS:

/* Example using Font Awesome icons (adjust if you use a different icon set) */
.accordion-toggle::after {
  content: "\f078"; /* Down arrow for expanded state */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  float: right;
  margin-left: 5px;
}

.accordion-toggle.collapsed::after {
  content: "\f054"; /* Right arrow for collapsed state */
}

Note: If you don't use Font Awesome, replace the content values with your preferred icon characters or remove this section entirely.

内容的提问来源于stack exchange，提问作者Sona Shetty