Question

I am developing my first major project with jQuery functions implemented inside my HTML. I am building an image gallery.

There is a jQuery function on my HTML page that slides a panel down between my header and thumbnails. Note – the thumbnails are created in HTML and CSS; not in an array of any sorts.

I want to have it so that no matter which thumbnail the enduser clicks on, it calls the function to slide the panel down, the problem is that the function can only be called by one thumbnail at a time (by giving it an “id” attribute). When I give the id attribute to all of the thumbnails, the function is only called when the first thumbnail is clicked.

Here is the jQuery function:

jQuery.fn.blindToggle = function(speed, easing, callback) {
var h = this.height() + parseInt(this.css('paddingTop')) +                                            
    parseInt(this.css('paddingBottom'));
return this.animate({marginTop: parseInt(this.css('marginTop')) <0 ? 0 : -h}, speed, 
    easing, callback);  
};

$(document).ready(function() {
    var $box = $('#box')
    .wrap('<div id="box-outer"></div>');
    $('#blind').click(function() {$box.blindToggle('slow');  
});    
});


<div class=thumbbox>
     <div class="thumb" id="blind";></div>
</div> 

Answer 1

Why don’t you use a class instead of an ID?

Like so:

$('.blind').click(function() {$box.blindToggle('slow');  

And in your markup:

<div class=thumbbox>
     <div class="thumb blind"></div>
</div>