Accordion based on wordpress menu

Create an accordion on your basic wordpress menu without a plugin.

<div class="nav-menu">
	<?php
		wp_nav_menu( array(
			'menu' => 'Mobile Menu',
		) );
	?>
</div>
$('ul#menu-mobile-menu > li:has(ul)').addClass("has-sub");

  $('ul#menu-mobile-menu  > li > a').click(function() {
    var checkElement = $(this).next();
    
    $('ul#menu-mobile-menu  li').removeClass('active');
    $(this).closest('li').addClass('active');	 
    
    
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
      $(this).closest('li').removeClass('active');
      checkElement.slideUp('normal');
    }
    
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
      $('ul#menu-mobile-menu  ul:visible').slideUp('normal');
      checkElement.slideDown('normal');
    }
    
    if (checkElement.is('ul')) {
      return false;
    } else {
      return true;	
    }		
});

Hover Version

$('#secondary-menu li').hover(
	function() {
	$('ul',this).stop().slideDown(200);
  },
  function() {
    $('ul',this).stop().slideUp(200);
  }
);

Slick Slider – the last carousel you’ll ever need!!

Found a slick jquery for carousel slider – that we think it’s better then owl carousel that we ussually use.

https://github.com/kenwheeler/slick


function createSlick(){
jQuery(".slick").not('.slick-initialized').slick({
	autoplay: true,
	arrows: true,
	slidesToShow: 4,
	slidesToScroll: 1,
	responsive: [

	{
	breakpoint: 769,
	settings: {
	slidesToShow: 4,
	slidesToScroll: 1
	}
	}
	,{
	breakpoint: 768,
	settings: {
	slidesToShow: 2,
	slidesToScroll: 1
	}
	},
	{
	breakpoint: 1100,
	settings: 'unslick'
	}
]
});
}
createSlick();
$(window).on( 'resize', createSlick);

Simple accordion with toggle indicator

<!-- Start of Template --> 
<div class="hideContentWrap">
        <h4 class="hideContentHeader">Some Hidden Content</h4>
        <div class="hideContent">
        <img src=
        "http://www.wecreatemedia.com/wp-content/uploads/2014/07/34.jpg"></div>
 </div>
<!-- End of Template --> 
  
 <div class="hideContentWrap">
        <h4 class="hideContentHeader">More Hidden Content</h4>
        <div class="hideContent">
        <img src=
        "http://www.wecreatemedia.com/wp-content/uploads/2014/07/44.jpg"></div>
</div>

<div class="hideContentWrap">
        <h4 class="hideContentHeader">Props</h4>
        <div class="hideContent">
        <img src=
            "http://www.wecreatemedia.com/wp-content/uploads/2014/07/54.jpg">
        <p>Developement by Brian Bustos at <a href="http://www.umkc.edu/"
            target="_blank">UMKC</a><br>
            Background by <a href="https://subtlepatterns.com/" target=
            "_blank">Subtle Patterns</a><br>
            Photography by <a href="http://wecreatemedia.com" target=
            "_blank">WeCreate Media</a><br></p>
       </div>
</div>
$(document).ready(function() {
    $('.hideContentHeader').prepend('<span class="indicator">+</span> ');
    $('.hideContentHeader').click(function() {
        $(this).parent().find('.hideContent').slideToggle("slow");
    });
    $('.hideContentHeader').click(function() {
        $(this).toggleClass("active");
    });
    $('.hideContentHeader').click(function() {
        $(this).find('.indicator').toggleClass("rotate");
    });
});
/* ///////////////////////////////////////////////////////////////////// 
//  Not Important CSS
/////////////////////////////////////////////////////////////////////*/
body {
    background: url(https://subtlepatterns.com/patterns/black_lozenge.png) #000;
    padding-top: 100px;
}

h1 {
    color: #fff;
    text-align: center;
}

p {
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
}

img {
    width: 100%;
    height: auto;
}

a {
    color: #fff;
}

/* ///////////////////////////////////////////////////////////////////// 
//  Important CSS
/////////////////////////////////////////////////////////////////////*/

.hideContentWrap {
    width: 600px;
    margin: 0 auto 10px;
}

.hideContentHeader {
    display: block;
    width: 90%;
    color: #fff;
    padding: 1%;
    margin: 0 auto;
    background: #FC4349;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.hideContentHeader.active {
    color: #000;
    background: #6DBCDB;
}

h4.hideContentHeader:hover {
    cursor: pointer;
}

.hideContent {
    display: none;
    width: 92%;
    height: auto;
    margin: 0 auto;
}

.indicator {
    display: inline-block;
    padding: 5px;
    text-align: center;
    font-size: 20px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.indicator.rotate {
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
/* IE 9 */
    -webkit-transform: rotate(45deg);
/* Safari and Chrome */
}

Source: https://codepen.io/robotballoon/pen/FADHc

ACF + Owl Carousel with custom navigation

Combo on creating a carousel using ACF and Owl carousel

<div class="owl-carousel">
		<?php if(get_field('car_images')):$counter = 0; ?>
		
			 <?php while( have_rows('car_images') ): the_row();
                    $color_name = get_sub_field('color_name');
                    $car_image = get_sub_field('car_image');
                    ?>
			
			
				<div class="carColorItem">
					<div data-hash="color-<?php echo $counter;?>">
					<h3><?php echo $color_name; ?></h3>
					<img src="<?php echo $car_image; ?>" alt="" />
					</div>
				</div>
			
			<?php $counter++; endwhile; ?>
			 
			
		 <?php endif; ?> 

		</div>
		<div class="carNav">
			<?php if(get_field('car_images')):$counter = 0; ?>  
			<?php while( have_rows('car_images') ): the_row();
				$color_thumb = get_sub_field('color_thumb');?>
				<a href="#color-<?php echo $counter;?>" class="<?php if (!$counter) {?>active<?php }?>">
					<img src="<?php echo $color_thumb; ?>" alt="" /> 
				</a>
			<?php $counter++; endwhile; ?>
			<?php endif; ?>
		</div>
		</div>

The jQuery:

	$('.owl-carousel').owlCarousel({
		loop:false,
		dots:true,
		items:1,
		URLhashListener:true,
        startPosition: 'URLHash'
	})	

	
	$('.carNav').on('click', 'a', function() {
    $('.carNav a.active').removeClass('active');
    $(this).addClass('active');
	});