Use an "Accordion Archive" with JointsWP

Accordion Grid for JointsWP 4

<?php get_header(); ?>
			
	<div id="content">
	
		<div id="inner-content" class="row">
	
		    <main id="main" class="large-8 medium-8 columns" role="main">
			    
			    <ul class="accordion" data-accordion role="tablist">
				    
				    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
						
						 <li class="accordion-item">
														
								<a href="#panel-<?php the_ID(); ?>" role="tab" class="accordion-title" id="panel-<?php the_ID(); ?>-label" aria-controls="panel-<?php the_ID(); ?>"><?php the_title(); ?></a>
								
								<div id="panel-<?php the_ID(); ?>" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-<?php the_ID(); ?>-label">
									
									<?php get_template_part( 'parts/content', 'byline' ); ?>
												
									<a href="<?php the_permalink() ?>"><?php the_post_thumbnail('full'); ?></a>
									
									<?php the_content('<button class="tiny">Read more...</button>'); ?>
									
								</div>
													    													
						</li>
										    
					<?php endwhile; ?>	
				
				</ul>

					<?php joints_page_navi(); ?>
					
				<?php else : ?>
											
					<?php get_template_part( 'parts/content', 'missing' ); ?>
						
				<?php endif; ?>
																								
		    </main> <!-- end #main -->
		    
		    <?php get_sidebar(); ?>

		</div> <!-- end #inner-content -->

	</div> <!-- end #content -->

<?php get_footer(); ?>