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 create a “shiny” effect like this using CSS gradients?

    How to make this inner div vertically centered? (Using CSS)

    How to put a picture on top of other without using Positioning, Divs or Backgrounds?

    How to change css dynamic by javascript

    How to write a fallback for css files not loaded, loading too long and blocked? [duplicate]

    How to make interactive logo design without flash?

    How to set % height in fluid layout?

    Bootstrap table how hidden, when toggled visible using javascript it does not show correctly

    How to make css background-blend-mode work with gradients?

    How to keep css elements from moving during transition

    How combine multiple media destinations (screen, print) with width restriction?

    How to center CSS Navigation Menu

    How to modify a div with another div with Css

    How to add a sliding div to these CSS Message Bubbles?

    How to vertical align text in the middle without changing size of a div

    How can I change CSS style definition to make border on specific div

    How do I set a CSS url to an absolute location?

    How to make fonts display on web cross-platform?

    How Do I Limit Scrolling to a Fixed Div?

    How to select elements when there is a space in an HTML class

    How to vertically center an HR element

    How to use CSS to replace or change text? [duplicate]

    How to include PHP code in CSS?

    how to make this div margin to zero and more nature [closed]

    HTML5 - Show Items Side By Side

    How do align texts in the child div

    How to avoid orphaned headings in CSS columns?

    CSS! Horizontal resizable menu ul li, how to spread it on full width of the display?

    How to extend this navigation bar off the page?

    CSS Hover Events, How to Trigger a Parent's Effect