Using jQuery to toggle CSS properties

Question

Using jQuery to toggle CSS properties

I'm having trouble switching between a CSS column layout and a normal layout for a div element with the ID 'article'. The jQuery script I wrote doesn't seem to work properly, as the entire thing disappears. Can anyone advise me on how to remove the CSS properties using jQuery in the toggle function? I've come across examples like the one below, but they don't seem to be effective. Can someone please guide me on the correct approach?

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

javascript jquery css

Answer 1

Answer №1

If you want to change the CSS of an element, you can easily do so using addClass and removeClass methods.

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

Simply use jQuery like this:

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

I have created a simple demo on JSFiddle for you to check out: http://jsfiddle.net/VXmZp/

Answer 2

If you want to change the CSS of an element, you can easily do so using addClass and removeClass methods.

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

Simply use jQuery like this:

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

I have created a simple demo on JSFiddle for you to check out: http://jsfiddle.net/VXmZp/

Answer 3

Answer №2

CHECK IT OUT LIVE

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

Answer 4

CHECK IT OUT LIVE

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

Answer 5

Answer №3

Looks like I was beaten to the punch.. I always end up spending way too much time on my fiddles: http://jsfiddle.net/e18Rz/ Using the toggleClass method as suggested by user tymeJV is indeed a better approach.

Update - I have simplified the example to use only the toggleClass method - check it out here: http://jsfiddle.net/e18Rz/1/

Answer 6

Looks like I was beaten to the punch.. I always end up spending way too much time on my fiddles: http://jsfiddle.net/e18Rz/ Using the toggleClass method as suggested by user tymeJV is indeed a better approach.

Update - I have simplified the example to use only the toggleClass method - check it out here: http://jsfiddle.net/e18Rz/1/

Using jQuery to toggle CSS properties

Answer №1

Answer №2

Answer №3

Similar questions

An error occurred when attempting to run the command npm run compile:sass, displaying the message: npm ERR! missing script:

Setting a date in Angular Material 2 without closing the mdMenu

Implementing AJAX for PHP error handling

Is there a way to automatically update the input value when I refresh the page following a click event?

Unveiling the mystery behind the inner workings of the (function(){

Automatically choose radio buttons within an li element in a loop

Determine if the "Enter" key has been pressed and validate the

JavaScript threw an error with message: 'Unexpected identifier' that was not caught

What are the steps for implementing a equirectangular image in WebXR with three.js?

Unable to display images in the ngImgCrop upload preview modal screen

Generatively generating a new element for the react application to be mounted on

Unlocking hidden gridview column values with the power of jQuery

Explore button that gradually decreases max-height

prompting the JavaScript hangman game to identify the letters in the "selected word"

Locate all posts associated with the specified User ID

Utilizing BEM Class Names in React

Implementing a PHP button update functionality sans utilizing an HTML form

What is the function type in React-Native?

ng-grid cell onclick callback

Ways to ensure certain code is executed every time a promise is resolved in Angular.js