Tuesday, September 17, 2013

Show/Hide div directives.

Here's a fun one...

We all have need for show/hide divs every now and again, right? Why not let Angular do the heavy lifting?

If you haven't played with directives yet, you should start learning. They're powerful!



Here's the fiddle. This directive looks for and divs with a 'class="showhide"' and then makes them collapsible divs. (Click on "result" above to see how they work.)

Within each "showhide" div, we create a"less" div, a "more" div, and a "show" div. Less is the text that will show when the div is collapsed, More shows when it's open, and the Show div has the link to turn them on and off.

I think that the code is pretty self-explanatory, but if you have any questions, hit us up in the comments.

No comments:

Post a Comment