Question

$('.box').click(function(){
    $(this).find('p').toggle(
        function () {
            $(this).css({"color" : "red"});
        },
        function () {
            $(this).css({"color" : "black"});
        }
    );
});

if i execute this script the ‘p’ color will change if i click on the ‘p’ not on the .box class why ? And how to i make it so that ‘p’ color changes when i click on the .box div

Answer 1

.toggle() assigns event handlers to the click event, what you want is this:

$('.box').toggle(function(){
    $('p', this).css({"color" : "red"});
},  function () {
    $('p', this).css({"color" : "black"});
});

Every time you wrap a new function, this refers to the element you’re dealing with (at least, for this example, see more about how closures work here), so at first it’s the .box selector match, then it’s each p inside, you want to assign a click toggle on .box to switch p‘s color, so you use a .toggle() on .box directly.