• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter Fifteen. Working with DOM-Based ... > Combining Show/Hide with Other Techn...

Combining Show/Hide with Other Techniques

The example we've just seen is showing and hiding at its most basic. The technique can be amended to do whatever you want. On the Happy Cog Projects page [15.10], the visitor is initially treated to a series of nine neat icons, each representing a project. When an icon is pressed [15.11], text pertaining to that project is revealed. As a bonus, the icon “lights up” on rollover.

We use the same “show/hide” function that we wrote for zeldman.com again in Happy Cog's primary JavaScript file (http://www.happycog.com/j/h.js). The markup at http://www.happycog.com/ is a bit more ornate, but conceptually it is as simple as what we had before. For instance, in the top row of icons, we use the function to toggle the visibility of text within an element whose id is chcopy. Here is the markup and JavaScript with an additional function not yet shown:


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint