I am new to jquery mobille so thought I'd test it out properly by creating a mobile version of my own site. So far so good and the options available are fantastic.

My issue though is with the collapsible block 'accordion' menu. I initially followed a tutorial online and it was only when I got to applying the collapsible blocks that I realised the tutorial was quite old and the scripts I had copied from the tutorial were:

<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

with these scripts, the collapsible content simply cannot be set to be closed by default so data-collapsed="true simply doesn't work and the menus are open by default. After much googling it seems other people has the same issue and when upgrading to the latest script version the problem was sorted so when I updated to the current up to date versions i.e.:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

The data-collapsed="true did work however the whole menu goes tiny on the screen. Please see the below screenshots to see what I mean.

What is wrong here, is it a css issue?

Using the older scripts I had this: 

Using the latest scripts I get this: 

These shots are full screen size so you can imagine how tiny the menu actually is, I also assume the captured part of another page at the bottom of the screenshow is to do with the same issue.

Thanks for any help or advice you can give.

EDIT. images now added, there was an issue with my URL's