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

    How to write this CSS-Selector (Target img from previous Anchor-Tag)

    how to apply div on hover my table td

    How to combine components in HTML header

    How to insert a div below dynamic divs row after onclick

    How to check if css box-shadow is supported (jQuery)?

    How to parse and extract CSS selectors as strings?

    How do I get my divs to ease in right after eachother on page load?

    How do I add CSS styles to an ASP.NET UserControl from the code-behind?

    How to add an attribute other than style attributes to css?

    How to center an iframe, responsive

    How does JS DOM manipulation affect CSS rule matching?

    How to create overlaying papers (pile) - CSS / HTML

    How to fix smooth text in IE?

    How can I refactor some repetitive HTML and CSS?

    How use a -ms-expand in GWT (Google Web Tolkit)

    How to add css to a div once it hits the top of the page (when scrolling)?

    How do I go about targeting the literal “first-child” of a div, styling depending on element type

    How to give an element with an id a certain CSS property if it has a class?

    How can I use webpack to copy files to the distribution folder?

    How to scale a .svg being the background in a div?

    how to align image and text when floating to image

    First and Second touch of a button, how to show images at different times?

    Child div's evenly spaced and flushed to side of parent: how to?

    How do you structure css files for a web project?

    How to add Button over image using CSS?

    How to select attribute value for a selected element with wombat

    How to add and use jquery and css file in joomla module..?

    How to reference all the rows except the first one using css

    How to get dynamic css layout like that:

    When I say position:fixed, how do I tell mobile browsers I mean it?