You could simplify your code to this (assuming you're adding/removing
the classes for selection only and not styling):
$(".question").click(function(){
$(this).children('.answer').slideToggle().end().siblings
('div.question').children('.answer').slideUp();
});
One thing you'll note however is that the answers show briefly and
then are hidden by the .each() function. You can hide them with CSS by
giving them display:none in your CSS. I'd like to suggest an alternate
approach however:
A question/answer list is more semantically represented as a
definition list, which in addition would simplify your markup, while
improving its accessibility:
<dl class="qa-list">
<dt>Question</dt>
<dd>this is the answer</dd>
<dt>Question</dt>
<dd>this is the answer</dd>
</dl>
In your CSS (to hide the answers initially):
dl.qa-list dd{
display:none;
}
The JS:
$("dl.qa-list dt").click(function(){
$(this).siblings('dd').slideUp().end().next().slideToggle();
});
On Mar 3, 1:05 pm, Brian Yanosik <[email protected]> wrote:
> The javascript to do this would be the following, thanks everyone for your
> help.
>
> $('.qa-list div').each(function(i) {
> $(this).children('.answer').slideUp();
> });
>
> $(".question").click(function(){
> var $this = $(this);
> if( $this.is('.question') ) {
> $this.children('.answer').slideDown();
> $this.removeClass('question');
> $this.addClass('question-answer');
> $this.siblings('.qa-list
> div').children('.answer').slideUp();
> $this.siblings('.qa-list
> div').removeClass('question-answer');
> $this.siblings('.qa-list div').addClass('question');
> }
> else {
> $this.children('.answer').slideUp();
> $this.removeClass('question-answer');
> $this.addClass('question');
> }
> //return false;
> });
>
> On Tue, Mar 3, 2009 at 3:45 PM, Brian Yanosik <[email protected]> wrote:
> > So I have the following code and it works great. I am just curious how I
> > can adapt it in order to only have 1 answer visible at one time. If once
> > item is clicked, then on click of the other item, the last one automatically
> > slides up. How would one go about doing this?
>
> > JS:
>
> > $(document).ready(function(){
> > $('.qa-list div').each(function(i) {
> > $(this).children('.answer').slideUp();
> > });
> > $(".question").click(function(){
> > var $this = $(this);
> > if( $this.is('.question') ) {
> > $this.children('.answer').slideDown();
> > $this.removeClass('question');
> > $this.addClass('question-answer');
> > }
> > else {
> > $this.children('.answer').slideUp();
> > $this.removeClass('question-answer');
> > $this.addClass('question');
> > }
> > //return false;
> > });
> > });
>
> > CODE:
>
> > <div class="qa-list">
> > <div class="question">Question<br />
> > <span class="answer">this is the answer</span></div>
> > <div class="question">Question<br />
> > <span class="answer">this is the answer</span></div>
> > </div>
>
> > Thanks
> > Brian
> > ---------- Forwarded message ----------
> > From: marc0047 <[email protected]>
> > Date: Tue, Mar 3, 2009 at 3:40 PM
> > Subject: [jQuery] Re: slideToggle is jerky in Safari 3.2.1
> > To: "jQuery (English)" <[email protected]>
>
> > Looks like someone else had the same unresolved problem too:
>
> >http://groups.google.com/group/jquery-en/browse_thread/thread/c929269...
>
> > On Mar 3, 8:22 am, marc0047 <[email protected]> wrote:
> > > I am using slideToggle and it performs perfectly in FF, IE6&7, and the
> > > new Safari 4. However, in Safari 3.2.1, the elements slide out, but it
> > > starts of with a quick jerk and then slides.
>
> > > Has anyone else run into this problem and found a solution?
>
> > > Thanks!
