CODEWITHSUNDEEP
javascriptjqueryhtmlheader
jerneva
jerneva

Reputation: 465

Change colour of H3 tag onclick

I want to change the color of my h3 tags (3 of them in total) to red with the onclick event, then change it back to the original color once another h3 tag has been selected.

The now selected h3 tag becomes red.

$(document).ready(function() { 
    $('p.order').on('click', function() { 
        $('h3').css('color', 'red');
    }); 
});
 
<div id="accordion">
    <h3 class="alert"><p class="order">Orders</p></h3>
    <h3 class="cut"><p class="restaurant"> Restaurant</p></h3>
    <h3 class="icon"><p class="Account"> Account</p></h3>
</div>

Upvotes: 3

Views: 2550

Answers (2)

GrafiCode
GrafiCode

Reputation: 3374

P tag is inside an H3 tag. to change the css of the parent H3, you have to use jquery parent function:

$('p').on('click', function() { 
    $(this).parent('h3').css('color', 'red');
});

this way it works for all Ps and H3s

Upvotes: 3

lmgonzalves
lmgonzalves

Reputation: 6588

You can do this:

$(document).ready(function() { 
    $('#accordion h3').on('click', function() {
        $('#accordion h3').css('color', 'black');
        $(this).css('color', 'red');
    });
});

DEMO

Upvotes: 3

Related Questions