I'm trying to create a custom accordion effect with jQuery, where the 'collapsed' items show the first line of text within each item. When the user clicks one of the items, it should animate to show the full text; very much the same way as an ordinary accordion would function, except I would like mine to have that little preview of text. 

My script is nearly complete but I'm still having a couple of issues:

* the item shouldn't collapse if it is already active and clicked again.
* the animations happen one after the other but I would like them to occur at the same time.

What can I do to complete the script? 

Here's my code and a jfiddle:

<http://jsfiddle.net/PPjFS/>

```
<ul>
    <li>
        <span>Item 1</span>
        <div>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
    </li>
    <li>
        <span>Item 2</span>
        <div>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
    </li>
    <li>
        <span>Item 3</span>
        <div>
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
    </li>    
</ul>

<script type="text/javascript">
    $("span").click(function(){
        var h = $(this).siblings("div").find("p").height();

        $("ul li div").animate({height:"20px"}, 100);

            if( !$(this).hasClass("active") ){
                $(this).addClass("active");
                $(this).siblings("div").animate({height: h+10 + "px"}, 200);
            }   
        });
</script>

```