CODEWITHSUNDEEP
javascriptjquerycss
JasonDavis
JasonDavis

Reputation: 48933

Change CSS Definition with jQuery when button is clicked

In the image below you can see there are 2 tabs:

When the All Task Activity tab is clicked on, I need to change the CSS definition for the CSS class ".Activity-comment" to "display: block;"

When the Comments tab is clicked on, I need to change the CSS definition for the CSS class ".Activity-non-comment" to "display: none;"

So the goal is simple, both tabs will actually be showing the HTML DOM nodes for the same Div/Data. I will simply be showing/hiding records based on the clicked on tab.

enter image description here

Simple jQuery click event... 

$('#task-modal-activity-comment-btn').click(function(e) {

    //  make CSS defintion for CSS class `.Activity-non-comment` 
    // = display: none;

    e.preventDefault();
});


$('#task-modal-activity-btn').click(function(e) {

    //  make CSS definition for CSS class `.Activity-non-comment` 
    // = display: block;

    e.preventDefault();
});

Based on my 2 jQuery click events above, how could I change the CSS definition for the mentioned CSS classes?

Upvotes: 0

Views: 93

Answers (3)

anjaly
anjaly

Reputation: 518

Please try the following code

$('#task-modal-activity-comment-btn').click(function(e) {

    //  make CSS defintion for CSS class `.Activity-non-comment` 
    // = display: none;
$('.Activity-non-comment').css('display','none');

    e.preventDefault();
});


$('#task-modal-activity-btn').click(function(e) {

    //  make CSS definition for CSS class `.Activity-non-comment` 
    // = display: block;
$('.Activity-non-comment').css('display','block');

    e.preventDefault();
});

Upvotes: 0

Harigovind R
Harigovind R

Reputation: 826

You could try this.

$('#task-modal-activity-comment-btn').click(function(e) {

//  make CSS defintion for CSS class `.Activity-non-comment` 
// = display: none;
$('.Activity-non-comment').css('display','none');
e.preventDefault();
});


$('#task-modal-activity-btn').click(function(e) {

//  make CSS definition for CSS class `.Activity-non-comment` 
// = display: block;
$('.Activity-non-comment').css('display','block');
e.preventDefault();
});

give the class that you need to display by default a display block at the time of dom ready. Refer the given link for more info on jquery css selectors Jquery CSS selectors

Upvotes: 2

Vasiliy vvscode Vanchuk
Vasiliy vvscode Vanchuk

Reputation: 7169

Are you sure you want to change definition? Usually such tasks resolve with adding/removing additional class wich change behavior 

$('#task-modal-activity-comment-btn').click(function(e) {

    //  make CSS defintion for CSS class `.Activity-non-comment` 
    // = display: none;

    $('.Activity-comment').removeClass('hidden');
    e.preventDefault();
});


$('#task-modal-activity-btn').click(function(e) {

    //  make CSS definition for CSS class `.Activity-non-comment` 
    // = display: block;
    $('.Activity-comment').addClass('hidden');
    e.preventDefault();
});

where 'hidden' is

.hidden { display: none; }

Upvotes: 2

Related Questions