<?php $args = array(
'orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'variations',
'post_status' => 'publish',
'posts_per_page' => -1,
);
$varieties = get_posts($args);
?>
<script>
// Tab Functionality
jQuery(document).ready(function() {
jQuery('.tab-title').on('click', function() {
var tabId = jQuery(this).data('tab-title');
jQuery('.tab-title').each(function(index, val) { jQuery(val).removeClass('active'); });
jQuery(this).addClass('active');
jQuery('.tab-body').each(function(index, val) { jQuery(val).removeClass('active'); });
jQuery('.tab-bodies').find('.tab-body[data-tab-body=' + tabId + ']').addClass('active');
jQuery('.accordion-title').each(function(index, val) { jQuery(val).removeClass('active'); });
jQuery('.tab-bodies').find('.tab-body[data-tab-body=' + tabId + '] .accordion-title').addClass('active');
jQuery('.accordion-title').each(function(index2, val2) { jQuery(val2).removeClass('active');});
jQuery('.tab-bodies').find('.accordion-title[data-accordion-title=' + tabId + ']').addClass('active');
});
// Accordion Functionality
jQuery('.accordion-title').each(function(index, val) {
jQuery(val).on('click', function() {
jQuery('.tab-title').each(function(index2, val2) { jQuery(val2).removeClass('active'); });
var tabId = jQuery(this).data('accordion-title');
jQuery('.tabs-titles').find('.tab-title[data-tab-title=' + tabId + ']').addClass('active');
jQuery('.accordion-title').each(function(index2, val2) { jQuery(val2).removeClass('active'); jQuery(val2).find('.accordion-toggle i').removeClass('fa-minus'); jQuery(val2).find('.accordion-toggle i').addClass('fa-plus'); });
jQuery(this).addClass('active');
jQuery('.tab-body').each(function(index2, val2) { jQuery(val2).removeClass('active'); });
//jQuery(this).next('.tab-body').slideToggle();
jQuery(this).next('.tab-body').addClass('active');
jQuery(this).find('.accordion-toggle i').removeClass('fa-plus');
jQuery(this).find('.accordion-toggle i').addClass('fa-minus');
// jQuery('html, body').animate({
// scrollTop: jQuery(this).offset().top - 70
// }, 600);
});
});
});
</script>
<div id="tabs" class="tabs clearfix">
<div class="tabs-area column-wrapper">
<div class="tabs-titles thirty left std-tablet-hide std-tablet-no-float">
<div class="titles-wrapper clearfix site-width">
<?php for($i=0; $i < count($varieties); $i++) : ?>
<div class="tab-title pointer caps <?php echo $i==0 ? 'active' : ''; ?>" data-tab-title="<?php echo $i; ?>">
<div class="h5"><?php echo $varieties[$i]->post_title; ?></div>
</div>
<?php endfor; ?>
</div>
</div>
<div class="tab-bodies seventy right std-tablet-no-float std-tablet-hundred">
<?php for($i=0; $i < count($varieties); $i++) : ?>
<div class="accordion-title hide pointer std-tablet-block caps <?php echo $i==0 ? 'active' : ''; ?>" data-accordion-title="<?php echo $i; ?>">
<div class="relative h3"><?php echo $varieties[$i]->post_title; ?><span class="accordion-toggle absolute pointer hide tablet-block"><i class="fa <?php echo $i==0 ? 'fa-minus' : 'fa-plus'; ?>"></i></span></div>
</div>
<div class="tab-content tab-body <?php echo $i==0 ? 'active' : ''; ?>" data-tab-body="<?php echo $i; ?>">
<div class="h3"><?php echo $varieties[$i]->post_title; ?></div>
<?php echo $varieties[$i]->post_content; ?>
</div>
<?php endfor; ?>
</div>
</div>
</div>
<style>
.tabs {padding-bottom:25px;}
.tabs-area {}
.tabs-titles, .accordion-title {}
.tab-title {padding:10px 25px;}
.tab-title.active, .accordion-title.active {color:#ff0000;}
.accordion-title {margin:15px 0; padding:15px 0;}
.accordion-title.active {padding:25px 0;}
.accordion-title h3, .accordion-title.active h3 {margin:0;}
.accordion-toggle {right:0px; top:-4px;}
.tab-content {}
.tab-body {display:none;}
.tab-body.active {display:block;}
</style>
requires font-awesome for accordion icons. view original: http://www.dieseldogsfuelservice.com/fuel-delivery/
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.