Change CSS Definition with jQuery when button is clicked

Question

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

All Task Activity tab
Comments tab

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?

Are you sure you want to change definition? Usually such tasks resolve with adding/removing additional class wich change behavior — Vasiliy vvscode Vanchuk
– Vasiliy vvscode Vanchuk, Commented Jun 16, 2015 at 5:40
You can add a <style> element to the <head> that overrides the previously defined styles for the class. But in many cases it's easier to actually add a new class for affected elements. — Mr Lister
– Mr Lister, Commented Jun 16, 2015 at 5:41

Vasiliy vvscode Vanchuk · Accepted Answer · 2015-06-16 05:42:27Z

2

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; }

answered Jun 16, 2015 at 5:42

Vasiliy vvscode Vanchuk

7,1992 gold badges24 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JasonDavis Over a year ago

You're right I read that right after making the post, thanks for posting it though so I dont have to delete

Harigovind R · Accepted Answer · 2015-06-16 05:42:27Z

2

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

answered Jun 16, 2015 at 5:42

Harigovind R

8268 silver badges19 bronze badges

Comments

anjaly · Accepted Answer · 2015-06-16 05:47:14Z

0

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();
});

edited Jun 16, 2015 at 5:47

answered Jun 16, 2015 at 5:43

anjaly

5186 silver badges12 bronze badges

1 Comment

Vasiliy vvscode Vanchuk Over a year ago

you can use .style or .css() Also you should write into "style" attribute not into "display"

Collectives™ on Stack Overflow

Change CSS Definition with jQuery when button is clicked

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related