javascript - Using `.toggle()` rather than applying a class to show content -

javascript - Using `.toggle()` rather than applying a class to show content -

i'm working on simple website utilize @ conference , i'm looking help understand implications of 2 ways accomplish effect:

using .toggle() show or hide content

this method started because intuitive action tap element have it's content appear. however, problem arises when seek limit 1 open div @ time.

summary i'm having problem limiting number of opened elements.

applying active class jquery

using method, can display hidden content selecting kid element (see code below), stops user closing content tapping again. because i'm expanding divs horizontally, isn't ideal because of scroll space that's added.

summary: how close active div on sec click method?

codepen demo - staged site

relevant code

this method using css apply active class. works, said above, i'm having hard time removing active class element tapped again. utilize demo linked above see how toggle action works on page (uncomment lines 8 , 9).

$(".title").click(function() { //remove active class other elements $('.post').removeclass('active'); // bind div $post = $(this); // set active class on .post command scroll position $post.parent().toggleclass('active'); // toggles hidden .content div //$post.next().toggle(250); $('html, body').animate({scrollleft: $('.active').offset().left},500); });

the accompanying .active css:

.post .content { display:none; } .active { margin-top:-120px; } /* shows content div rather toggling jquery */ .active > .content { display:block; }

is there way can allow both behaviors (tap open/close, 1 open div @ time)? method best suited that?

you can utilize toggle() while hiding other ones. seek this:

$(".title").click(function() { $('.post').not($(this).parent()).hide(); $(this).toggle(); $('html, body').animate({scrollleft: $(this).parent().offset().left},500); });

update: changed .not(this) .not($(this).parent()) .title kid of .post.

javascript jquery css