jQuery function to change CSS

Question

I have the following function:

$(document).ready(function () {
    $('.contents').hide();
    $('.slide').click(function () {
        var $this = $(this);
        $(this).siblings('.contents').slideToggle(200, function () {
            $this.text($(this).is(':visible') ? 'close' : 'open');
        });
    });
});

and would like to add a further function to the click function. I'm new to jQuery and tried to learn but still does not understand to read it. I thought I can create and append an if-clause but still struggle with that. So I have something like that:

$this.css($('.year').is(':visible') ? 'color', 'red' : 'color', 'green');
if the click function takes place and the .contents is visible change the css setting of .year to red and if not use color green

It would be great if someone can help me out.

Thanks alot.

$this.css('color', $('.year').is(':visible') ? 'red' : 'green'); (Move the 'color',part before the ?:) — Rob W
– Rob W, Commented May 26, 2013 at 16:23
hello and thanks for answering. this does not work. maybe i forgot to say somehting. i will update my question. — bonny
– bonny, Commented May 26, 2013 at 16:25
Note that .is(':visible') will return true if any element with the .year class is visible, if you have more than one element with that class it can be an issue. — adeneo
– adeneo, Commented May 26, 2013 at 16:26
Note that elements with visibility: hidden or opacity: 0 are considered visible. Visible elements need to have a width or height that is greater than zero. — Justin John
– Justin John, Commented May 26, 2013 at 16:43

A. Wolff · Accepted Answer · 2013-05-26 16:59:54Z

1

Is it what you are looking for?

http://jsfiddle.net/m6WrV/4/

$(document).ready(function () {
    $('.content').hide();
    $('.slide').click(function () {
        var $this = $(this);
        $(this).siblings('.content').slideToggle(200, function () {
            $this.text($(this).is(':visible') ? 'click to close' : 'click to open');
            $(this).closest('.aai').find('.head').css('color', $(this).is(':visible') ? 'red' : 'green');
        });

    });
});

answered May 26, 2013 at 16:59

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

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

3 Comments

A. Wolff Over a year ago

Cool, but honestly, Rob W gives you the answer 47 min ago :)

Justin John Over a year ago

I think, $(this).parent() can be used instead of $(this).closest('.aai').

A. Wolff Over a year ago

@JustinJohn Could be here of course but at least closest let you modify html without having to re-encode function, e.g, if you wish to wrap .slide element in other wrapper. .parents('.aai').first() is an other option.

Roemer · Accepted Answer · 2013-05-26 16:28:36Z

1

Probably you looking for something like

$this.css( 'color', $('.year').is(':visible') ? 'red' : 'green') );

You maybe also have to check if how is(':visible') works on the set of returned elements from $('.year'). Could be that is works different when some are visible and others aren't.

edit: as @adeneo points out, is(':visible') returns true if any element in the set is visible.

answered May 26, 2013 at 16:28

Roemer

3,5861 gold badge18 silver badges32 bronze badges

3 Comments

bonny Over a year ago

hello and thanks for abswering. this does not work. i already updated my question. have a look at the if-clause comment. thanks.

Roemer Over a year ago

How do you use the proposed code? What happens, and what does not happen? Maybe you can make as JS Fiddle to show it better.

bonny Over a year ago

jsfiddle.net/m6WrV here you can see it. now i would like to change the color if the headline to red when the click function takes place. So if the content is visible change color of headline.

Tafadzwa Gonera · Accepted Answer · 2013-05-26 16:46:06Z

1

Perhaps this might work for you but the code is not as concise as your snippet:

if ($(".year").is(":visible")) {
   $this.css({ "color" : "red" });
} else {
   $this.css({ "color" : "green" });
}

edited May 26, 2013 at 16:46

answered May 26, 2013 at 16:31

Tafadzwa Gonera

3527 silver badges20 bronze badges

3 Comments

Justin John Over a year ago

Wrap :visible with quotes i.e is(":visible").

Tafadzwa Gonera Over a year ago

Thanks I totally missed that

bonny Over a year ago

jsfiddle.net/m6WrV here you can see it. i would like to change the color of the headline to red when the click function takes place. So if the content is visible change color of headline.

Collectives™ on Stack Overflow

jQuery function to change CSS

3 Answers 3

3 Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related