0

I am trying to create an accordion using the following jQuery:

 var allPanels = $('.accordion > div.showlist > p.showdetails').hide();

  $('.accordion > div.showlist > strong').click(function() {
    allPanels.slideUp();
    $(this).parent().next().slideDown();
    return false;
  });

The HTML:

<div class="accordion">
 <div class="showlist">
  <div class="showdate">date</div>
  <strong>The title</strong>
  <p class="showdetails">There is more info in here about the show here.</p>
 </div>
 <div class="showlist">
  <div class="showdate">date</div>
  <strong>The title</strong>
  <p class="showdetails">There is more info in here about the show here.</p>
 </div>
 <div class="showlist">
  <div class="showdate">date</div>
  <strong>The title</strong>
  <p class="showdetails">There is more info in here about the show here.</p>
 </div>
</div>

The p.showdetails are being hidden fine, but when strong is clicked nothing happens. Any idea what I am doing wrong?

2

4 Answers 4

2

You're targeting the wrong things.

If your click event is on <strong>, then $(this).parent().next() will select the div.showlist next to it's parent div.showlist (whew!).

Just $(this).next('p.showdetails').slideDown(); should work fine.

EDIT

Since you're using animations as well, calling allPanels.slideUp() before the .slideDown() call will queue the animations, so it'll look like the panel is sliding down and up if you click the <strong> element of the currently visible p.showdetails.

You should do something like

var panel = $(this).next('p.showdetails').slideDown();
allPanels.not(panel).slideUp();

... or something similar to prevent that.

Ooooooooooooooor you could work with the jQueryUI Accordion plugin. Nice on you to be doing this as an exercise though.

4
  • I tried changing to $(this).next('p.showdetails').slideDown(); but still nothing is happening May 24, 2013 at 9:06
  • .next() only works for sibling elements, so $(this).next('p.showdetails') won't find anything May 24, 2013 at 9:12
  • But the <strong></strong> and <p class="showdetails"></p> tags in his code are siblings, aren't they? May 24, 2013 at 17:28
  • @user1444027 ~ Then there's something else wrong with your code that you're not showing us; I've plugged in your exact markup with my solution, and it's working here: jsbin.com/owaxus/2/edit May 24, 2013 at 17:39
1

Wouldn't $(this).parent().next() return the next div.showlist? I think what you want is:

$(".showdetails", $(this).parent().next()).slideDown();
1

EDIT :

I did some work around and came up with this one.

You need to use

 $(".showdetails", $(this).parent()).slideDown();

I have done a sample in jsfiddle you can refer that.

http://jsfiddle.net/nS84p/3/

Optional

You can opt for jQuery accordian which is easy and user friendly

Refer This URL For Information

1
  • Jus some minutes difference between our answer.
    – Rohith
    May 24, 2013 at 9:35
0

I got it with:

$(".showdetails", $(this).parent()).slideDown();

Thanks for the help everyone.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.