JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<!-- CATEGORY PAGE PART -->
<div id="categoryPage" class="category" data-next-category="subCategoryPage">
    <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" class="category is-hidden" data-next-category="productsPage">
    <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="#" data-prev-category="categoryPage">back to category listing</a>
</div>
<!-- PRODUCT PAGE PART -->
<div id="productsPage" class="category is-hidden" data-next-category="productDetailsPage">
    <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="#" data-prev-category="subCategoryPage">back to subcategory listing</a>
</div>
<!-- PRODUCT DETAIL PART -->
<div id="productDetailsPage" class="category is-hidden">
    <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="#" data-prev-category="productsPage">back to product listing</a>
    </dl>
</div>

CSS

.is-hidden {
    display: none;
}

JavaScript

$(function() {
    $(".category").on("click", "li", function(evt) {
        evt.preventDefault();
        var href = $(this).find("a").attr("href");
        var nextCategory = $(this).closest(".category").data("nextCategory");
        $.ajax({
            url: '/echo/json/', //href or the desired URL
            dataType: 'json' // or the desired data type
        }).done(function(jsonData) {
            //do stuff with your data here
            //update categories etc.
            //then diplay the next page/section
            $(".category").addClass("is-hidden")
            $("#" + nextCategory).removeClass("is-hidden");
        });
    }).on("click", "a[data-prev-category]", function(evt) {
        evt.preventDefault();
        var prev = $(this).data("prevCategory");
        $(".category").addClass("is-hidden");
        $("#" + prev).removeClass("is-hidden");
    });
});