Collapsing Levels

This week I continued to chip away at the implementation of the badges info page. I was able to expand the levels last week, so this week I worked on collapsing them. At first, I thought it would be an easy reimplementation of code I written for elsewhere in the site. If you click on it once, the level expands and if you click on it again, the level collapses. However, after looking at my design for the page again, I realized that there were some issues. Each level is made up of a layout of skills that you can click on to learn more about them. I didn’t want the user to click on the skill only to have that level collapse. After some javascript fenangling, I was able to make it so that the clicking on a level would expand it and then then clicking on another level would collapse the currently open one and expand the one clicked on. This way, the user should feel free to click away in the expanded level to her heart's delight.

I also added the star icons to each level and learned more about the positioning and nesting in css in the process. I am currently in the midst of making different icons for the different types of skills (action order boxes, procedures, drop down menus). At first, I was just going to upload images for them, however I realized that that could become troublesome due to the length of some of our skills names. So, I have decided to design the icon using pure css, which will allow the icon to grow if need be. Thank goodness for online tutorials.