Hello,
Being a newby to jQuery, I would appreciate your help with the following.

What I want to create is a webpage with a number of Titles, each followed by a div containing one or more paragraphs, maybe a bulleted list, an image, etc.
Each title must be clickable to expand/collapse the div belonging to it.
When expanding a div, other expanded div's (if any) must collapse.

I found the example on http://viralpatel.net/blogs/create-accordion-menu-jquery/
and tested. It does almost exactly what I want.

HTML example:

1. <ul id="accordion">
    <li>Sports</li>
    <ul>
     <li><a href="#">Golf</a></li>
     <li><a href="#">Cricket</a></li>
    </ul>
    <li>Technology</li>
    <ul>
     <li><a href="#">iPhone</a></li>
     <li><a href="#">Facebook</a></li>
    </ul>
    <li>Latest</li>
    <ul>
     <li><a href="#">Obama</a></li>
     <li><a href="#">Iran Election</a></li>
    </ul>
   </ul>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

I replaced the inner ul's by p's as follows:

1. <ul id="accordion">
    <li>Title 1</li>
    <p>
     Lorem ipsum dolor sit amet, consectetur<br />
     adipisicing elit, sed do eiusmod tempor.
    </p>
    <li>Title 2</li>
    <p>
     Sed ut perspiciatis unde omnis iste.<br />
     Natus error sit voluptatem. Accusantium<br />
     doloremque laudantium.
    </p>
    <li>Title 3</li>
    <p>
     Neque porro quisquam est, qui dolorem.<br />
     Ipsum quia dolor sit amet, consectetur.
    </p>
   </ul>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

Code example:

1. 1. $("#accordion > li").click(function(){
   2.    if(false == $(this).next().is(':visible')) {
   3.        $('#accordion ul').slideUp(300);
   4.    }
   5.    $(this).next().slideToggle(300);
   6. });
   7.
   8. $('#accordion ul:eq(0)').show();
   
   
   
   
   
   
   

I adapted the lines 3 and 8: replaced ul by p

So far, so good.
As long as each of my Titles is followed by only ONE <p> element, this works excellent. If there are more than one <p>, than only the first <p> is expanded/collapsed.
However, I would like to expand/collapse div's, not p's. Just one <div> per Title.
When I replace the p-tags by div-tags and adapt the code lines 3 and 8 accordingly, the mechanism does not work anymore.

You help will be highly appreciated.

Rgds,
JackNWK