Problem using toggleclass to change the span of the div

I am using bluepri开发者_Go百科nt 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.

This code should do what you're after:

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

You can bind the click event to all divs without the each loop. Also, you can use the :gt() greater-than selector and then toggle() the visibility of those spans

$("div").click(function() {
    $(this).find("span:gt(19)").toggle();
});

1. you don't want to toggle classes on all divs you have, rather just the one with content

2. you can even simplify this code more:

   $('#toggler').click(function(){ $('#content').toggleClass('span-20 span-24'); });

the #toggler.click() is just one of events that can run the toggleClass(), in your HTML it could be onload or whatever:

$('#content').toggleClass('span-20 span-24'); //main code (and all of it, too)

example: http://jsfiddle.net/hhMFs/1/

You can also do this:

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