2 weeks ago I completed a new feature on EMC Code's github page. We have a bunch of different projects that need to fit in different buckets but can sometimes span more than one bucket. Or projects in two different buckets use a common technology. To make it easier for our users to find things relevant to them, I created a tagging functionality.
The HTML
First create a div that will have nothing in it. I've assigned this with a class if "hiddenUL". This is where we will use jQuery to append the list items with specific tags.
Next, create an unordered list of items that will need a common class. In this case, the class is "item_box" because every item is in the shape of a box. Next, we give each list item a set of classes. Don't pay too much attention to everything *inside* the list item. All of that is there for the styling of it. These classes, however, are going to be our means of tagging. Make sure spelling and capitalization are all correct. It's also important to note that we can have multiple sets of unordered lists.
Lastly, create some buttons. You will need a button for every type of keyword or class you defined in the previous step. Also, create a 'clear tag' button that will be used to clear the tags.
The jQuery
Here is the fun stuff.
- On a button click, prevent the default action of a regular link.
- Get the text inside the button. set that as our classSearch variable
- Clear out any items that may or may not be appended to the "hiddenUL" div. This makes sure there isn't anything left over and when a second tag is clicked it only shows information for that particular tag
- Create some HTML to make some markup for a header and the unordered list and append it to the hidden div
- search through each list item inside every unordered list with the class "item_box"
- if the list item contains the class that was extracted from the button earlier, clone it, and append it to the hiddenUL div. Without cloning, it will move it to the section, but when a new tag is clicked then it's cleared and removed from the DOM.
check out the jsFiddle to see it in action and the code is on the gist below