CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3330820
user3330820

Reputation: 541

JQuery. Only apply function to associated content/divs

I'm fairly new to JQuery but I think what I want can be accomplished, I'm just unsure how to do it.

I essentially have 2 buttons on a page. What I want is when you click one button it displays the content "l-text" and hides the button. It works the way I want it just open and closes the content/button for both of them. I want it to only grab the associated content.

HTML

<div class="l-rows">
<div class="l-buttons">
    <div class="l-images">
        <img src="/img/img.jpg" alt="">
    </div>
    <div class="l-text">
        <h1>
            HEADER
        </h1>
        <p>
            Lorem ipsum dolor sit amet.
        </p>
    </div>
</div>
<div class="l-buttons">
    <div class="l-images">
        <img src="/img/img2.jpg" alt="">
    </div>
    <div class="l-text">
        <h1>
            SECOND HEADER
        </h1>
        <p>
            Lorem ipsum dolor sit amet.
        </p>
    </div>
</div>

JQuery

/* Close Button - Open Text */
    $('.l-text').append('<i class="fa fa-times"></i>');
    $('.l-images').click(function(){
        $('.l-images').css({
            'opacity':'0',
            'transition':'all 300ms ease-in-out',
        })
        $('.l-images').delay(300).queue( function(next){ 
            $('.l-images').css('display','none'); 
            next(); 
        });
        $('.l-text').css({
            'opacity':'1',
            'transition':'all 300s ease-in-out',
        })
        $('.l-text').delay(300).queue( function(next){ 
            $('.l-text').css('display','inherit'); 
            next(); 
        });

    });
/* Close Text - Open Button */
$('.l-text .fa-times').click(function(){
    $('.l-text').css({
        'opacity':'0',
        'transition':'all 300mss ease-in-out',
    })
    $('.l-text').delay(300).queue( function(next){ 
        $('.l-text').css('display','none'); 
        next(); 
    });
    $('.l-images').css({
        'opacity':'1',
        'transition':'all 300s ease-in-out',
    })
    $('.l-images').delay(300).queue( function(next){ 
        $('.l-images').css('display','inherit'); 
        next(); 
    });
});

So instead of renaming the 2nd set of divs and writing more code. How can I make the click function only grab the associated content?

Thanks for any help and let me know if what I asked doesn't make any sense!

Upvotes: 1

Views: 50

Answers (2)

Ziv Weissman
Ziv Weissman

Reputation: 4526

You can use $(this)-

I've arranged the close option,

Do the same for the opening...

/* Close Button - Open Text */
$('.l-text').append('<i class="fa fa-times"></i>');
$('.l-images').click(function(){
    $(this).css({
        'opacity':'0',
        'transition':'all 300ms ease-in-out'
    });
    $(this).delay(300).queue( function(next){ 
        $(this).css('display','none'); 
        next(); 
    });
    $(this).parent(".1-buttons").find('.l-text').css({
        'opacity':'1',
        'transition':'all 300s ease-in-out'
    });
    $(this).parent(".1-buttons").find('.l-text').delay(300).queue( function(next){ 
         $(this).parent(".1-buttons").find('.l-text').css('display','inherit'); 
        next(); 
    });

});

working fiddle

Upvotes: 1

naman kalkhuria
naman kalkhuria

Reputation: 404

 $('.l-images').click(function(){
        var $images = $(this);
        $images.css({
            'opacity':'0',
            'transition':'all 300ms ease-in-out',
        })
        $images.delay(300).queue( function(next){ 
            $(this).css('display','none'); 
            next(); 
        });
        $images.next().css({
            'opacity':'1',
            'transition':'all 300s ease-in-out',
        })
        $images.next().delay(300).queue( function(next){ 
            $(this).css('display','inherit'); 
            next(); 
        });

    });

Upvotes: 0

Related Questions