I've been working on a unique way to display hierarchical data using bootstrap badges and AngularJS. My goal is to create a user-friendly experience where people can easily navigate through categories.
There are 3 main types of categories:
parent: This is the top-level category
parent and child: A child category with its own subcategories
child: A bottom-level child category with no sub-categories
Thanks to the amazing support from the Stackoverflow community, I now have a visually appealing version up and running. You can check it out here:
http://plnkr.co/edit/5I1pU0TZo6AjHJTbBuG9
Below is the relevant HTML code for displaying these categories:
<ul id="categoriesUnorderedList">
<li ng-repeat="category in categories"
ng-show="category.category_show"
class="badge-slider">
<span ng-click="categoryClicked(category)"
class="badge {{ getBadgeClassName(category.category_type) }}"
ng-style="getIndent(category)"> {{category.category_name}}
</span>
</li>
</ul>
Currently, I am using different CSS classes to differentiate the types of categories by color. For instance, here is the CSS for the parent badge:
.badge-p {
background-color: #005DB3;
color: #f8f8f8;
cursor: default;
margin-left: 0px;
}
.badge-p:hover {
background-color: #116ec4;
color: #fff;
}
Now, I want to take this design to the next level.
The plan is to add a glyphicon-plus-sign to indicate that a "parent" or "parent and child" category has sub-categories that are currently hidden.
This glyphicon will switch to a glyphicon-minus-sign once the category is clicked and the sub-categories are displayed. It will then revert back to the plus sign when the user clicks to close the category.
This approach allows all categories to be displayed with the same color, improving visual consistency and enhancing usability for the user.
What would be the best way to implement this functionality? Also, is there a generic method (without relying on glyphicons) that could work in case I want to experiment with different icons later on?
EDIT 1: With the guidance from ABr's answer, I have successfully implemented the full functionality using slightly revised HTML structure. The glyphicon was nested within the span of the badge, ensuring proper positioning and size without additional CSS. This implementation covers all category types. Check out the updated plnkr here: http://plnkr.co/edit/19ihMtyJsQwcuLxKhgQh