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


Tags: javascript,jquery,html,css,sass

Problem :

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");      
    });
});


Solution :

use $(this)

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

    CSS Howto..

    CSS - How to use “vertical-align : middle” with a table near an image?

    How to make a photo collage using html and css? [closed]

    How to take in account children for :nth-child

    how to move image vertically with css [closed]

    How to change font of select list items in the drop down

    How to use CSS Background-size: cover; but leave space for menu?

    How to add two images one in the right and other in the left side of the input textbox?

    how to get this modal window to work correctly?

    How to do simple client-side form validation using JavaScript/jQuery?

    How to properly preload images, js and css files?

    Android stock browser: How to prevent double tap closing browser

    SVG, how to evaluate the property of the svg object

    How can I animate a table row with a single column that spans multiple columns?

    How to add content to an input with css? [duplicate]

    how to set anchor tag text width using css?

    Bootstrap - how to make the image being scaled down to fit the window height?

    How to send web page in email body with css

    CSS Problem: How to make the images in a made of images touch vertically?
    .game td img { display: block; } Images come with their own white space...
    Read more

    How to style author id in WordPress?

    How to create a right border that's only 70% of its actual size?

    How to apply CSS width to a submit input on Firefox?

    how to overwrite inline styles in print css?

    Wordpress nav menu images not showing up in mobile safari

    How to check the CSS hyphens in effect using Chrome developer tools?

    How do I make a Javascript alert display only once, ever? [closed]

    How can I escape string css in sass/scss?

    How to create responsive square

    How to set minimum height for a div?

    how to set word break in table th or td, when column and table-layout auto using CSS

    how change all fonts of a telerik control by one shot