Search code examples
javascriptjqueryslidedownclosest

How to use .closest to toggle a paragraph?

I'm trying to slidedown a paragraph using closest. This is what I have so far.

JS

$(".info_btn").css("-webkit-transition", "-webkit-transform 0.25s ease-in-out");

var info_btn_DEG = 0;

$(".info_btn").toggle(function() {
$(this).closest('p').slideDown("250");
info_btn_DEG += 45;
$(this).css("-webkit-transform", "rotateZ(" + info_btn_DEG + "deg)");
$(this).fadeTo("250", 0.65);
}, function() {

$(this).closest('p').slideDown("250");
info_btn_DEG += 45;
$(this).css("-webkit-transform", "rotateZ(" + info_btn_DEG + "deg)");
$(this).fadeTo("250", 0.3);
});

I also have this set up in a JSbin here for a complete look:

http://jsbin.com/atinap/7/edit

Solution

  • You can get to the "article_total" level (change that to a class, you should not have multiple identical IDs on one page) then from there you can target the p you need

    the below code assumes you changed the id to class

    $(this).closest('.article_wrapper').find('YOUR_ELEMENT_HERE');