CODEWITHSUNDEEP
jquery
Lee
Lee

Reputation: 999

jQuery Toggle, Hide & Change class

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!

Upvotes: 1

Views: 1035

Answers (4)

Jai
Jai

Reputation: 74738

Try this: http://jsfiddle.net/SwANP/

$('.section').click(function(){
   $('.section:eq(0)').toggleClass('span4');
   $('.section:eq(1)').toggleClass('span8 span12');
});

Upvotes: 0

imerovic
imerovic

Reputation: 78

You can use data attribute to help you with this. That should look something like this:

$('#target').click(function(event){
    if ($(this).data('toggled') == '1') {
        $('.span8').addClass('span12').removeClass('span8');
        $(this).data('toggled', '0');
    } else {
        $('.span12').addClass('span8').removeClass('span12');
        $(this).data('toggled', '1');
    }
});

Upvotes: 1

tmaximini
tmaximini

Reputation: 8503

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

Upvotes: 5

Garry
Garry

Reputation: 5074

$(this).toggleClass('span12 section');
$('.class="span4 section").hide();

call this function on click

Upvotes: 0

Related Questions