In my spare time it’s been my new hobby to re-learn HTML and CSS (post coming up soon regarding it). I’m using RyanEagle.com as my “testing” ground, risking little. Yesterday I managed to make all the mobile menus disappear on my main site, you could say I’m still quite the beginner. It was time to write an updated intro copy for my website and wanted to experiment with hiding & displaying <div>‘s – perfect opportunity. My goal was to create a concise introduction that briefly introduces who I am, without overwhelming people with information. I achieved this perfectly with the newfound code I’ll share with you today, Below a preview of the introduction located directly on the Ryan Eagle Homepage, click the image to see the interactive (and mobile friendly) introduction.
How To Toggle Hide <div>’s:
Now, for the hidden <div>:
Ta’da, you’re done. That was pretty painless wasn’t it? Now this may not be as cool for you as it was for me, but getting it to work was quite the accomplishment for me. Let’s say the last time I hard coded without the assistance of Dreamweaver was before HTML5 was released.
Being the perfectionist that I am, I contracted out special development of a mobile-friendly RyanEagle.com Homepage and customized WPtouch for the mobile-friendly Ryan Eagle Blog. To say the least transferring to WordPress has been a breath of fresh air. I cannot believe I ran on that custom blog technology since 2004 for my website without ever upgrading! Enjoy the screenshots below