jQuery Mobile Collapsible

Experiment with jQuery mobile and collapsible sections. Trying to to scroll an expanded area.

by erick

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<div data-role="page" id="Collections">
    <div data-role="header">
        <h1>Collections</h1>
    </div>
     <div data-role="content">

<!-- NAVIGATION MENU -->
         <div style="margin: -15px;">
             <img src="http://placedog.com/600/600" />
         </div> 
            <section id="nav_menu" data-role="collapsible-set" style="margin: -15px -15px;">
                <div data-role="collapsible">
                    <h3 class="customicon_colors ui-corner-none slide-up" style="box-shadow: none; -webkit-box-shadow: none;">Color</h3>

                    <ul data-role="listview">
                        <li id="collection1">
                          <a href="collection.php"data-ajax="false">
                              <img src="http://placedog.com/80/80" alt="collection" width="80" height="80" />
                              <h2>A Collection</h2>
                          </a>                
                        </li>
                        <li id="collection2">
                          <a href="collection.php"data-ajax="false">
                              <img src="http://placedog.com/80/80" alt="collection" width="80" height="80" />
                              <h2>A Collection</h2>
                          </a>                
                        </li>
                        <li id="collection3">
                          <a href="collection.php"data-ajax="false">
                              <img src="http://placedog.com/80/80" alt="collection" width="80" height="80" />
                              <h2>A Collection</h2>
                          </a>                
                        </li>
                        <li id="collection4">
                          <a href="collection.php"data-ajax="false">
                              <img...

JavaScript

$('#nav_menu h3').live('tap', function(e){
    var $this = $(this);
    $('html, body').animate({
        scrollTop: $this.offset().top             
    });
});