Responsive Bootstrap subnav dropdown with JQuery and span2 content

Responsive Bootstrap subnav dropdown with JQuery and span2 content

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div id="secondarynav">Content<div id="nav-triggerbtn">i</div></div>

<div id="controlnav" class="clearfix">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <p>stuff goes here</p>
        </div>
           <div class="span2">
            <p>stuff goes here</p>
       
        </div>
               <div class="span2">
                <p>stuff goes here</p>
       
        </div>
           <div class="span2">
            <p>stuff goes here</p>
       
        </div>
           <div class="span2">
            <p>stuff goes here</p>
       
        </div>
           <div class="span2">
            <p>stuff goes here</p>
       
        </div>
        
        
        
        </div>
    </div>


</div>
<div>
  <p>Hooray!</p>
</div>
</div>

CSS

body{background:#eee}
#secondarynav{display:block
 width:100%;
background:#222;
    height:60px;
}


div#nav-triggerbtn {
    float: right;
    margin-top: 18px;
    margin-right: 28px;
    border-radius:50%;
    color:#000000;
    background:#eee;
    opacity:0.3;
    filter: alpha(opacity=30);
    cursor:pointer;
    width:22px;
    font-size:14px;
    height:22px;
    padding-top:2px;
    text-align:center;
    font: bold italic 15px/20px"Times New Roman", Times, serif;
    line-height: 20px;
}
div#nav-triggerbtn:hover {
    filter: alpha(opacity=90);
    opacity:0.9;
}


#controlnav {
 position:relative;
    padding:30px;
 top:0px;
 left:2%;
 width:90%;
 height: 10px;
 -moz-border-radius-topleft: 0px;
 -moz-border-radius-topright: 0px;
 -moz-border-radius-bottomright: 2px;
 -moz-border-radius-bottomleft: 2px;
 -webkit-border-radius: 0px 0px 2px 2px;
 border-radius: 0px 0px 2px 2px;
 display: none;
 background: #fff;
 -webkit-box-shadow: 0px 0px 10px rgba(46, 50, 50, 1);
 -moz-box-shadow:    0px 0px 10px rgba(46, 50, 50, 1);
 -o-box-shadow:    0px 0px 10px rgba(46, 50, 50, 1);
 box-shadow:         0px 0px 10px rgba(46, 50, 50, 1);
 opacity: 0;
}  

/*--  bootstrap over-ride -- */

@media (max-width: 767px) {
  body {
    padding-right: 0px;
    padding-left: 0px;
  }

#controlnav{
   display: block;
 
    width: 100%;
    min-height: 280px;
}
#controlnav .span2{background:#ececec}
}

JavaScript

var cntlHeight = $('#controlnav').css('height');

$('#nav-triggerbtn').click(function() {
    var $cnav = $('#controlnav');
    if ($cnav.css('display') == 'none') {
        $cnav.css('height', 0);
        $cnav.css('display', 'block');
        $cnav.animate({ 
            height: cntlHeight,
            opacity: 0.8
        }, 200);
    } else {
        $cnav.animate({
            height: 0,
            opacity: 0
        }, 200, function(){
            $(this).css('display', 'none');
        });
    }
});