Search code examples
javascriptjqueryjquery-eventsblueprint-css

Problem using toggleclass to change the span of the div

I am using blueprint CSS framework. I have an article spanning 24 cols but I trying to use jQuery toggleclass (onclick) to reduce it to 20 cols and show the buttons for actions in the remaining 4 cols.

$("div").each(function() {
  $(this).click(function() {
   $(this).toggleClass("span-24"); 
   $(this).toggleClass("span-20");
  });
});

I have more than one div so I use each, but it does not work.

I appreciate any help.

Solution

  • This code should do what you're after:

    $("div").toggle(function() {
    $(this).attr("class", "span-24");
}, function() {
    $(this).attr("class", "span-20");
});