CODEWITHSUNDEEP
javascriptjqueryhtml
soum
soum

Reputation: 1159

Show and hide divs on click

What am I doing wrong? I am trying to show divs when the thumbnail is clicked. I am able to show the first div, but for some reason, the next div is not showing. I cannot figure out what I might be missing.

<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>

Upvotes: 4

Views: 219

Answers (5)

Mark Schultheiss
Mark Schultheiss

Reputation: 34158

your index is 2 as selected, use something like this:

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

index is 0 based.

Note that the first returns 0 as it is the first div, and 2 on the second as it is the third div, so you need to isolate to the divs with the .clickImage class

Here is a simple fiddle to demonstrate: http://jsfiddle.net/zfZE2/

Upvotes: 0

asifsid88
asifsid88

Reputation: 4701

Try this way: 

<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>

Upvotes: 0

Gaurav Agarwal
Gaurav Agarwal

Reputation: 14843

I don't think index() is doing what you are intending for it to do.

I would use a dataImageId attribute or something similar to uniquely identify the images.

Upvotes: 0

Timmetje
Timmetje

Reputation: 7694

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

Which is the right corresponding popup.

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

This is because .textVertical is also seen as a sibling of clickImage, thus the 2nd clickImage you clikc will be the 3rd sibling (index).

Change

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

To

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

http://jsfiddle.net/rNSLE/

Upvotes: 0

Curtis
Curtis

Reputation: 103348

Try including a selector in the .index() method:

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

Upvotes: 5

Related Questions