jQuery toggle with css properties

Question

I am trying to toggle between css column layout and a normal layout of a div element with id 'article', but the jQuery is not working... the whole thing just disappears. can anyone tell me how to remove the css properties with jQuery in the toggle function ? I read that you can remove properties like have it below... but it is not working... can anyone please tell me the right way to do it ?

function changeview(orientation){
    $('#article').toggle(function(){
       $('#article').css('-webkit-column-width' : '768px', 'height' : '885px');                          
    },function(){                                 
        $('#article').css('-webkit-column-width' : '', 'height' : '');                              
    });
}

don't set CSS properties to empty strings ''. If you want to set height to the default, set it to auto. Same with -webkit-column-width, although you can use just column-width for that and it will work in modern browsers. — MattDiamant
– MattDiamant, Commented Mar 13, 2013 at 19:10
you'd be better off adding/removing classes. Also your syntax is incorrect. Use $('#article').css({'-webkit-column-width':'768px'}); or $('#article').css('-webkit-column-width', '768px'); — Derek
– Derek, Commented Mar 13, 2013 at 19:12
@MattDiamant what should I use instead of toggle then ?. I tried it with the auto but not working. — CodeWeed
– CodeWeed, Commented Mar 13, 2013 at 19:21

tymeJV · Accepted Answer · 2013-03-13 19:19:23Z

1

You can use the addClass and removeClass for this.

<style>
    .newCSS {
        -webkit-column-width : 768px;
        height : 885px;
    }
</style>

and the jQuery

$('#article').toggleClass("newCSS");

Also made a fiddle (simple demo): http://jsfiddle.net/VXmZp/

edited Mar 13, 2013 at 19:19

answered Mar 13, 2013 at 19:14

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

1 Comment

Roko C. Buljan Over a year ago

what about only .toggleClass('newCSS'); ?

Roko C. Buljan · Accepted Answer · 2013-03-13 19:23:05Z

1

LIVE DEMO

function changeview(orientation){ 
    $('#article').click(function(){    
       var has_H = $(this).height() >= 885 ;         
       $(this).css({
          '-webkit-column-width': has_H ? 'auto' : 768,
                        'height': has_H ? 'auto' : 885
       }); 
    });
}

edited Mar 13, 2013 at 19:23

answered Mar 13, 2013 at 19:11

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

1 Comment

MattDiamant Over a year ago

Wrap the contents of .css in an object {} :-)

jarmie · Accepted Answer · 2013-03-13 19:39:50Z

0

beat me to it.. always spend too long with my fiddles : http://jsfiddle.net/f64Wy/ toggleClass as suggested by tymeJV is even better.

update - same example stripped down to use just toggleClass - http://jsfiddle.net/f64Wy/1/

edited Mar 13, 2013 at 19:39

answered Mar 13, 2013 at 19:24

jarmie

3831 gold badge3 silver badges10 bronze badges

1 Comment

CodeWeed Over a year ago

thanks for your answers... I will try it with the toggleClass

Collectives™ on Stack Overflow

jQuery toggle with css properties

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related