GrooveChampion
GrooveChampion

Reputation: 111

How do I make this lightbox I am creating only open on the div I am clicking?

I am working on an effect here, I will post the code as well, but here is the basic premise. I have a div containing 2 divs and one hidden div called test. When I click the containing div I want the hidden div (which is called "test") to animate only for the containing div I clicked. Right now it is opening on every single div because of how I have the code written, I am thinking I have to use "this" in order to get it to open correctly the way I want it, but I am not sure how to use it in this instance

TLDR: I want to toggle class .open on the div .test when I click the div .workImg (or workBlock), currently it is opening on every .workImg, I want it to only open on the one I click. I am very stumped, I think I need to use $(this) in here somewhere to target just the one I am clicking but cannot figure out how to apply that since all of my class names are the same...

HTML:

<div class="workCont">
    <div class="workBlock">
        <div class="workImg">
            <div class="test"></div>
            <img src="/assets/images/piece1.jpg" />
        </div>
        <div class="workName">Project</div>
    </div>
    <div class="workBlock">
        <div class="workImg">
            <div class="test"></div>
            <img src="/assets/images/piece1.jpg" />
        </div>
        <div class="workName">Project</div>
    </div>
    <div class="workBlock break">
        <div class="workImg">
            <div class="test"></div>
            <img src="/assets/images/piece1.jpg" />
        </div>
        <div class="workName">Project</div>
    </div>
</div>

CSS:

.workCont {
    width:1024px;
    margin: $center;
    overflow:hidden;
    .workBlock {
        float:left;
        margin-left:17px;
        &:nth-child(3n+1) {
            margin-left:0;
        }
        &:nth-child(1n+1) {
            margin-top:33px;
        }
        .workImg {
            background:#151515;
            width:330px;
            height:201px;
            display:inline-block;
            position: relative;
        }
        .test {
            position: absolute;
            z-index:100;
            width: 0px;
            height: 0px;
            -webkit-transition-duration: 1s;
            -webkit-transition-property: all;
            -webkit-transition-timing-function: ease-in-out;
            text-align: center;
            background: white;
            color: white;
            font-family: sans-serif;  /* Just 'cos */
        }
        .test.open {
           transform: scale(50, 50);
            top: 0px;
            left: 0px;
            width: 1000px;
            height: 1000px;
            clear:both;
        }
        .workName {
            text-align:center;
            margin-top:17px;
        }
    }
}

jQuery:

$(document).ready(function(){
    $(".workImg").click(function() {  
        $(".test").toggleClass("open");      
    });
});

Upvotes: 0

Views: 58

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

use $(this)

$(document).ready(function(){
    $(".workImg").click(function() {  
        $(this).find(".test").toggleClass("open");      
    });
});

Upvotes: 1

Related Questions