One of the most handy (and cool) tricks a web developer could learn to use is collapsible DIVs. This allows you to make a page that will only show the user what they want to see. If they’re interested in some part of content, such as a “mail to friend” or an expanded definition, they could click a link or image and make the page dynamically grow in size to show that added bit of content.

This was inspired by some comments in a post on Aaron’s SEO Buzz Box, and while I think he might be looking for a slightly more advanced solution, it gave me the idea to type up this post.

There’s a few different bits of code we’ll use in this. First we’ll create a div we want to expand or contract. For example:

mydiv” style=”display:none”>

This is a test!
Can you see me?

Notice our tagging the div with a unique id. This allows our Javascript to be able to find it when we alter it’s visibility. We also added a style property, setting it’s display attribute to “none”, which makes that DIV hidden when the page loads originally.

Next we’ll create a link with some inline Javascript to hide or show our div. It’s quite a bit to take in at once, but don’t worry I’ll explain it in depth in a second. Here it is:
mydiv').style.display == 'none'){ document.getElementById('mydiv').style.display = 'block'; }else{ document.getElementById('mydiv').style.display = 'none'; }">Toggle Div Visibility Whew! It’s so complicated because it’s done with inline Javascript. I’ll show an alternate method that’s much cleaner a bit later. But first, let’s tackle this. It’s a simple anchor tag, but you’ll notice the href is “javascript:;”. The purpose of this is to basically do nothing. You don’t want to direct to any other page, and if you put everything in the onmousedown property in the href property, it would work the exact same, but the user would see a mess of javascript in his status bar when he moused over the link, so this keeps it cleaner. Another common do-nothing insert to use for the href property is a pound sign (#), and while that will work, it’ll also move the user’s scroll bar to the very top of your website, which can get quite annoying.

Note, the following explanation is very detailed and assumes virtually no knowledge of Javascript… so if this seems basic to you, feel free to skip it.

Now, we have the href property clean so there’s nothing ugly in the status bar on mouseover, but we still need to actually do the hiding or showing of the div. We call this through the onmousedown property of the anchor tag. We can find the DIV we created earlier by document.getElementById(‘mydiv’), so we decide to first check if it’s already visible or hidden by running a simple if-statement of if(document.getElementById(‘mydiv’).style.display == ‘none’){. If this returns true, meaning the display property is set to none (hidden), we continue past the first bracket and change it’s display property to “block”, which means visible. This will also create a line break before and after our div, so if you want it to appear in the middle of your text or other content, without line breaks, change “block” to “inline”. Following that setting statement, we have our else block, which it run if the first clause isn’t met (the display is NOT set to ‘none’). If it’s not set to none, we assume the div is visible, so we toggle it and hide the div, setting it’s display property to “none” (hidden) again.

An alternative which is a bit cleaner than that inline anchor tag (above) is creating a javascript function for toggling the DIV’s visibility. For this method, use the following anchor tag:
mydiv');">Toggle Div VisibilityThis anchor tag behaves like the above inline javascript, except instead of executing the change in the anchor tag itself (inline), it instead calls the toggleDiv function, passing the div name as a parameter.

This anchor tag above calls the following function. Simply insert this text (the function) somewhere in your document above the link in the body tag, or in the HEAD tag of the HTML itself:
<script language="javascript">
function toggleDiv(divid){
if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
}else{
document.getElementById(divid).style.display = 'none';
}
}
</script>
This function does exactly what the above inline javascript does, only it’s a bit cleaner. When it’s called by the anchor tag, it checks the div with the name passed to see if it’s currently not visible (display set to “none”), and if so, it shows it by changing the display to “block”. If the original if statement fails (display is not set to “none”), then it assumes the DIV is visible and hides it again (sets the display property to “none”).

Finally, here’s an example of it in action:

Toggle Div Visibility

Also note, search engines WILL read and index the content in these DIVs, so don’t worry about using collapsible DIVs hurting your SEO.

About these ads
Comments
  1. Cecil Westbrooke says:

    There is noticeably a bundle to find out about this. I assume you made sure nice factors in options also.

  2. fuck buddy colorado springs says:

    Excellent blog you have here but I was curious if you knew of any forums that cover the same topics discussed in this article? I’d really love to be a part of online community where I can get feed-back from other experienced people that share the same interest. If you have any recommendations, please let me know. Many thanks!

  3. a859344 says:

    I’ve said that least 859344 times. SCK was here

  4. Lauren Amorin says:

    some really nice and utilitarian information on this website , too I conceive the style and design has good features.

  5. hybrid carbon bike says:

    I conceive you have observed some very interesting points , regards for the post.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s