Interactive category picker/selector?

JavaScript
1

I would appreciate if anyone could guide my point by point on how one could create a category picker just like gumtree (preferably in jquery):

Specifically the points

  • How clicking on a category opens another to the right
  • How clicking on a category appends a variable like “#cat-10201” into the url (and vice versa)
  • How css lists are used instead of form select menus (making it easily styled)
  • How clicking on a deep subcategory automatically preselects all parent categories

I’m not looking for anyone to actually code it for me (that would be outrageous :p) but tips on how it’s actually structured and steps on how it can be coded would be highly appreciated. I can do PHP and I know CSS also. I don’t know plain javascript but I’m sure I can do most of it in jQuery

2

This probably wouldn’t need to be too complicated. :wink:

GumTree does something along these lines

  • Has a list of all the categories.

  • Has a list of all the sub categories

  • Has a list of all the sub sub categories (etc.)

  • All category links actually link to the list that contains the sub category, and the sub category links to the sub-sub category. (See markup below)

When someone clicks on the a (parent) category, it links through to the sub category, something you could target with javascript because you would know the href of the link that was clicked (and by extension the id of the category you are targeting).

You could have a markup structure like Gumtree


<!-- main category list -->
<ul id="categories">
    <li><a href="#cat1">Category 1</a></li>
    <li><a href="#cat2">Category 2</a></li>
</ul>
    <!-- sub categories -->
    <ul id="cat1">
        <li><a href="#subcat1-1">sub category 1</a></li>
        <li><a href="#subcat1-2">sub category 2</a></li>
    </ul>
    <ul id="cat2">
        <li><a href="#subcat2-1">sub category 1</a></li>
        <li><a href="#subcat2-2">sub category 2</a></li>
    </ul>
        <!-- sub sub categories -->
        <ul id="subcat1-1">
            <li><a href="#subcat1-1-1">sub category 1</a></li>
            <li><a href="#subcat1-1-2">sub category 2</a></li>
            <li><a href="#cat1-1-3">category 3</a></li> <!-- final link -->
        </ul>
        <ul id="subcat1-2">
            <li><a href="#subcat1-2-1">sub category 1</a></li>
            <li><a href="#subcat1-2-2">sub category 2</a></li>
        </ul>

Though, to be honest, their markup isn’t very ideal. I would prefer to nest this so it is more logically (and semantically) structured:


<!-- main category list -->
<ul id="categories">
    <li>
        <a href="#cat1">Category 1</a>
        <!-- sub categories -->
        <ul id="cat1">
            <li>
                <a href="#subcat1-1">sub category 1</a>
                <!-- sub sub categories -->
                <ul id="subcat1-1">
                    <li><a href="#subcat1-1-1">sub category 1</a></li>
                    <li><a href="#subcat1-1-2">sub category 2</a></li>
                    <li><a href="#cat1-1-3">category 3</a></li> <!-- final link -->
                </ul>
            </li>
            <li>
                <a href="#subcat1-2">sub category 2</a>
                <ul id="subcat1-2">
                    <li><a href="#subcat1-2-1">sub category 1</a></li>
                    <li><a href="#subcat1-2-2">sub category 2</a></li>
                </ul>
            </li>
        </ul>
        <ul id="cat2">
            <li><a href="#subcat2-1">sub category 1</a></li>
            <li><a href="#subcat2-2">sub category 2</a></li>
        </ul>
    </li>
    <li><a href="#cat2">Category 2</a></li>
</ul>

With some CSS to show/hide different <ul>'s and some JS to toggle the hiding/showing you should be able to reproduce this fairly well.

The hashes are added to the URL if you are not preventing default events on links. Alternatively you could set them explicitly using window.location.hash when a category link is clicked.

To select all parents, it would be a simple matter of targeting the current item that is clicked, finding the parent list, and subsequently the link with the href of the current category (am I making sense, it gets a bit confusing when talking about parents and sub-sub children :P)

Hope this helped :slight_smile:

3

Perfect, can’t thank you enough :smiley: