Question

I feel sure this should already be covered here, but I haven’t been able to track down a question that specifically deals with this.

I have 2 divs within a page, like this…

<div class="span4 section">
    ...content...
</div>
<div class="span8 section">
...content...
</div>

I need to implement an onclick that will hide the span4 div and change the class of the span8 div to span12, and after that has been done be able to revert it back (using jQuery.toggle, I assume).

I can successfully do one or the other, but can’t get both things to work at the same time using my somewhat limited JS/jQuery knowledge!

Answer 1

you should add another class name to you span8 class, e.g. toggleSpan and then

$('.clickElement').click(function () {
  $('.span4').toggle(); // this toggles only visibility
  $('.toggleSpan').toggleClass('span8 span12');
});

assuming that the element you want to use as trigger has the class clickElement