CODEWITHSUNDEEP
javascriptjqueryslidetoggle
Asdfasdf Asdfasdf
Asdfasdf Asdfasdf

Reputation: 3

slideToggle not working for multiple divs

my php spits out all my cars in a loop so each car gets the same div id's and classes but different information MY PROBLEM is that my plug in only works for the same div which is the first thats because all of them are named the same

how can i make this function intelligent to know which div content is supposed to hide or show

check out my example http://jsfiddle.net/S2HEw/

(function ($) {
    $.fn.showHide = function (options) {

    //default vars for the plugin
        var defaults = {
            speed: 1000,
            easing: '',
            changeText: 0,
            showText: 'Show',
            hideText: 'Hide'

        };
        var options = $.extend(defaults, options);

        $(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
                      $('.toggleDiv:hidden').slideUp(options.speed, options.easing);
             // this var stores which button you've clicked
             var toggleClick = $(this);
             // this reads the rel attribute of the button to determine which div id to toggle
             var toggleDiv = $(this).attr('rel');
             // here we toggle show/hide the correct div at the right speed and using which easing effect
             $(toggleDiv).slideToggle(options.speed, options.easing, function() {
             // this only fires once the animation is completed
             if(options.changeText==1){
             $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
             }
              });

          return false;

        });

    };
})(jQuery);



$(document).ready(function(){

   $('.show_hide').showHide({
        speed: 250,  // speed you want the toggle to happen
        easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
        changeText: 1, // if you dont want the button text to change, set this to 0
        showText: 'View',// the button text to show when a div is closed
        hideText: 'Close' // the button text to show when a div is open

    });

});

the html, there is many of this ones, all of them with the same name and thats why my toggle button fails,

<a class="show_hide" href="#" rel="#slidingDiv">View</a>
            <div id="slidingDiv" class="toggleDiv" style="display: none;">
            <div class="right">
</div>
</div>

note that i cant update my php loop so i really need to find a way for jquery to know which div it is working with even they all have the same div id? i can have php do a increasing number and append it to the class and then on the jquery side ?? see this is where im stuck

i have no idea how to make this work dynamically

Upvotes: 0

Views: 739

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You have duplicate ids for the slidingDiv elements. id of an element must be unique in a document

From doc for id-attribure

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

<!-- DIV 1-->
<a class="show_hide" href="#" rel="#slidingDiv1">View</a>
<div id="slidingDiv1" class="toggleDiv" style="display: none;">
    <div class="right">
        DIV 1

    </div>
</div>
<!-- DIV 2-->
<a class="show_hide" href="#" rel="#slidingDiv2">View</a>
<div id="slidingDiv2" class="toggleDiv" style="display: none;">
    <div class="right">
        DIV 2

    </div>
</div>
<!-- DIV 3-->
<a class="show_hide" href="#" rel="#slidingDiv3">View</a>
<div id="slidingDiv3" class="toggleDiv" style="display: none;">
    <div class="right">
        DIV 3

    </div>
</div>

Also, need to use :visible instead of :hidden

$('.toggleDiv:visible').slideUp(options.speed, options.easing);

Demo: Fiddle

Upvotes: 1

Related Questions