jQuery Mobile Collapsible

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

by sebastianauer

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>
<html>
<head>
    <title>OPI Product | Mobile</title>
    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, userscaleable=0">
        <!-- <meta name="apple-mobile-web-app-capable" content="yes" /> -->
    <script src="assets/js/jquery.js" type="text/javascript"></script>
    <script src="assets/js/jquery.mobile-1.1.1.js" type="text/javascript"></script>
    <script src="assets/js/custom.js" type="text/javascript"></script>    
    
  <link rel="stylesheet" href="assets/css/jquery.mobile-1.1.1.css" type="text/css">
</head>
<body>

<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>
             ...

JavaScript

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