CODEWITHSUNDEEP
javascriptjqueryhtmlcssclick
Mac
Mac

Reputation: 151

jQuery, add css rule to specific element on click

I want after click on button my div with class text-internal(specific one - I I have more than one div with class text-internal) obtain max-height. As I said only specific div should obtain max-height - only this one, which is in container, which was clicked, others, which is not clicked not obtain max-height I don't know if I explain it correctly and clear.

 <div class="single-offer-text">
        <div class="text-internal">
            <?php echo $params->get('mytextarea'); ?>
        </div>
        <button class="read-more">Read more</button>
    </div>

JQUERY

jQuery('.read-more-hide').click(function() {
    jQuery('.text-internal').css('maxHeight', '150px');
});

Upvotes: 0

Views: 77

Answers (1)

charlietfl
charlietfl

Reputation: 171700

Use any number of traversal methods to isolate specific instance.

prev() is a simple one that fits your scenario

jQuery('.read-more-hide').click(function() {
    jQuery(this).prev('.text-internal').css('maxHeight', '150px');
});

Or if relationship is not so simple you can traverse up to a common parent using closest() and then find() within that parent

jQuery('.read-more-hide').click(function() {
    jQuery(this).closest('.single-offer-text').find('.text-internal').css('maxHeight', '150px');
});

Upvotes: 1

Related Questions