Using this jQuery script for multiple divs

Question

so I am totally new to jQuery and just tinkering at the moment, I am using a test script at the moment (below) what I want to achieve is to have images where when its clicked a div slides down with more info - similar to the new google images effect.

The problem with the script below is that it loads with the div open (I need it to open on click) and also, this will only work on one div, do I need to do the script multiple times for multiple divs?

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>
$(document).ready(function() {
     $('#clickme').click(function() {
          $('#me').animate({
               height: 'toggle'
               }, 500
          );
     });
});
</script>


<div id="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
  Click here to toggle me in and out =)
</div>
<img id="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It&#039;s me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />

have you considered assigning the function to a class and then assigning the class to a div? — Linens
– Linens, Commented Mar 8, 2013 at 20:15

Terry · Accepted Answer · 2013-03-08 20:28:10Z

2

First of all, you cannot use the same ID for multiple elements. Instead, use a class. jQuery will only select the first occurrence of an ID and will ignore the rest.

Secondly, you will need to provide the function some context - i.e., $(this).next()- This is because when you have multiple elements with the clickme class, the browser will know that it will have to select the next occurring element with a class of me, instead of any other .me element.

$(document).ready(function() {
    // Hide image onload
    $('.me').hide();

    // Provide context for each click event
    $('.clickme').click(function() {
         $(this).next('.me').animate({
              height: 'toggle'
              }, 500
         );
    });
});

HTML:

<div class="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
  Click here to toggle me in and out =)
</div>
<img class="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It&#039;s me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />

edited Mar 8, 2013 at 20:28

answered Mar 8, 2013 at 20:17

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Josh Burgess Over a year ago

That still won't address his second issue, which is that the image is visible when the document loads.

Terry Over a year ago

It will address /part/ of his issue though. Revising my answer as we speak.

AppleTattooGuy Over a year ago

Thank you so much for your help :-) it's all pretty easy stuff really I guess, we all start from somewhere! thanks again.

JLRishe · Accepted Answer · 2013-03-08 20:21:38Z

1

To start off with the div hidden, you can set it to display: none, either using inline styles or (preferably) a <style> element or CSS file.

Then you can uses classes and relative positioning to achieve what you're trying to do:

<script>
$(document).ready(function() {
     $('img.clickable').click(function() {
          $(this).prev('.image-info').first().animate({
               height: 'toggle'
               }, 500
          );
     });
});
</script>


<div style="background-color: #333333; color: #FFFFFF; 
      padding: 10px; width: 200px; cursor:pointer; display:none;" 
      class="image-info">
  Info about the image you clicked
</div>
<img src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" 
     alt="It&#039;s me....ah!!!" title="Allen Liu" width="100" height="77" 
   class="alignnone size-full wp-image-552 clickable" style="border: none;" />

answered Mar 8, 2013 at 20:21

JLRishe

102k19 gold badges138 silver badges171 bronze badges

2 Comments

Terry Over a year ago

I personally refrain from using CSS to hide elements that are revealed by JS thereafter, considering that some (although a fractionally small percentage) of users have JS disabled on their browsers. If that is the case, the element will not be displayed when the user loads the page.

JLRishe Over a year ago

That's a good point. Hadn't thought of using JS to hide stuff when the page loads instead of using CSS, but I can see the value in doing that.

Josh Burgess · Accepted Answer · 2013-03-08 20:23:00Z

0

Do what the above commenter suggested, and change your image to a class based approach.

Secondly, add this to the beginning of your document.ready block

$('.me').hide();

Fiddle here

edited Mar 8, 2013 at 20:23

answered Mar 8, 2013 at 20:17

Josh Burgess

9,6071 gold badge35 silver badges47 bronze badges

3 Comments

Josh Burgess Over a year ago

@Dom Yeah, I sure did. How does this not answer that?

Terry Over a year ago

"this will only work on one div, do I need to do the script multiple times for multiple divs?" You will need to provide the context upon the firing of each .click() event.

Josh Burgess Over a year ago

Which is presented in the fiddle. You're right, I made the mistake of glossing over that first question and went straight for the second. I updated my answer to point to a commenter with the appropriate response for the first. Thank you.

Collectives™ on Stack Overflow

Using this jQuery script for multiple divs

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related