pc lover pc lover - 4 years ago 85
HTML Question

How to call incrimental id by jQuery which i made by php

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.

Answer Source

You can use an attribute selector to select elements with ids starting with horizontalTab-

$('[id^="horizontalTab-"]').easyResponsiveTabs({...});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download