I have a JQuery Mobile version of my site and I am having trouble seting which page of desktop version is equivalent to which one of mobile version.
The issue here is that, on my desktop website, there are several
.php files for different contents. In the mobile one, it is just one file with only one
data-role="page" and with the content split inside a collapsible set.
Lets say, per example, my desktop has
contact.php (there are more pages, but we can simplify it for assistance purposes). And in my mobile website I have this code:
<div data-role="page" id="onlypage"> <div data-role="header"> <h1>My web!</h1> </div> <div data-role="collapsibleset"> <div data-role="collapsible" id="products"> <h1>Products</h1> <div>Here I have all products</div> </div> <div data-role="collapsible" id="contact"> <h1>Contact</h1> <p>Here we have contact page</p> </div> </div> </div>
Is there any way to make a URL and history change whenever one of the collapsible divs is expanded or collapsed? Per example, I would like that when the user (in mobile version) opens
id="products" section, the URL changes to
m.example.com/products and when the user closes it(or goes back with the browser history back feature) it goes back to
m.example.com. Also, if the user is redirected to
m.example.com/products, open the page with the collapsible already opened.
This would help me a lot with SEO purposes because I would be able to relate every page of my desktop web with some collapsible of my mobile web.
EDIT: I will add what I have in mind so that you can advice me on that. I thought about doing it with
GET parameters, all by hand. I know I can achieve it this way, but I am not sure if this way is the best way. Other thing in my mind is to use something like
data-url (which, based on my research, I don't think it is posible) or any other JQM feature or smart trick I may not know of.
Thanks a lot in advance!