Recently I made a Plugin for WordPress. This is a Responsive Tabs Shortcode plugin.The shortcode runs well, but when i made multiple tab in the same page its dont work. I figured out the problem, the problem is when i use multiple tabs by using shortcode the id of the Tabs div increment one by one like my id of the tabs div is id=”horizantal-tab-1″ when I use another shortocde its become id=”horizantal-tab-2″ this system is ok but i am so weak in Jquery and javascript in the jQuery the tabs only work for id=”horizantal-tab-1. I cant incriment the id as well in jQuery too.
Here is my php code not the full code
$wrapInc = 1;
function gs_tabs_shortcode($atts, $content= null){
global $wrapInc;
$GLOBALS['tab_count'] = 0;
do_shortcode( $content );
if ( is_array( $GLOBALS['tabs'] ) ) {
foreach ($GLOBALS['tabs'] as $tab ) {
$tabs[]= '<li> <i class="fa fa-'.$tab['icon'].' fa-lg "></i> '.$tab['title'].' </li>';
$tabcontent[]= '<div><p> '.$tab['content'].' </p></div>';
}
$return = '<div id="horizontalTab-'.$wrapInc.'">';
$return .= '<ul class="resp-tabs-list">'.implode( "n", $tabs ).'</ul>';
$return .= '<div class="resp-tabs-container">'.implode("n", $tabcontent).'</div>';
$return .= '</div>';
$wrapInc++;
}
return $return;
}
add_shortcode('gs_tabs', 'gs_tabs_shortcode');
And ere is my jQuery code which i want to fix
(function ($) {
$(document).ready(function () {
$('#horizontalTab-1').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = $(this);
var $info = $('#tabInfo');
var $name = $('span', $info);
$name.text($tab.text());
$info.show();
}
});
})(jQuery);
and the problem is here $('#horizontalTab-1')
i am calling the event by id so its need to a incremental id.
You can use an attribute selector to select elements with ids starting with
horizontalTab-