html 手风琴滑块 - 采用全新造型设计

Posted 2021-05-11

$(document).ready(function(){
  $('.accordian .expand').click(function(){
    // Collapse all uncollapsed menus
    $('.accordian .expanded_content').slideUp();
    // Open up menu below the h3 clicked - only if it's collapsed
    if( !$(this).next().is(':visible') ) {
      $(this).next().slideDown();
    }
  })
});

.accordian {
  margin-bottom: 0 !important;

  .expand {
    cursor: pointer;
    background-color: #333;
    border-bottom: 1px solid #eee;
    color: #eee;
    padding: 5px 10px;
  }
  
  .expanded_content {
    display: none;
    padding: 10px;
    border: 1px solid #eee;
  }
  
  .active.expanded_content {
    display: block;
  }

}

          <div class="accordian">
            <div class="expand">Item 1 <small class="right">+</small></div>
            <div class="active expanded_content">
              {{ product.description }}
            </div>
          </div>
          <div class="accordian">
            <div class="expand">Item 2 <small class="right">+</small></div>
            <div class="expanded_content">
              {{ product.description }}
            </div>
          </div>
          <div class="accordian">
            <div class="expand">Item 3 <small class="right">+</small></div>
            <div class="expanded_content">
              {{ product.description }}
            </div>
          </div>
          <div class="accordian">
            <div class="expand">Item 4 <small class="right">+</small></div>
            <div class="expanded_content">
              {{ product.description }}
            </div>
          </div>