Question

Hi I am using 2 jQuery plugins, one for tabs and another to slide images within my tabs. Currently I have 2 tabs. jQuery for the first tab works fine but when I click on the next tab it dosent work. The elements are present in the second tab as well, but the classes are not toggled from hidden to visible.

I am using these two plugins
For My tabs
For Sliding images inside each Tab

Here Goes my Code :-

<div class="demo" style="display: inline-block;">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1" > <?php echo $categoryName ?> </a></li>
            <li><a href="#tabs-2" > <?php echo $categoryName ?> </a></li>
        </ul>
        <div id="tabs-1">
            <div id="waterwheel-carousel-flat1">
                <div class="carousel-controls">
                    <div class="carousel-prev"><a href="#">&lt; previous</a></div>
                    <div class="carousel-next"><a href="#">&gt; next</a></div>
                </div>
                <div class="carousel-images">
                    <a href=<?php echo $productLink ?> ><img src= <?php echo $imageLink ?> alt= <?php echo $productName ?>/> </a> 
                </div>
            </div>
        </div>

        <div id="tabs-2">
            <div id="waterwheel-carousel-flat">
                <div class="carousel-controls">
                    <div class="carousel-prev"><a href="#">&lt; previous</a></div>
                    <div class="carousel-next"><a href="#">&gt; next</a></div>
                </div>
                <div class="carousel-images">
                    <a href=<?php echo $productLink ?> ><img src= <?php echo $imageLink ?> alt= <?php echo $productName ?>/> </a> 
                    <?php }  ?>
                </div>
            </div>
        </div>
    </div>
</div>

My Script for Sliding Images Inside Tabs Goes here:-

<script type="text/javascript">

var jq = $.noConflict();
jq(document).ready(function () {
    jq("#waterwheel-carousel-default").waterwheelCarousel();

    jq("#waterwheel-carousel-higharch").waterwheelCarousel({
        startingWaveSeparation: -90,
        waveSeparationFactor: .7,
        centerOffset: 10,
        startingItemSeparation: 120,
        itemSeparationFactor: .9,
        itemDecreaseFactor: .75
    });

    jq("#waterwheel-carousel-horizon").waterwheelCarousel({
        startingWaveSeparation: 0,
        centerOffset: 30,
        startingItemSeparation: 150,
        itemSeparationFactor: .7,
        itemDecreaseFactor: .75,
        opacityDecreaseFactor: 1,
        autoPlay: 1500
    });

    jq("#waterwheel-carousel-flat").waterwheelCarousel({
        itemSeparationFactor: 1,
        itemDecreaseFactor: 1,
        waveSeparationFactor: 1,
        startingWaveSeparation: 0,
        startingItemSeparation: 280,
        centerOffset: 10,
        opacityDecreaseFactor: .3,
        autoPlay: 3000,
        edgeReaction: 'reverse'
    });

    jq("#waterwheel-carousel-vertical").waterwheelCarousel({
        orientation: 'vertical',
        startingItemSeparation: 100,
        startingWaveSeparation: 40,
        autoPlay: 2000
    });


  });
</script>

Here Is My Generated Html Code

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">



    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1"> Lovely new arrivals </a></li>


    <li class="ui-state-default ui-corner-top"><a href="#tabs-2"> Designer Collection </a></li>



</ul>

