New to jQuery; slideToggle question

New to jQuery; slideToggle question

Hi, I'm pretty much new to the whole jQuery experience, I'm eager to learn.
I've read up on some tutorials on the slideToggle and took it upon myself to try and create something from it. Everything has been going good, but I've hit a snag ;\

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>test</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(function()
    {

    $("#headline").click(function(event) {
    event.preventDefault();
    $("#article").slideToggle();
    $("#comments").hide();
    });
    $(".view").click(function(event) {
    event.preventDefault();
    $("#comments").slideToggle();
    });
    });
    </script>



    <style type="text/css">
    body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #000;   
    }
    a {
        color:#9967cc;
        text-decoration:none;
         }

    #article {
        width:542px;
        display: none;
        padding:5px;
        background-color:#f5f0fa;
        }

    #headline {
        display:block;
        width:542px;
        padding:5px;
        background-color:#f5f0fa;
        }

    #comments {
        width:542px;
        display: none;
        padding:5px;
        background-color:#f5f0fa;
        }
    </style>
    </head>
    <body>


    <a href="#" id="headline"><b>HEADLINE</b></a>

    <div id="article">
    <a href="#" class="view">View Comments</a>
    <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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
    </div>

    <div id="comments">
    <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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
    </div>


    <a href="#" id="headline"><b>HEADLINE</b></a>

    <div id="article">
    <a href="#" class="view">View Comments</a>
    <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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
    </div>

    <div id="comments">
    <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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
    </div>

    </body>
    </html>






























































































The problem I'm having is if I add a 2nd, 3rd, 4th etc etc etc. set of Divs for another headline or whatever, they won't expand and collapse. Maybe its not a jQuery issue, but a CSS issue? lol /shrug Does anyone know a fix or perhaps a better way to approach this?