jQuery Mobile Collapsible

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

by sebastianauer

HTML

<link rel="stylesheet" href="Minified and Gzipped structure without a theme: jquery.mobile-1.1.1.min.css">
<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">
 ...

JavaScript

$("#nav_menu h3").live('tap', function(event){
        var this_pos = 0;
        this_pos = $(this).position();
        //console.log("I am "+this_pos.top +"px from the top.");
       $.mobile.silentScroll(this_pos.top);
       //window.scrollTo(0,1); // used 0,1 previously s/o success
         //window.scrollTo(0,the_pos.top); // Seems to work if it tapped again after - but that closes the element again... :(  
         
        //console.log("Should have scrolled");     
        return true;
      });