Testimonials_accordion

<?php get_header();?>
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin-bottom:20px;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>
<div class="container-fluid testimonial-header">
    <div class="row">
        <div class="col-lg-12 text-center">
            <h1>Testimonials</h1>
        </div>
    </div>
</div>
<div class="container testimonial-content">
    <div class="block-1">
        <h2 class="heading">Delivering Exceptional Customer Service</h2>
        <p class="sub-heading">Being locally owned and operated, our objective is to provide exceptional client service delivered by our professional team. We take great pride in building homes that are beyond expectation, on time and on budget.</p>
    </div>
</div>
<div class="container-fluid py-5 archive-testimonial">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
            <?php
global $wpdb;

$posts = $wpdb->posts;

//Get all unique years as "years" from posts where post type is equal to testimonials

$sql = "SELECT DISTINCT(YEAR(`post_date`)) as years FROM $posts WHERE post_type = 'testimonials' ORDER BY years DESC"; //Get all post year list by DESC


//Loop through all results and use date_query param https://codex.wordpress.org/Class_Reference/WP_Query#Date_Parameters


$result = $wpdb->get_results($sql);

foreach($result as $rs) { ?>
    <button class="accordion"><?php echo $rs->years ;?></button>
    <?php $args = array(
        'post_type' => 'testimonials',
        'post_per_page'=> -1,
        'post_status' => 'publish',
        'orderby'   => 'date',
        'order' => 'DESC',
        'date_query' => array(array(
            'year'=> $rs->years,
        ),),

    );

     $loop = new WP_Query($args);

     if($loop->have_posts()) {

        while($loop->have_posts()) : $loop->the_post(); ?>
            <div class="panel testimonial-grid-archive testimonial-loop-ah">
                <div>
                    <?php
                        if(has_post_thumbnail()) { ?>
                            <div style="text-center">
                                        <div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
                                    </div>
                                <?php } else { ?>
                                    <div class="testimonial-image-aden placeholder-testimonial-image"> </div>
                                <?php }
                                ?>
                            </div>
                <div class="testimonial-content">
                    <p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
                    <p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
                    <div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>
                    <p class="person-title-archive">- <?php the_title() ;?></p>
                </div>
            </div>


        <?php endwhile;

     }
}
            ?>
            </div>
        </div>
    </div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>
<?php get_footer();?>