static product page with jquery and sqlite / json

i have to build a static product page which is working on a usb-stick. To build this page, i can only use JS and HTML, no PHP or something else.

The first page is a page with 3 categories. If I'm choosing one of this categories, I should see the next page with some subcategories. A click on a subcategory should show me some products from this category. A click on a product should show me some product details. This is all, it should be possible to go back to the previous page by Icons in the frontend.

Generally this is all what is needed.

I don't wanna create many of static pages with the same markup, I thought i could manage this with jquery, and json or sqlite. - but i need a starting point.

I thought to build the needed code for the static pages and include it in 1 html page. Then I would hide the not needed elements and show the start page with the categories. If someone clicks on a category, I would hide the category page and show the subcategory page and fill it with data from "JSON / sqllite"? the same procedure could be use for showing the product details.

At the moment I've no idea how to get this working. I hope someone could give me a starting point to solve this problem. Maybe if there is a tutorial or something else for a similar problem. I haven't found one so far.

I also build some "Example Code" if it is need to demonstrate a solution:

<!-- CATEGORY PAGE PART -->
<div id="categoryPage">
  <h1>Category Page</h1>
  <ul>
    <li><a href="category1">Category 1</a></li>
    <li><a href="category2">Category 2</a></li>
    <li><a href="category3">Category 3</a></li>
  </ul>
</div>
<!-- SUBCATEGORY PAGE PART -->
<div id="subCategoryPage">
  <h1>Category 1 - Subcategorys:</h1>
  <ul>
    <li><a href="subcategory1">Subcategory 1</a></li>
    <li><a href="subcategory2">Subcategory 2</a></li>
    <li><a href="subcategory3">Subcategory 3</a></li>
  </ul>
  <a href="">back to category listing</a>
</div>
<!-- PRODUCT PAGE PART -->
<div id="productPage">
  <h1>Subcategory 1 - Products:</h1>
  <p>Our Products</p>
  <ul>
    <li><a href="product1">Product 1</a></li>
    <li><a href="product2">Product 2</a></li>
    <li><a href="product3">Product 3</a></li>
  </ul>
  <a href="">back to subcategory listing</a>
</div>
<!-- PRODUCT DETAIL PART -->
<div id="productDetailPage">
  <h1>Product 1</h1>
  <dl>
    <img src="img/productimage.jpg" alt="image">
    <dt>Title 1</dt>
    <dd>Description 1</dd>
    <dt>Title 2</dt>
    <dd>Description 2</dd>
    <dt>Title 3</dt>
    <dd>Description 3</dd>
    <a href="">back to product listing</a>
  </dl>
</div>

Thanks for helping :)