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>';

return $return;

add_shortcode('gs_tabs', 'gs_tabs_shortcode');

And ere is my jQuery code which i want to fix

(function ($) {

$(document).ready(function () {
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);


and the problem is here
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-

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download