Question

I have the following code for a FAQ like list. When a user clicks on a button the info slides down to display the content. They can then click the same button to close the content.

As I have multiple list on this page what I would like is if a list is open and the user clicks on another list to open it, the open list closes and the other list opens. That way an user doesn’t have a a mile long scrollbar.

Here is my code:

JS

$('.service').live('click',function(){
  $(this).parent().children().toggle();  //swaps the display:none between the two spans
  $(this).parent().parent().find('.content').slideToggle();  //swap the display of the main content with slide action
 });

$('.service').click(function(e) {
  e.preventDefault(); //Prevents link from taking them to top of page
});

HTML

<div class="service-container">
 <div class='service-title'>
  <a href="#" class="service fancy_button"><span style="background-color: #0f071e;"><i class="icon-plus"></i> Open</span></a>
  <a href="#" class="service fancy_button" style="display:none;"><span style="background-color: #666;"><i class="icon-minus"></i> Close</span></a>
  </div>
   <div class='content' style='display:none;'>
      <p>My Content</p>
   </div>
</div>

I do not mind re-writing the code if there is a better way to do this.

The idea:

Answer 1

Mainly I’d suggest you not to use live() method, since it is deprecated. Instead, you may use method on() in the following way:

$(".service-title").on("click", ".service", function(e) {
    $(this).siblings().andSelf().toggle()
        .parent().siblings(".content").slideToggle();

    e.preventDefault();
});

DEMO: http://jsfiddle.net/bnT6Q/

In order to make other opened containers closed when the current opens, we may rewrite the code a bit:

$(".service-title").on("click", ".service", function(e) {
    $(".service-container")
        .has($(".content:visible").add(this))
        .find(".service").toggle().end()
        .find(".content").slideToggle();

    e.preventDefault();
});​

DEMO: http://jsfiddle.net/bnT6Q/1/