jQuery changes display:block to display:inline in slideToggle?

jQuery changes display:block to display:inline in slideToggle?

On my site is two slideToggle functions, however, one of them does not work. I want it to stay in the block, but only through the slideToggle animation does it stay in the block, then it reverts back to inline.

  1. <script>
      $(document).ready(function(){

        $("#button").click(function () {
          $("ul").slideToggle("slow");
        });

        $("#button2").click(function () {
          $("ls").slideToggle("slow");
        });

      });
      </script>
    </head>
    <body>
        <div id="container">
            <div id="title">
                <h1>Hey there, tiger.</h1>
            </div>
            <div id="text">
                <p>My name&rsquo;s <span id="pr">blah</span>. I&rsquo;m a <span id="ma">blah</span> member for <span id="ti">blah</span>.</p>
                <p>I play <a id="button2" href="#"><span id="ra">lacrosse</span></a> and other nice things.</p>
                            <ls id="crumbs">
                    <li><a href="http://____" title=""><ol>(n) lacrosse \lə-ˈkrȯs\:</ol>  a game invented by American Indians; now played by two teams who use long-handled rackets to catch and carry and throw the ball toward the opponents' goal </a></li>
                   

                </ls>           
                           
                            <p id="sep">I also live in <a id="button" href="#"><span id="ot">other places</span></a> on the internets.</p>
               
                <ul id="crumbs">
                    <li><a href="fgjkghk" title="Blog">tumblr</a></li>
                    <li><a href="http://www.youtube.com/" title="Youtube">Youtube</a></li>
                    <li><a href="" title="Flickr">Flickr</a></li>
                    <li><a href="" title="Twitter">Twitter</a></li>
                    <li><a href="" title="Delicious">Delicious</a></li>
                    <li><a href="" title="FFFFOUND!">FFFFOUND!</a></li>
                    <li><a href="" title="last.fm">last.fm</a></li>
                    <li><a href="" title="Reddit">Reddit</a></li>

                </ul>
            </div>
            <div id="footer">
            <a href="">Zach</a>, 2010.
            </div>
        </div>
    </body>

    <embed src="lizlin.mp3" autostart="true" loop="false" width="2" height="0">  
    </html>
















































That's the html of my site. The "other places" slide toggle works perfectly, but lacrosse one does not.

And my css.
  1. * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        font-weight: normal;
        border: none;
        position: relative;
    }

    html {
        background: #111;
    }

    body {
        background: #111;
        color: #fff;
    }

    #container {
        width: 780px;
        margin: 0 auto;
    }


    #title {
        margin: 140px 0 0 0;
        border-top: 8px solid #fff;
        padding: 30px 15px 0 15px;
        font-family: Helvetica Neue, Helvetica, Arial;
    }
    ol {
            font-weight: bold;
    }

    h1 {
        font-weight: bold;
        font-size: 65px;
        letter-spacing: -1px;
        text-shadow: #000 2px 2px 1px;
    }

    #text {
        margin-top: 23px;
        font-family: Georgia;
        font-size: 18px;
        line-height: 26px;
        padding: 0 15px 50px 15px;
        border-bottom: 1px solid #fff;
    }

    #text span {
        background: #343434;
        padding: 1px 2px 1px 2px;
    }

    #pr {
        color: #0BFF03;
    }

    #pr:hover {
        color: #39FF03;
    }

    #ra {
        color: #FFC018;
    }

    #ra:hover {
        color: #FFE959;
    }

    #ti {
        color: #32D7FC;
    }

    #ti:hover {
        color: #3CB0C9;
    }

    #ma {
        color: #F13232;
    }

    #ma:hover {
        color: #FF5B5B;
    }

    #ot {
        color: #8F3FE3;
    }

    #ot:hover {
        color: #AD61FF;
    }

    #sep {
        margin-top: 20px;
    }

    #crumbs {
        display: none;
        margin: 10px 0 0 98px;
        font-size: 16px;
        line-height: 18px;
        list-style: none;
        color: #222;
    }

    #crumbs:hover li {
        border-bottom-color: #1e1e1e;
    }

    #crumbs li a {
        color: #444;
        display: block;
        padding: 5px 0 5px 3px;
    }

    #crumbs li a:hover {
        color: #fff;
        background: #151515;
    }

    #crumbs li {
        border-bottom: 1px solid #1a1a1a;
    }

    #footer, #footer a {
        text-align: right;
        margin-top: 12px;
        font-size: 14px;
        font-family: Helvetica Neue, Helvetica, Arial;
        font-weight: bold;
        color: #222;
    }

    #footer a:hover {
        color: #333;
    }









































































































































Thanks if you can help!