CODEWITHSUNDEEP
jquerytoggle
user1193113
user1193113

Reputation: 1

jQuery toggle and slideup?

$('.rs-expand').hide();
$('.rs-details').click(function(){
    $('.rs-expand').slideUp('fast');
    $('.rs-s li').removeClass('toggled');
    $(this).parent().find('.rs-expand').toggle('blind', 200);
    $(this).parent().addClass('toggled');
});

Where do I add or how so that if click again, it will slideUp?

HTML 

<ul class="rs-s">
  <li> 
    <div class="rs-details">
      <h2>Lorem ipsum dolor sit amet</h2>
      <div class="rs-expand"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
    </div>
  </li>
</ul>

Upvotes: 0

Views: 103

Answers (3)

TGEE
TGEE

Reputation: 119

Revised code. This should trim your needs waaay down.

CSS Styling:

.rs-expand {
    display: none;
}

jQuery:

$('.rs-details').click(function(){
    $('.rs-expand').slideToggle('fast');
});

See Fiddle Here

Upvotes: 0

Goldie
Goldie

Reputation: 1630

$('.rs-expand').hide();
$('.rs-details').click(function(){
    $('.rs-expand').slideUp('fast');
    $(this).children('.rs-expand').slideToggle('fast');
});

http://jsfiddle.net/B4Kjs/2/

Upvotes: 3

micadelli
micadelli

Reputation: 2482

$('.rs-details').toggle(function(){
    $(this).find('div').slideToggle('fast');
    $(this).parent('li').removeClass('toggled');
  },
  function() {
    $(this).find('div').slideToggle('fast');
    $(this).parent('li').addClass('toggled');
  });

JSFiddle
http://jsfiddle.net/B4Kjs/

Upvotes: 1

Related Questions