Question

Fiddle

This is what I would like it to do:

1. Each red box ( <span class="more"> ) to show/hide the description (<div class="description"> )
2. The “close” link to also hide the description
3. If there is already a description open, this needs to close when another opens. So there is only ever one visible at a time.

Points 1 & 2, so far so good. But I’m stuck on point 3 – I’ve tried to find the other descriptions to hide them, but this fails!

$(".description").not(this).next(".description").removeClass("show")

Would anyone be able to help?

Answer 1

This should take care of it: http://jsfiddle.net/SMLwc/7/

$(document).ready(function () {

  $(".more").bind("click", function () {
    $(this).next(".description").toggleClass("show")
      .parent().siblings().find(".description").removeClass("show");
  });

  $(".close").bind("click", function () {
    $(this).parent(".description").toggleClass("show");
  });

});