One file site design using Visibility on DIV classes/IDs

Question

Hi, I'm building a one-page(one file) site and want to get insight as to whether or not I'm taking the most practical and intelligent approach. The site is a simple site for a graphic designer. It has 4 "pages" which are "about me", "contact", "work", and "photos." What I want to do is have 4 divs(absolutely placed in the same spot) with only one visible at a time. When you click any of the links it turns the visibility of the others off and the clicked link on. There are a few ways I could do this though:

• Should I use Visibility to show/hide the layers?
• Should I use Z-Index to show/hide the layers?
• Is jQuery the best way to handle this?
• Is using classes such as .visible .hidden the best way to cycle which divs are shown/hidden?
• Any other tips to doing this for maximum efficiency?

I know some will tell me to just use separate pages but the site is simple with thumbnails and most of the size is in the header and jQuery script honestly. The thumbnails are fairly small and I don't see a point to making the site with more than one page if I don't have to.

Thanks for any insight.

Answer 1

If you are using jQuery, just call .show() and .hide() as needed to toggle the sections.

However as noted by @Pekka, it is likely better to leave these as separate pages.

Answer 2

Not an answer to your questions, but there are compelling reasons speaking against this kind of approach.

• Most importantly, it won't work with JavaScript turned off. It will be completely unusable for somebody who has no JavaScript. This makes it an absolute no-no for me.

• It makes it impossible to link to specific pages

• It's a SEO nightmare - maybe not that important in a 4-page site but still worth mentioning

• Maintenance becomes more difficult, as there are four or more complex page structures melted into one

Answer 3

As Pekka indicated, there may be arguments against doing this as a single-file site. But I'll assume you have a compelling use case. Answering the question:

I would approach this like so:

• Use four divs.
• No need to absolutely position them, just put them one after another.
• Give each div a distinct ID with a semantic name (e.g., "about", "contact", etc.).
• Don't hide any of them initially, just let them show one after another. Now the page can be used by people without Javascript, and it works just fine for search engines.
• On page load, use Javascript to hide all but the one you want to show.
• Determine which one you want to show by looking at the anchor in the location, e.g., "#about" means you want to show the about div, "#contact" means you want to show the contact page.
• When you are changing from one to another, change the anchor to match. Now the site is bookmarkable/linkable.
• Consider using a history plug-in to manage the anchors, so you can get forward and back support without absolutely tearing your hair out with all the browser inconsistencies. :-)

Answer 4

I think that using Jquery would be the best way to achieve this effect. Pekka mentioned that it won't work for users who have javascript turned off, but really-how many people have javascript disabled these days? Pretty much every single website you will visit relies on javascript.

In my opinion, the best way to get tabs using jquery is to use a plugin developed by Nettuts editor, Jeffrey Way. His personal site on which the plugin is located is under construction right now but I downloaded it a while ago. Here's a link to a zip file with the necessary files inside.

Please note that I have simplified his version greatly. This means I have removed a lot of styling but this shouldn't be a problem, since you probably will want your own unique styles.

JW-Tabs

Hope this helps.

Answer 5

See http://jqueryfordesigners.com/jquery-tabs/. This is a good approach.