WordPress - Sidebar latest posts widget with toggle dropdown for small screens

readme.md

Notes

This solution uses the responsiveNav (http://responsive-nav.com/) jQuery plugin to toggle the dropdown menu and make height CSS transitions available for dynamic menu's

latest-posts.php

<?php 
// Get the poststype of the current post
$posttype = get_post_type();

$obj = get_post_type_object( $posttype );

$args = array (
	'post_type'          => $posttype,
	'post_status'        => 'publish',
	'post_count'		     => 5
);

$query = new WP_Query( $args );

if ( $query->have_posts() ) : ?>

	<nav id="subnavi" class="widget">

		<header class="widget-header">
		  
		  <?php // We'll use this h3 for big screens ?>
			<h3>
				Latest <span class="posttype-name"><?php echo $obj->labels->name; ?></span>
			</h3>
			
			<?php // We'll use this h3 on small screens to toggle the dropdown menu ?>
			<h3 id="subnavi-toggle">
				Latest <span class="posttype-name"><?php echo $obj->labels->name; ?></span>
			</h3>

		</header>

		<ul class="sub-menu">
	
		<?php while ( $query->have_posts() ) :

			$query->the_post();

			$queried_object = get_queried_object();

			if( $queried_object->ID == get_the_ID() ):
			// Add active class if this is the current post
			$class = 'current_page_item';
			else:
			// Add no class if this is not the current post
			$class = '';
			endif;
			?>
      
      <?php // print the list items with the correct classes ?>
			<li<?php echo $class !='' ? ' class="' . $class . '"' : '';?>><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

		<?php endwhile; ?>

		</ul>

	</nav>

<?php endif;

wp_reset_postdata();

?>

scripts.js

jQuery( document ).ready( function () {
	'use strict';
	
	// @plugin init: responsiveNav
	if( 'function' === typeof responsiveNav ){
		
		if (jQuery('#subnavi').length){
			
			var navigation = responsiveNav( '.sub-menu', {
				label: '',
				customToggle: '#subnavi-toggle'
			} );
			
		}

	}
	
});

style.scss

#subnavi{
  
  h3{
			display:none; // Hide h3 for small screens
			
			@media only screen and (min-width:860px){
				display: block; // Show h3 for large screens
			}
			
			&#subnavi-toggle{
				display:block; // Show h3 with toggle link for small screens
				
				.js-nav-active &{
					// Add styling for opened menu
				}
				
				@media only screen and (min-width:860px){
					display: none; // Hide h3 with toggle link for large screens
				}
				
			}
			
  }
  
  ul.sub-menu { // styles needed for responsiveNav animation
		max-height: 0;
		position: absolute;
		display: block;
		overflow: hidden;
		zoom: 1;
		
		&.opened {
		  max-height: 9999px;
		}
		
		@media only screen and (min-width:860px){
		  
			position: relative;
			
			&.closed{
				max-height: none;
			}
			
		}
		
  }
  
}