WDY home page cats & subcats

by jmjpro

HTML

<div id="wdy-categories">
    <ul>
    </ul>
</div>
<div id="wdy-subcategories">
    <ul>
    </ul>
</div>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul>li {
    display: inline-block;
    margin: 0;
    padding: 0;
}
#wdy-categories {
    background-color: #ececec /*#BB8080*/;
	text-align: center;
}
#wdy-categories>ul>li {
    padding: 0;
    margin: 0;
}
/* add a left to all but the first element */
#wdy-categories>ul>li + li {
    border-left: 1px dotted;
}
/* add a comma and three non-breaking spaces before all but the first element */
#wdy-subcategories>ul>li + li:before {
    content:",\00a0\00a0\00a0";
}
button {
    background-color: transparent;
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    height: 100%;
}
.wdy-category-active {
    background-color: rgba(255,255,255,1);
}

JavaScript

var SUBCATEGORY_LINK = '/search?search_str=';
var categories = {
    "1": {
        "name": "Home &amp; Garden",
        "subcats": [
            "handyman",
            "plumber",
            "electrician"
        ]
    },
    "2": {
        "name": "Beauty &amp; Grooming",
        "subcats": [
            "barber",
            "beauty salon",
            "cosmetician"
        ]
    },
    "3": {
        "name": "Events &amp; Entertainers",
        "subcats": [
            "Band",
            "Boat Charter",
            "Caterer"
        ]
    }
}
var elemCategories = $( '#wdy-categories>ul' );
var elemSubcategories = $( '#wdy-subcategories>ul' );
for( var i = 1; i <= Object.keys(categories).length; i++ ) {
    console.log( i );
    var catName = categories[i].name;
    var button = $('<button>').attr('id', i).html(catName);
    button.on ( 'click', function() {
        $(this).addClass( 'wdy-category-active' );
        elemCategories.find( 'button' ).not( this ).removeClass('wdy-category-active');
        elemSubcategories.empty();
        var id = $(this).attr('id');
        var subcategories = categories[id].subcats;
        $.each( subcategories, function(idx, subcategory) {
            var anchor = $('<a>').attr('href', SUBCATEGORY_LINK + subcategory).html( subcategory );
            elemSubcategories.append( $('<li>').append(anchor) );
        });
    });
    var li = $('<li>').append( button );
    elemCategories.append(li);
}