<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
    <div id="waterwheel-carousel-flat">
      <div class="carousel-controls">
        <div class="carousel-prev"><a href="#">&lt; previous</a></div>
        <div class="carousel-next"><a href="#">&gt; next</a></div>
      </div>
      <div class="carousel-images" style="position: relative;">



          <a href="http://127.0.0.1/sweetpea/index.php/gold-gilt-button-bed.html"><img bed="" button="" gilt="" alt="Gold" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/s/u/sub-cat-pro-01_03_2.jpg" style="display: inline; left: 119.5px; top: 10px; visibility: visible; position: absolute; z-index: 5; opacity: 0.3; width: 161px; height: 161px;" class=""> </a> 

          <a href="http://127.0.0.1/sweetpea/index.php/willows-shell-carved-bed-silver-1.html"><img silver1="" -="" bed="" carved="" shell="" alt="Willows" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/s/u/sub-cat-pro-01_03_3.jpg" style="display: inline; left: 399.5px; top: 10px; visibility: visible; position: absolute; z-index: 6; opacity: 1; width: 161px; height: 161px;" class="active"> </a> 

          <a href="http://127.0.0.1/sweetpea/index.php/classical-white-5ft-rococo-bed-1.html"><img bed="" rococo="" 5ft="" white="" alt="Classical" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/s/u/sub-cat-pro-01_03_4.jpg" style="display: inline; left: 679.5px; top: 10px; visibility: visible; position: absolute; z-index: 5; opacity: 0.3; width: 161px; height: 161px;" class=""> </a> 

          <a href="http://127.0.0.1/sweetpea/index.php/bed.html"><img alt="Bed/" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/thumbnail.jpg" style="display: inline; left: 959.5px; top: 10px; visibility: visible; position: absolute; z-index: 4; opacity: 0.09; width: 161px; height: 161px;" class=""> </a> 

          <a href="http://127.0.0.1/sweetpea/index.php/green-bed.html"><img bed="" alt="Green" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/c/o/cooper_black_bed.jpg" style="display: inline; left: 1239.5px; top: 10px; visibility: visible; position: absolute; z-index: 3; opacity: 0.027; width: 161px; height: 161px;" class=""> </a> 
                                </div>
        </div>
    </div>

    <div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
    <div id="waterwheel-carousel-flat1">
      <div class="carousel-controls">
        <div class="carousel-prev"><a href="#">&lt; previous</a></div>
        <div class="carousel-next"><a href="#">&gt; next</a></div>
      </div>
      <div class="carousel-images">



          <a href="http://127.0.0.1/sweetpea/index.php/product-4.html"><img silver="" -="" bed="" carved="" shell="" alt="Willows" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/k/i/kingsley-bate-rectangular-dining-set-furniture.jpg"> </a> 

          <a href="http://127.0.0.1/sweetpea/index.php/gold-gilt-button-bed.html"><img bed="" button="" gilt="" alt="Gold" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/s/u/sub-cat-pro-01_03_2.jpg"> </a> 

          <a href="http://127.0.0.1/sweetpea/index.php/willows-shell-carved-bed-silver-1.html"><img silver1="" -="" bed="" carved="" shell="" alt="Willows" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/s/u/sub-cat-pro-01_03_3.jpg"> </a> 

          <a href="http://127.0.0.1/sweetpea/index.php/classical-white-5ft-rococo-bed-1.html"><img bed="" rococo="" 5ft="" white="" alt="Classical" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/s/u/sub-cat-pro-01_03_4.jpg"> </a> 

          <a href="http://127.0.0.1/sweetpea/index.php/green-bed.html"><img bed="" alt="Green" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/c/o/cooper_black_bed.jpg"> </a> 
                                </div>
        </div>
    </div>


    </div>

Answer 1

it doesn’t work because of that:

<div id="waterwheel-carousel-flat">
....
<div id="waterwheel-carousel-flat">

the id must be unique within a document

---

I hope now you can see why “” (quotes) – are important by specifying html attributes (look at your images)

the problem is – you’ve renamed your div, but not initialized it, add initialization for #waterwheel-carousel-flat1

---

jq("#waterwheel-carousel-flat,#waterwheel-carousel-flat1").waterwheelCarousel({
  ... 
});

---

OR use class attribute instead of id:

js init:

jq(".waterwheel-carousel-flat").waterwheelCarousel({
  ... 
});

html:

<div class="waterwheel-carousel-flat">
...
<div class="waterwheel-carousel-flat">