Skip to content

Instantly share code, notes, and snippets.

@nikartx
Created February 23, 2016 08:35
Show Gist options
  • Save nikartx/f2209f308e4c1bceb100 to your computer and use it in GitHub Desktop.
Save nikartx/f2209f308e4c1bceb100 to your computer and use it in GitHub Desktop.
JS hide menu and open on click
//Hide products blocks
$(document).ready(function() {
$('.btn').click(function() { //Click on button
$(".cont").not(this).slideUp().prev().removeClass("active"); //Hide all open blocks
$(this).next().find(".cont").not(":visible").slideDown().prev().addClass("active"); //Open current block
});
});
<!-- Start products menu -->
<div class="container prod_block">
<?php $idObj = get_category_by_slug('products');
$id = $idObj->term_id; ?>
<?php if ( have_posts() ) : query_posts('cat=' . $id);
while (have_posts()) : the_post(); ?>
<button class="btn_form btn"><?php the_title(); ?></button>
<div class="hide_blocks">
<div class="cont" >
<h3><?php the_excerpt(); ?></h3>
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(array(480, 360)); ?>
<?php the_content(); ?>
<?php endif; ?>
</div>
</div>
<? endwhile; endif; wp_reset_query(); ?>
</div>
/* CSS */
.active {
display: inline-block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment