0

I am trying to loop in jquery tab code but not working i am using this plugin for that https://jqueryui.com/tabs/ its not working in loop what am i doing wrong?

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>

  <div id="tabs">
  <ul>
  <?php
  $camps=20;
 for($i=1; $i<=$camps; $i++) 
    {
    echo '<a href="#tabs-' .$i . '" id="titleee">Campaign ' . $i . '</a>';
    }

  ?>
    </ul>

   <?php
   $camps1=20;
    for($i1=1; $i1<=$camps1; $i1++) 
   {
     echo '<div id="tabs-'.$i1.'">';  
     echo $i1;  
     echo '</div>';
   }
   ?>
  </div>
rockstar
  • 21
  • 6

1 Answers1

2

In this case, IDs no need to be unique in order to make the tab working. The problem is you did't wrapped the a tag with li element. Try wrapping first loop tab with li element :

<div id="tabs">
 <ul>
 <?php
 $camps=20;
 for($i=1; $i<=$camps; $i++) {
   echo '<li><a href="#tabs-' .$i . '" id="titleee">Campaign ' . $i . '</a></li>';
 }
?>
</ul>

<?php
$camps1=20;
for($i1=1; $i1<=$camps1; $i1++) {
  echo '<div id="tabs-'.$i1.'">';  
  echo $i1;  
  echo '</div>';
}
?>
</div>

DEMO(with same id)

But hey, of course you need to make the IDs unique. :)

Norlihazmey Ghazali
  • 9,000
  • 1
  • 23
  • 40
  • @VigneswaranS Yes of course no good mate, we are talking about the problem tabbing did't work and IDs IS NOT THE MAIN PROBLEM HERE to make it work. But thanks for pointing it out. – Norlihazmey Ghazali Jan 15 '16 at 14:32