What Drove Me To Write My Own "Show More" Code

line 1
line 2
line 3
line 4
line 5

Pretty simple stuff, click on a button (or link) and see more stuff on the web page (sometimes the web page gets taller). So why write a blog (also in my list of programs)? I used to always blog about a little anecdote; e.g., my wife asked me to throw out the garbage, and... . This is a return to my anecdotal blogs. In this case I've been job hunting, and applied for work at a local Chevrolet dealership. When I got home I decided I should book up on the latest offerings from Chevrolet and brought up http://chevrolet.com on my browser. I noticed that Chevrolet's website (or maybe it was the dealer's website) uses a lot of "show more" links; i.e., you click on the link and it show more information on the page. I thought this was a good idea; something that could be used on an online resume, or something like that. I.e., you want to show the reader just enough to get their interest, but not so much that it turns them off.

Not wanting to write anymore code then I have to, I searched the web for "show more" + link. I was amazed that all the hits I got were for how to use a certain javascript package to get this effect. Doesn't anybody write their own code anymore (OK, that sounds funny after stating, "Not wanting to write anymore code...")? If I started reading more hits or even tried another search string, I probably would've come across a page with an algorithm that just uses HTML, JavaScript and CSS. Not wanting to read a bunch of web pages, I went ahead and wrote the code for a more (and less) button. If you view the source code on this page, you'll see how I achieved the "show more" effect.

At this point I do want to state that the basic method for changing how a web page is displayed is to create more than one stylesheet that describes how to render the web page, or a part of it (usually a <div> section). Give the <div> a class and id; the id value identifies the <div> element, and the class identifies which stylesheet to use for rendering on a web page. The "show more" button has an onclick property too call a JavaScript function that dynamically changes the classname of the element (<div>, in this case). If you look at this page's source code you'll see that I defined the <div> as three lines high, and the overflow as hidden. Clicking on the "show more" button changes the class to a style sheet that defines the <div> height as "auto".

I made immediate use of this "show more" method by incorporating it on my music collection page, http://community-info.org/mp3iFrame.html That page has "Dave's Music" at the top of the list, and links to mp3s around the Internet, below that. I hide the mp3s around the Internet, now, but make them visible with a "show more" button. It's amazing what applying for a job can inspire you to do.

Return To My Blog Page       Return To My Programming Page