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

Read More
(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.

Related posts

1 comment

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

    $('[id^="horizontalTab-"]').easyResponsiveTabs({...});
    

Comments are closed.