CODEWITHSUNDEEP
javascriptjquerydrupal
Dev B
Dev B

Reputation: 49

Using jQuery per each div

I have 4 restaurant timings and I want to see each of their opening hours individually. Right now if I click on opening hours link all 4 divs are affected by that. How can I make sure that if I click on the opening hour link of one restaurant only that restaurant's timings are shown.

So, if you click the open today link in the first section, only the timings of that restaurant should be shown/hide – Dev B 1 min ago edit
I can not assign individual divs. The divs are being created on its own the php wordpress template

Here is the fiddle so far

     jQuery(document).ready(function($) {
        $('.oh-current-open').each(function(index){
          $(this).click(function() {
            $('.oh-wrapper').animate({
               'height': 'toggle'
          });
       });
     }); 
   });

http://jsfiddle.net/jpv4o93n/

Upvotes: 0

Views: 49

Answers (1)

Taplar
Taplar

Reputation: 24965

Each section is segregated by a travelRow. You can find the parent travel row that encapsulates all the related elements, and then find the nested oh wrapper that should be animated.

Edit: Also explicitly writing an each is not necessary. click will do an each on the elements as part of its operation.

 jQuery(document).ready(function($) {
   $('.oh-current-open').click(function() {
     $(this).closest('.travelRow').find('.oh-wrapper').animate({
       'height': 'toggle'
     });
   });
 });

Upvotes: 1

Related Questions