How to make an accordion effect using Jquery based on a given html structure?

Question

I would like to make an accordion effect using the following structure. The idea is that when I click on .booklist>li>a it will toggle the correspondent article and only one article can be open at one time. Could anyone help me with this script? Jquery is welcome.

http://jsfiddle.net/vinicius5581/r2zevb3d/1/

CSS

 article{
     display:none;
 }

HTML

<section>
<ul class="booklist">
     <li>
         <a>Article Name 1</a>
         <article>                        
              <p><content</p>
              <img class="left" src="myimage"/>
              <p>more content</p>
          </article>
     </li>
     <li>
         <a>Article Name 2</a>
         <article>                        
              <p><content</p>
              <img class="left" src="myimage"/>
              <p>more content</p>
          </article>
     </li>
     <li>
         <a>Article Name 3</a>
         <article>                        
              <p><content</p>
              <img class="left" src="myimage"/>
              <p>more content</p>
          </article>
     </li>

Answer 1

Try to this

$(document).ready(function(){
    $('.booklist>li>a').click(function(){
        $('.booklist>li>a + article').slideUp();
        $(this).next('article').slideDown();
    });
});

Demo

-----------------

Updated Code here

$(document).ready(function(){
    $('.booklist>li>a').click(function(){
        $(this).next('article').slideToggle();
        $(this).closest('li').siblings('li').find('article').slideUp();
    });
});

Updated Demo

Answer 2

I believe this is what you're looking for:

$(".booklist li").click(function(){
  $(this).find("article").slideToggle().end().siblings("li").find("article").slideUp();   
});

JSFIDDLE

Answer 3

You can do it using following code

$("a").click(function(){
    $(this).siblings("article").slideToggle()
       .closest("li").siblings("li").find("article").slideUp();
});

DEMO

Answer 4

HTML

<section>
    <ul class="booklist">
        <li> <a href="#">Article Name 1</a>

            <article>
                <p>
                    <content</p>
                        <img class="left" src="myimage" />
                        <p>more content</p>
            </article>
        </li>
        <li> <a href="#">Article Name 2</a>

            <article>
                <p>
                    <content</p>
                        <img class="left" src="myimage" />
                        <p>more content</p>
            </article>
        </li>
        <li> <a href="#">Article Name 3</a>

            <article>
                <p>
                    <content</p>
                        <img class="left" src="myimage" />
                        <p>more content</p>
            </article>
        </li>
    </ul>
</section>

CSS

ul, li, h4, p {
    margin:0;
}
li {
    list-style:none;
}
.booklist li a {
    cursor: pointer;
}
.booklist li article {
    display: none;
}

Script

$(document).ready(function ($) {
    $('.booklist').find('a').click(function () {

        //Expand or collapse this panel
        $(this).next().slideToggle('slow');

        //Hide the other panels
        $(".booklist li article").not($(this).next()).slideUp('slow');

    });
});

Fiddle Demo