css 与过渡加符号的手风琴

Posted 2021-05-13

section class="accordion">

   <?php if ( get_sub_field( 'accordion_title' ) ) : ?>
      <div class="acc-img">
         <img src="<?php bloginfo( 'template_url' ); ?>/images/green-line.jpg"/>
      </div>
      <h2 class="accordion-intro">
         <?php the_sub_field( 'accordion_title' ); ?>
      </h2>
   <?php endif; ?>

   <?php if ( have_rows( 'accordion_rows' ) ) : ?>

      <?php while ( have_rows( 'accordion_rows' ) ) : ?>

         <?php the_row(); ?>

         <div class="ac-row">

            <h5 class="ac-title">
               <?php the_sub_field( 'accordion_title' ); ?>
            </h5>

            <div class="ac-content">
               <?php the_sub_field( 'accordion_content' ); ?>
            </div>

         </div>

      <?php endwhile; ?>

   <?php endif; ?>

</section>

// Accordion
$('.ac-title').click(function(){
   $(this).parents('.ac-row').toggleClass('active');
   $(this).siblings('.ac-content').slideToggle();
});

/* ------------------------------
   Accordion
------------------------------ */
.acc-img {
    text-align: center;
}
.accordion-intro {
    max-width: 768px;
    margin: 0 auto 45px;
    text-align: center;
}
.accordion-intro h2 {
    margin-bottom: 0;
}
.accordion-intro h2:before {
    margin: 0 10px 0 0;
}
.ac-row {
    border-top: solid 1px #ccc;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}
.ac-row:last-of-type {
    border-bottom: solid 1px #ccc;
}
.ac-title {
    cursor: pointer;
    margin: 0;
    padding: 20px 50px 20px 0;
    text-transform: capitalize;
}
.ac-title:after {
    color: #b8b23a;
    content: '\f067';
    font-family: FontAwesome;
    font-weight: normal;
    position: absolute;
    right: 20px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.active .ac-title:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.ac-content {
    display: none;
    padding-bottom: 20px;
}