Geek Answers Handbook

Show and hide divs on click

What am I doing wrong? I am trying to show divs when I click on a thumbnail. I can show the first div, but for some reason the next div is not showing. I can’t understand what I can lose.

<script> $(function(){ $('.clickImage').click(function(){ $('.popUp').hide(); $('.popUp').eq($(this).index()).show(); }); }); </script> <style> .popUp{ display:none; } </style> <div id="projectContainer"> <div class="imageV clickImage"></div> <div class="textVertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel tortor sit amet magna condimentum dapibus non quis nulla. Etiam varius pellentesque quam sed faucibus. Ut libero mi, porta ac tincidunt sagittis, porttitor a elit. In non tellus eu mauris tristique gravida. In rutrum arcu ullamcorper risus consequat interdum. Sed rutrum rhoncus dolor. Suspendisse potenti.</div> <div class="imageV clickImage"></div> <div class="textVertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel tortor sit amet magna condimentum dapibus non quis nulla. Etiam varius pellentesque quam sed faucibus. Ut libero mi, porta ac tincidunt sagittis, porttitor a elit. In non tellus eu mauris tristique gravida. In rutrum arcu ullamcorper risus consequat interdum. Sed rutrum rhoncus dolor. Suspendisse potenti.</div> </div> <div> <div class="popUp">Enlarged Image 1</div> <div class="popUp">Enlarged Image 2</div> </div>
+4
source share
5 answers

Try turning on the selector in the .index() method:

 $(function(){ $('.clickImage').click(function(){ $('.popUp').hide(); $('.popUp').eq($(this).index(".clickImage")).show(); }); });
+5
source

I don't think index() does what you intend to do.

I would use the dataImageId attribute or something similar to a unique image identification.

0
source

your index will be selected as 2, use something like this:

 $('.clickImage').click(function () { var i=$('.clickImage').index(this); $('.popUp').hide(); $('.popUp').eq(i).show(); });

index is based on 0.

Note that the first returns 0 because it is the first div and the second returns the second because it is the third div, so you need to highlight divs with the class .clickImage

Here is a simple fiddle for demonstration: http://jsfiddle.net/zfZE2/

0
source

Your first clickable clickImage will work because it will return index:0.

This is the corresponding corresponding popup.

But for the second clickImage it will return an index: 2, which does not have a corresponding popup. There are only 0 and 1.

This is due to the fact that .textVertical also considered as the sibling of clickImage , so the 2nd click of Image, which you clikc will be the third student (index).

Edit

  $('.popUp').eq($(this).index()).show();

For

  $('.popUp').eq($(this).index('.clickImage')).show();

http://jsfiddle.net/rNSLE/

0
source

Try as follows:

 <script> $(function(){ $('.clickImage').click(function(){ $('.popUp').hide(); $(this).next().next().show(); }); }); </script> <style> .popUp{ display:none; } </style> <div id="projectContainer"> <div class="imageV clickImage"></div> <div class="textVertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel tortor sit amet magna condimentum dapibus non quis nulla. Etiam varius pellentesque quam sed faucibus. Ut libero mi, porta ac tincidunt sagittis, porttitor a elit. In non tellus eu mauris tristique gravida. In rutrum arcu ullamcorper risus consequat interdum. Sed rutrum rhoncus dolor. Suspendisse potenti.</div> <div class="popUp">Enlarged Image 1</div> <div class="imageV clickImage"></div> <div class="textVertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel tortor sit amet magna condimentum dapibus non quis nulla. Etiam varius pellentesque quam sed faucibus. Ut libero mi, porta ac tincidunt sagittis, porttitor a elit. In non tellus eu mauris tristique gravida. In rutrum arcu ullamcorper risus consequat interdum. Sed rutrum rhoncus dolor. Suspendisse potenti.</div> <div class="popUp">Enlarged Image 2</div> </div>
0
source

More articles:


All Articles