How to change the css of a div using the click function on jQuery, but however twice instead of once?


Tags: jquery,css,onclick

Problem :

This is the code I am using:

jQuery

$(document).ready(
function(){
    $("#button").click(function () {
        $('.text').css('max-width', '800px');
        $('.moretext').css('max-width', '800px');
    }); 

});

I am currently using the code above to edit the style of text. When the user clicks the button, the max-width of the two divs (text and moretext) change to 800px. This is working perfectly however, how do I make it so that when the user clicks the button the max-width changes to 800px, then when he clicks again, it changes to 900px, and on the third click, 1000px, and on the fourth click, back to 800px?



Solution :

$(document).ready(function() {
  function getWidth(width) {
    if (!width || width >= 1000) {
      return 800;
    }

    return width + 100; 
  }

  $("#button").click(function () {
    var textMaxWidth     = parseInt($('.text').css('max-width'));
    var moreTextMaxWidth = parseInt($('.moretext').css('max-width'));

    $('.text').css('max-width', getWidth(textMaxWidth) + 'px');
    $('.moretext').css('max-width', getWidth(moreTextMaxWidth) + 'px');
  }); 

});

Demo: http://jsbin.com/fobayo/1/edit?js,output


    CSS Howto..

    How to remove “left” value bootstrap popover

    How to transform a production to LL(1) for a list separated by a semicolon?

    how to load all css and js at a time in Cakephp

    How to indent input controls for a nested HTML list using CSS to a single column

    How to have background between two handles of jQuery Slider using css gradient

    How to Fix text in Html with CSS

    How to set numerous links in a single line with CSS?

    How to use the css height attribute for showing scroll bar in HTML table

    CSS: Is there a limit on how many classes an HTML element can have?

    How to change scrollbar css at runtime with javascript?

    How large can CSS values be?

    How can i apply css stylesheet to single specific element?

    How to remove dash inside text with CSS?

    How to make pop up div locked to the page coordinates in jQuery

    How to make CSS visible only for Android phone UC browser

    How to make jQuery target and attach a plugin call to hundreds of CSS ID's with an ID number at the end of them?

    How to make elements appear under a
      in Firefox & IE8?

    How to reduce the number of sprites when using css sprite technique

    How to style this value with jQuery

    How to use custom underline with breakline in CSS?

    How can I get the body to continue look the same when a div inside overflows to the right?

    python how to parse css file as key value [closed]

    How to Skew divs with css

    List-style: how to hide that extra empty space

    How can I use a data attribute to set a background-image in CSS?

    How to run CSS text animation in a sequence. (one line of text after another)

    how to have the text under the logo css

    CSS vs jQuery How to create dynamic table style (zebra) without others plugins?

    jQuery .animate() sets display:none, how to avoid?

    How to force text wrapping with floated elements