shortcode create for tabs with visual composer
shortcode create for tabs:-
================================================================
html code:
..................
<div class="title center">
<h3 class="fw-400 mb-50">Minimal</h3>
</div>
<ul role="tablist" class="nav nav-tabs outline">
<li role="presentation" class="active"><a href="#first-tab-2" role="tab" data-toggle="tab">First</a></li>
<li role="presentation"><a href="#second-tab-2" role="tab" data-toggle="tab">Second</a></li>
<li role="presentation"><a href="#third-tab-2" role="tab" data-toggle="tab">Third</a></li>
</ul>
<div class="tab-content">
<div id="first-tab-2" role="tabpanel" class="tab-pane active">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo facilis ab impedit ipsam inventore, odio sit repudiandae. Fuga soluta officia quas voluptatem, dolores nulla eaque nostrum nobis culpa illum rerum. Ut molestias nemo voluptas velit explicabo dolores iusto labore eius, quidem voluptates praesentium, libero minus cumque aut consequatur expedita excepturi quae voluptatum.</p>
</div>
<div id="second-tab-2" role="tabpanel" class="tab-pane">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo vel qui cumque laborum asperiores, magnam, deserunt, impedit eveniet dolores non placeat aut recusandae. Maxime, cupiditate. Similique obcaecati aliquid amet odio. Magnam perferendis tenetur temporibus adipisci. Adipisci, debitis sit veniam possimus sed, natus. Molestias possimus rerum laborum quasi, voluptas quidem assumenda sapiente vero.</p>
</div>
<div id="third-tab-2" role="tabpanel" class="tab-pane">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias blanditiis porro nobis non qui, excepturi deserunt fugiat est quos vitae vero laboriosam hic quis, aliquam tempore odio sint, distinctio libero. Officia sit esse dolorum excepturi perferendis? Voluptatibus iste a illum dolorem nam odit sequi reiciendis explicabo ullam pariatur facilis eos consequatur, perspiciatis!</p>
</div>
</div>
.....................................
//dynamic code
.............
<?php
function commet_tabs($one, $two){
$commet = shortcode_atts([
'title' =>' ',
't-menu' =>' ',
't-content' =>' ',
't-all' =>' ',
't-style' =>'outline'
], $one);
ob_start();
?>
<div class="title center">
<h3 class="fw-400 mb-50"><?php echo $commet['title']; ?></h3>
</div>
<ul role="tablist" class="nav nav-tabs <?php echo $commet['t-style']; ?>">
<?php
$tabs = vc_param_group_parse_atts($commet['t-all']);
$i = 1;
$unique = rand();
foreach($tabs as $tabb) :
?>
<?php
if ($i==1) {
$classs = "active";
}else{
$classs = " ";
}
?>
<li role="presentation" class="<?php echo $classs; ?>"><a href="#commet<?php echo $unique.$i; $i++; ?>" role="tab" data-toggle="tab"><?php echo $tabb['t-menu']; ?></a></li>
<?php endforeach; ?>
</ul>
<div class="tab-content">
<?php
$tabs = vc_param_group_parse_atts($commet['t-all']);
$i = 1;
foreach($tabs as $tabb) :
?>
<?php
if ($i==1) {
$classs = "active";
}else{
$classs = " ";
}
?>
<div id="commet<?php echo $unique.$i; $i++; ?>" role="tabpanel" class="tab-pane <?php echo $classs; ?>">
<p><?php echo $tabb['t-content']; ?></p>
</div>
<?php endforeach; ?>
</div>
<?php
return ob_get_clean();
}
add_shortcode('commet_tabs', 'commet_tabs');
vc_map([
'name' =>'Commet Tabs',
'base' =>'commet_tabs',
'icon' =>get_template_directory_uri(). '/images/cat.png',
'description' =>'Commet Custom box',
'params' =>[
[
'param_name' => 't-style',
'type' =>'dropdown',
'heading' =>'Select Tabs Style',
'value' =>[
'Minimal' =>'outline',
'Boxed' =>'center'
]
],
[
'param_name' => 'title',
'type' =>'textfield',
'heading' =>'Title',
],
[
'param_name' => 't-all',
'type' =>'param_group',
'heading' =>'Add Tab',
'params' =>[
[
'param_name' => 't-menu',
'type' =>'textfield',
'heading' =>'Tab Menu',
],
[
'param_name' => 't-content',
'type' =>'textarea',
'heading' =>'Tab Content',
],
]
],
],
]);
?>
.................................
No comments