- 05
- Mar
Note, I’ve since made an updated post to this, with Digg comment style sliding animation included. Digg Link - Actual Link
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:
<div id="mydiv" style="display:none"><h3>This is a test!<br>Can you see me?</h3></div> 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:
<a href="javascript:;" onmousedown="if(document.getElementById('mydiv').style.display == 'none'){ document.getElementById('mydiv').style.display = 'block'; }else{ document.getElementById('mydiv').style.display = 'none'; }">Toggle Div Visibility</a> 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:
<a href="javascript:;" onmousedown="toggleDiv('mydiv');">Toggle Div Visibility</a>This 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"> 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”).
function toggleDiv(divid){
if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
}else{
document.getElementById(divid).style.display = 'none';
}
}
</script>
Finally, here’s an example of it in action:
Also note, search engines WILL read and index the content in these DIVs, so don’t worry about using collapsible DIVs hurting your SEO.
I’m planning on making another tutorial later talking about how to do this with a bit of animation (sliding the div down and back up again). Hope this is helpful!
March 5th, 2007 at 11:42 pm
Great tutorial! What would be wonderful, for the purpose of a navigation system, is if there were a better way to call the dropdown. Switching it to onMouseOver still leaves something to be desired. Any thoughts?
March 5th, 2007 at 11:45 pm
onMouseOver would be better for things like navigation, you’re right, but this is more for things like login boxes (hidden unless needed), or the like.
After this function is in place, it can be called with any number of Javascript tricks or methods.
March 6th, 2007 at 1:33 am
Yeah!!!! And it works in Opera too! Great job on cross browser coding…..now if we could only get the Windows idiots to read tutorials like this…..
March 6th, 2007 at 1:57 am
Great article. I wish I had this when I went through setting up my site. I used this idea for my “Add a Comment Box” as well as viewing/hiding comments. I did mine in a slightly more advanced way as all my “articles” are on one page and are database driven. I use a small image as the “link” to show/hide. If you’re interested check it out at http://www.brombomb.com/news.php
March 6th, 2007 at 2:06 am
I’m a ‘windows idiot’ and have already implemented something like this ohhhh about 5 months ago.
be careful when you generalize noah b, lest you become the very thing you rally against.
March 6th, 2007 at 2:09 am
That’s a great tutorial on collapsible stuff on web pages.
>>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
But you rationale to prefer onmousedown over href doesn’t appear very sound to me. If you encapsulate the actual code in toggleDiv method, all the user is going to see on mouse over is a call to this method and that doesn’t look like any kind of mess to me. I’d rather use the standard attribute href than something like onmousedown, which might cause problems. For instance, there is no way to toogle using keyboard shortcuts with onmousedown.
March 6th, 2007 at 3:13 am
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.
You might want to reconsider your advice.
March 6th, 2007 at 3:25 am
Good easy to follow writeup. You could take this one step farther and make your code cleaner by using IDs or classes to attach event listeners using the DOM. This way you could easily attach multiple events like onkeypress for better accessibility.
March 6th, 2007 at 3:27 am
This hides the content completely for the users who have javascript turned off (or where javascript is not supported - think mobile platforms and corporate browsers). It should be accessible in a(n alternative) way for those users too.
March 6th, 2007 at 3:33 am
Why not to use Prototype for this effect. In Prototype you have a function named toggle() for this effect. So you easily can write
Toggle Div Visibility
Nothing less, nothing more and it works well in all current browsers…
March 6th, 2007 at 3:42 am
in the interest of efficiency
function toggleDiv(divid){
var dv = document.getElementById(divid);
dv.style.display = (dv.style.display == ‘none’? ‘block’:'none’);
}
March 6th, 2007 at 3:51 am
I recommend not using block for the display. Depending on where you are putting this div in your html you could run into trouble. The recommended practice is doing an empty string. An empty string tells the browser to default to it’s original display which could be other than block.
March 6th, 2007 at 4:14 am
[...] read more | digg story [...]
March 6th, 2007 at 4:28 am
How to Create a Collapsible DIV with Javascript and CSS…
VEry useful for those who want to learn Website….
March 6th, 2007 at 5:11 am
Is it possible to have multiple divs/buttons, but when you open one, the others automatically close? I am trying to create a menu system that will only show 1 sub menu at a time (as they overlap each other).
March 6th, 2007 at 5:26 am
@h:
dv.style.display = (dv.style.display == ‘none’) ? ‘block’ : ‘none’;
March 6th, 2007 at 5:45 am
Javascript should be unobstrusive, e.g. the div should be visible and *if* JS is enabled by browser client, then it can be collapsed by JS …
If the div is hidden with CSS and JS is disabled (can be a visitor’s choice or its admin at work’s choice or a limitation of its browser like a mobile or PDA), then no luck …
March 6th, 2007 at 5:46 am
[...] my last tutorial post about creating a collapsible div (no animation) was a huge hit, receiving over 850 [...]
March 6th, 2007 at 6:40 am
Cómo crear un DIV expandible con CSS y Javascript…
A pesar de estar en inglés el resultado final merece la pena….
March 6th, 2007 at 7:07 am
Nice, easy, effective
March 6th, 2007 at 8:15 am
[...] a great tutorial on using collapsible divs. Harry Maugans How to Create a Collapsible DIV with Javascript and CSS Geoserv __________________ FaqPal |NewsDots |Blog |APNAOnline | Utopian Productions Website of [...]
March 6th, 2007 at 8:36 am
Great tutorial. Thanks.
March 6th, 2007 at 9:02 am
I agree with Felipe, JavaScript and client-side effects should be unobtrusive and transparent. Your current method relies on Javascript being turned on to enable the DIV to appear.
In terms of markup, firstly you are using an anchor element for something which does not contain a hyperlink. This element should be a styled paragraph, strong (or possibly even a span) with an onlick applied via onload JavaScript instead as an attribute. Additionally, is there any particular need to wrap the h3 element in a DIV when would could have performed the same toggle of visibility on the h3 itself? DIVs are typically a last resort for when other elements are unsuitable to correctly describe content, here it is just creating an entirely unnecessary ‘markup sandwich’ (to coin a phrase).
The approach I would use would be to have your named element (excuse if it doesn’t appear correctly in comments):
This is some content
Toggle it
Then the appropriate JavaScript (in a really basic form):
document.getElementById(’togglee’).style.display = ‘none’;
document.getElementById(’toggler’).onclick = function() {
document.getElementById(’togglee’).style.display = (document.getElementById(’togglee’).style.display == ‘none’)?”:’none’;
}
Thoughts?
March 6th, 2007 at 10:17 am
[...] monks. A simple trick that needs to be used more often. X Men funny im juggernaut bitchvideoread more | digg story No Comments so far Leave a comment RSS feed for comments on this post. TrackBack [...]
March 6th, 2007 at 10:24 am
This is extremely useful. I’m glad someone took the time to do a write-up on it. I have been using this same method to show/hide commens and other items on http://www.newsweight.com
Great write up - hope to see this being more widely used after being front paged on Digg.
March 6th, 2007 at 11:06 am
[...] (src. en anglais harrymaugans.com) [...]
March 6th, 2007 at 11:17 am
Nice effect.
I’ve actually been really impressed with the Jquery Javascript library. It’s really small and something like this would be as simple as
Toggle the Div
That’s it! Jquery automagically takes care of it all.
March 6th, 2007 at 11:47 am
While I’ve been using collapsable divs for more than a couple of years (doing basically what’s in this tutorial) I’ve not found it very useful, until….
The problem for me was that even though the div is hidden, it still has to be there, which means if I’m doing an admin system for products, and there are a lot of products, I still need to load every div with content and hide it, which doesn’t reduce the load time on my server.
In the old days, I would embed an IFRAME on the div, and using Javascript, pass parameters into the IFRAME, and show the div. While it worked, it was an ugly solution managing all those frames, params, and div styles….
Enter AJAX. Now what I do is create the empty div for each product, hide it, and populate data and make it visible only when I need to. The page still looks clean, it’s efficient, and only loads what it needs when it needs to.
March 6th, 2007 at 12:08 pm
Great Tutorial indeed and ofcourse bookmarked. Now what we need is something much more advanced to enhance this. What do you say ?
March 6th, 2007 at 12:26 pm
Great tips. I love digg because I learn something new everyday.
March 6th, 2007 at 1:20 pm
[...] How to Create a Collapsible DIV with Javascript and CSS Simple tutorial that shows you how to make a show/hide div with javascript and css. (tags: css webdesign tutorial javascript design web html DHTML coding webdev) [...]
March 6th, 2007 at 1:46 pm
Harry Maugans » How to Create a Collapsible DIV with Javascript and CSS…
Tips on how to make your webpage that much fancier!…
March 7th, 2007 at 10:25 am
[...] o “plegables” se pueden implementar con JavaScript en unos pocos pasos. En How to Create a Collapsible DIV with Javascript and CSS (en inglés) hay un pequeño tutorial que explica de forma sencilla como implementar esta [...]
March 7th, 2007 at 10:27 am
Creación de un menú “plegable” con JavaScript y CSS…
La creación de menús JavaScript es algo habitual en los desarrollos web. En concreto, son muy usados los menús en los que al pulsar una opción se despliega una lista de “sub-opciones”. Estos menús “retráctiles” o “plegables” se pueden…
March 7th, 2007 at 10:27 am
Creación de un menú “plegable” con JavaScript y CSS…
La creación de menús JavaScript es algo habitual en los desarrollos web. En concreto, son muy usados los menús en los que al pulsar una opción se despliega una lista de “sub-opciones”. Estos menús “retráctiles” o “plegables” se pueden…
March 8th, 2007 at 1:20 am
[...] unos días llegaba a portada de Digg un artículo escrito por Harry Maugans: How to Create a Collapsible DIV with Javascript and CSS. En principio me sorprendió que un script tan simple lograse tanto eco pero lo que más me [...]
March 9th, 2007 at 11:25 am
[...] DIV with JavaScript and CSS March 9, 2007 Posted by mandz in Web design. trackback Learn how to create Collapsible DIV with JavaScript and CSS. Harry Maugans drills it step-by-step. A wonderful demonstration of what CSS and Javascript can do [...]
March 10th, 2007 at 6:28 am
[...] How to Create a Collapsible DIV with Javascript and CSS [...]
March 12th, 2007 at 3:08 am
[...] read more | digg story [...]
March 12th, 2007 at 1:58 pm
As Felipe and Mark James said, JavaScript should be unobtrusive.
I suggest you read up on Unobtrusive JavaScript and other JavaScript Best Practices.
Mark also mentioned the idea of using elements based on what they mean and not using unnecessary div elements. This idea is known as semantic markup. Some people also call it structural markup.
Also the display property has more possible values, though not all browsers support all of them.
March 12th, 2007 at 8:11 pm
[...] en en digg un articulo de Harry Maugans sobre como crear un div colapsable con Javascript. Es un articulo enoorme para algo que se puede hacer en dos lineas y que se viene haciendo desde el inicio de los [...]
March 18th, 2007 at 4:09 am
[...] the heals of two very successful tutorials on creating a collapsible div and an animated sliding div, I’ve decided to write another. It seems my last few helped a [...]
March 20th, 2007 at 2:48 pm
I am also a “Windows Idiot” and I was doing this, like, 3 years ago. To be honest, I don’t even know why this got posted on Digg in the first place, and I definitely don’t see how it got so many diggs.
March 20th, 2007 at 5:36 pm
[...] Harry Maugans » How to Create a Collapsible DIV with Javascript and CSS [...]
March 21st, 2007 at 9:58 am
[...] 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. Read a full ariticle [...]
March 23rd, 2007 at 9:12 am
how is anyone impressed with this? Go learn REAL JAVASCRIPT. .
March 27th, 2007 at 2:03 am
Is this script really cross browser compatible (very old vs. new browsers) ?
March 27th, 2007 at 7:29 pm
[...] How to Create a Collapsible DIV with Javascript and CSS Nice turorial on how to do something which is a mainstay of site design these days — collapsible page sections. (tags: web design javascript css) [...]
April 11th, 2007 at 9:19 pm
This is great!! Thank you very much. Here is this non-profit site that has used the help of this page to build their community contact page:
http://www.fencelinefriends.com/comm_contacts.html
Again muchas gracias!
April 11th, 2007 at 11:50 pm
[...] olduğuna karar verdim.Bu amaçla araştırmalarıma devam ederken oldukça basit yapıya sahip ve bu makale ile adım adım bize nasıl yapıldığı aktarılan bu scripti buldum.Ancak biraz daha [...]
April 24th, 2007 at 6:06 pm
asdsdfsdf
May 3rd, 2007 at 5:25 am
Hi Harry, any answer to Null’s question, please?
May 3rd, 2007 at 12:58 pm
Daniel + Null, I haven’t tested it on very many browsers myself, however there are some commenters above that say they have tested it on IE6/IE7/Firefox1/Firefox2/Opera/Safari. I’m not sure how far back the browser compatibility goes, however it should work on most modern browsers.
May 12th, 2007 at 3:55 am
all are good.
May 17th, 2007 at 4:30 am
Hey This is good.
I have a problem with this div tag.
When user chooses a radio button, based on the permissions got from the radio button, a text box and an image are hidden or shown. I used 2 div ids - one for image and another for text box. When I tried this in IE, I got out of memory alert window. Could u help me?
May 20th, 2007 at 12:48 pm
This tutorial is great, but however I encounter a problem:
when I want to apply this to several tables on my page, the table is displayed at the full bottom of page, instead of being in the order it should be.
Can anybody check at http://www.ipvr.org/formation/formationsext/formationsponctuelles.php
and give me some help ?
May 20th, 2007 at 1:32 pm
I auto reply myself: sorry for distrubin’, I made a trivial error and my problem is solved
May 20th, 2007 at 1:35 pm
Hoo, I found out why !
May 20th, 2007 at 5:10 pm
[...] Harry Maugans » How to Create a Collapsible DIV with Javascript and CSS [...]
May 24th, 2007 at 5:32 am
Harry» Hi Harry .Thanks.
I expect more from you.
May 28th, 2007 at 8:11 am
Hi is there a way to have multiple divs and only display one at a time?
like
div - image
div2 -image
div3 -image
menu div - toggle1 toggle2 toggle3
The problem is that other divs would need to automaticly get display:none declaration when one is open?
June 1st, 2007 at 10:12 am
Hi Guys,
I’m using prototype library for hiding and showing elements. I want the element to be hided first when the page is loaded.
Thus, I set the style:
#element {display: none;}
Then I call the show function when a button is pressed:
The function is:
function show(id){
var d = $(id);
d.show(); }
But it doesn’t work: the element is hided first, and later it doesn’t show up when I press the button.
Can you advise?
Thanks, Csaba
June 1st, 2007 at 5:53 pm
First off, thanks so much Harry for this amazing script.
However, I tried Olivier Suritz’s suggested method of getting this to work with DIVs if varying heights, but it didn’t work at all when I tried his code!
Are there any other methods we can use to get this to respond to a DIV of any height, without entering it manually? Thanks so much!
June 8th, 2007 at 5:35 pm
So simple it’s just gorgeous. Thanks!
June 10th, 2007 at 4:23 pm
excellence. quick and easy. thanks so much!
June 13th, 2007 at 2:48 pm
Is there anyway so the “hidden” DIV is automatically made visable in browser’s that don’t support Javascript? That way, they can see the DIV too, even though it won’t scroll for them?
June 15th, 2007 at 8:31 am
Excellent tutorial!! Really helped men!!
its so simple and does the job!!
Thanks a lot!!!
June 18th, 2007 at 4:00 pm
Similar to Andrew’s question, is there a way to provide a link to expand all the hidden DIVs all at once? I’m using it to hide the answers to the questions in my FAQ (because there’s a lot of them) but a visitor might want to expand all of them at once (say for printing or just reading everything). I know you can click Refresh to collapse them all. Is there a way to expand them all?
June 19th, 2007 at 7:55 am
sasdfsdfasdfasdfd
June 19th, 2007 at 7:57 am
not useful as expected
June 19th, 2007 at 4:04 pm
I answered my own question.
My solution assumes you use sequential numbers as your div id starting with 1. I also added a link to collapse all hidden divs instead of just clicking on refresh.
Insert the following in the HEAD tag:
function ExpandAllDiv(maxdivid){
for (i=1;i
function CollapseAllDiv(maxdivid){
for (i=1;i
In the BODY tag, insert these two hyperlinks where you want. Note that ‘12′ is the number of divs - change this as necessary:
Expand all
Collapse all
June 20th, 2007 at 9:20 am
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
June 20th, 2007 at 6:16 pm
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
June 21st, 2007 at 1:54 am
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
June 21st, 2007 at 10:14 am
Excellent tutorial, I just found it thought my friend’s website. Java script is always a pain to program and your post shows it is not all that complicated at all, many thanks for taking the time to write it!
June 21st, 2007 at 10:58 am
this is very cute script!!! thanks, i will use this
June 24th, 2007 at 3:44 am
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
June 25th, 2007 at 10:34 am
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
June 25th, 2007 at 3:39 pm
Easier to call getElementById only once!
function toggleDiv(divid) {
var el = document.getElementById(divid);
el.style.display = (el.style.display == ‘block’) ? ‘none’ : ‘block’;
}
June 25th, 2007 at 4:17 pm
It would be nice to have the option for only one to stay open at a time though.
June 25th, 2007 at 5:19 pm
Thanks,
this is the most innovative thing I’ve ever seen ؟
June 25th, 2007 at 5:50 pm
very interesting… thanks…
June 25th, 2007 at 8:08 pm
As touched upon by Mark James’ comment above, setting the …style.display attribute to an empty string when you want it to display is a better option. This then allows the same piece of code to be applied to any element - whether it is a block element (like a DIV), an inline element (like a SPAN) or anything else.
And, as a good base I have used in the past, a cutdown version of the code can be:
document.getElementById(’mydiv’).style.display=(document.getElementById(’mydiv’).style.display==’none’?”:’none’)
June 25th, 2007 at 10:26 pm
worked like a charm!
but i wish it wouldn’t stop the page from loading when you click the ‘read more’ link.
June 26th, 2007 at 6:53 am
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
June 26th, 2007 at 7:57 am
Maybe this is simple for all you experienced JavaScript coders but for us newbies this was a great tutorial. So, if you don’t like it, go somewhere else and leave us alone. I’m wondering how to put the code onto a button rather than use an href. Any suggestions?
June 26th, 2007 at 1:50 pm
What would improve this technique dramatically, IMO:
Instead of directly manipulating style.display in JS - swap CSS class names on the DIV, where the classes are specified in CSS with display: block or none. This makes the technique more generic, where you can then toggle between any two styles.
Also, consider using some unobtrusive JS, where the onmousedown / onclick is wired up in an onload or other handler instead of being defined inline on the link itself in HTML source.
June 26th, 2007 at 5:52 pm
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
June 26th, 2007 at 7:51 pm
Did anyone figure out how to get one “show div” to hide the others?
June 27th, 2007 at 4:16 pm
[...] How to Create a Collapsible DIV with Javascript and CSS (tags: Javascript css code tutorial webdesign design menus layout HTML web) [...]
June 28th, 2007 at 7:56 am
thank you very much! this is really help full! I love it!
July 1st, 2007 at 7:50 am
Hi,
Just dipping my toe into writing a website. I’ve used something similar in my site but I have a question that hopefully you can answer. I have a page dedicated to a topic, on that page I have a list of subtopics. The detail for each topic is hidden using style=”display:none” and an onclick event to change the display.
My question, how would I send a link to someone to view a specific subtopic? Using anchors seemed the way to go as that will load the page and drop down to the anchor. But the problem is I don’t know how to make that change the display of the div automatically as well. Make sense?
Hope you can help a novice.
Thanks,
Mark
July 3rd, 2007 at 9:26 am
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
July 10th, 2007 at 4:36 am
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
July 10th, 2007 at 4:21 pm
Fantastic! Thanks a billion for this…I’ve been pulling my hair out trying to find a solution and your’s was by far the easiest.
jimbo: don’t know if this is what you want, but I got one link to hide text block A and get text block B to appear. You have to give each div you want to disappear/reappear a unique ID (IDs can’t be repeated…I found this out the newb hard way). Set the style on the initially visible divs to display: block (or inline if you don’t want the line breaks). Then run the other IDs through the script at the same time…
Make A go away and B appear
July 11th, 2007 at 1:17 am
I have to agree completely with what Stacey said… “Fantastic! and Thanks a billion for this!”
I’m particularly interested though in learning more about how to make text block “A” go away and text block “B” to appear in it’s place. I’m trying to do this for a long article and would like to be able to show the first few paragraphs in one block and the entire contents in the other. How might I modify this script to do this?
Thanks!
~Greg
July 11th, 2007 at 1:34 am
So, after playing around with this a bit, I found this to work, but I have absolutely no javascript experience, so please let me know if there’s anything wrong with doing it this way… Thanks! ~Greg
This is a test!Can you see me?
This is my complete article!Can you see me?
Toggle Div Visibility
July 11th, 2007 at 12:42 pm
Hmmm. okay well the code I copied and pasted into my previous post did not show up as code so, perhaps I’ll try placing it inside of an HTML comment…
Here’s what I’m trying to do and it “seems” to work fine. Could anyone please tell me if this is an acceptable way to use the javascript? Thanks! ~Greg
function toggleDiv(article){
if(document.getElementById(’article_tease’).style.display == ‘block’)
{
document.getElementById(’article_tease’).style.display = ‘none’;
document.getElementById(’full_article’).style.display = ‘block’;
}else{
document.getElementById(’full_article’).style.display = ‘none’;
document.getElementById(’article_tease’).style.display = ‘block’
}
}
This is a test!Can you see me?
This is my complete article!Can you see me?
Read More
–>
July 21st, 2007 at 11:13 am
[...] for anyone from beginners to programming monks. A simple trick that needs to be used more often.read more | digg story 0Comments Posted by admin in [...]
July 23rd, 2007 at 12:16 am
Is it possible to put the div material into a separate file and have “Toggle Div Visibility” load the division from that file? Thanks!
July 23rd, 2007 at 2:57 pm
I like pie.
July 24th, 2007 at 1:26 pm
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
July 24th, 2007 at 2:45 pm
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
July 28th, 2007 at 11:38 am
So is there a way to change it so that if you have say 20 div’s on a page that when you toggle open one the current one open is closed, that way only the one div is open at any one time?
July 28th, 2007 at 1:04 pm
Cool script. Thanks a lot.
July 31st, 2007 at 1:40 pm
Dude… i love you… i had the “#” driving me crazy XD now i will use the “javascript:;” … works like a charm XD
August 1st, 2007 at 6:43 pm
Nice script, easy to understand and easy to implement. A really nice work
August 6th, 2007 at 11:53 am
Thank goodness Harry writes in plain English for a target audience like me - code beginners. The rest of the code comments are just gobbledygook.
It is so helpful to have every dot and comma explained. It has helped me a lot.
August 18th, 2007 at 10:58 am
Nice script thanks heaps! would be cool if you could add a ease motion.
August 23rd, 2007 at 1:22 am
Is there a way to place all the CSS and Javascript inside the … tags? The Bea portal only let’s me place as if I’m putting all the HTML inside body tags.
August 24th, 2007 at 10:27 pm
Ok so here’s my deal. I have 3 divs: header, content, links. I want to be able to have the divs hidden, but when one link is already open i want it to hide again when another link is clicked. any help appreciated
August 26th, 2007 at 9:30 am
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
September 1st, 2007 at 3:13 pm
This has helped me.. Thanks for the coding.
September 6th, 2007 at 3:33 pm
[...] his tutorial “How To Create A Collapsible DIV with JavaScript and CSS,” Harry writes regarding the use of the HREF attribute in anchors that trigger JS [...]
September 10th, 2007 at 1:37 am
Fantastic study material…
September 12th, 2007 at 12:45 pm
this is not unobtrusive as mark james has said.
complete waste of my time.
September 17th, 2007 at 3:10 pm
[...] just came across this article about showing and hiding a div with javascript and it annoyed me because it’s wrong! What if javascript is turned off? If it’s hiding [...]
September 20th, 2007 at 8:16 pm
Thanks for the coding.
September 21st, 2007 at 5:23 am
Harry, thanks for posting your solution. I have implemented it on the above website and it is working fine for Mozilla Firefox and Safari but seems to run into trouble in IE6 as you will see if you fire it up. I’d like to get this ironed out and should be grateful for your assistance as I am fluent in javascript. Cheers!
September 23rd, 2007 at 10:28 pm
hey, awesome tutorial, I was just wondering if anyone ever developed a script that would close the previous div when opening a new one? Thanks in advanced.
September 24th, 2007 at 7:19 am
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
September 27th, 2007 at 5:24 am
It would be easy to hide the previuosly opened div if you know its id.
Otherwise just loop throough & hide all div element on the page and then show the one you want to display.
October 4th, 2007 at 11:58 am
Is there a way to have the information expand below the text link
instead of above?
October 8th, 2007 at 11:55 am
[...] read more | digg story [...]
October 12th, 2007 at 12:25 am
[...] for anyone from beginners to programming monks. A simple trick that needs to be used more often.read more | digg story [?] Share [...]
October 15th, 2007 at 2:07 pm
Great tips.It may be very useful to me.Thnx.
October 15th, 2007 at 6:03 pm
I have been working on my website for over year now and have learned a lot of great things from forums and blogs. Thanks for sharing your this information Harry. It really helps for us novice coders.
October 17th, 2007 at 10:30 am
Is it possible to make wordpress plugin to automaticly make sidebar menu collapsible and expandible?
October 21st, 2007 at 3:21 am
[...] How to Create Digg Comment Style Sliding DIVs with Javascript and CSS 67. How to Create a Collapsible DIV with Javascript and CSS 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS 69. AJAX Shopcart [...]
October 22nd, 2007 at 2:18 am
dis is good…but can someone expalin the innerHTML functionality..???
November 7th, 2007 at 8:43 pm
Simple and to the point - thanks!
I used it for the creation of a help (FAQ) page but made one minor change (2 lines)to allow what the printed page to be the same as the displayed page.
function toggleDiv(divid){
if(document.getElementById(divid).style.display == ‘none’){
document.getElementById(divid).style.display = ‘block’;
document.getElementById(divid).style.print = ‘block’;
}else{
document.getElementById(divid).style.display = ‘none’;
document.getElementById(divid).style.print = ‘none’;
}
}
November 10th, 2007 at 5:02 pm
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
November 14th, 2007 at 4:01 am
Thanks for such a wonderful tutorial.
November 15th, 2007 at 8:19 am
[...] How to Create a Collapsible DIV with Javascript and CSS use collapsible divs to organize enormous, ugly lists of crap? (tags: javascript css design) [...]
November 17th, 2007 at 9:40 am
[...] read more | digg story [...]
November 23rd, 2007 at 2:09 am
[...] 2、利用javascript和css折叠div [...]
November 25th, 2007 at 12:21 am
I am also looking for a way to reverse the animation so that the link stays static on the page, and the collapse animation grows up from the top of the link - has anyone figured this out yet?
November 30th, 2007 at 8:23 am
Automotive Audio Equipment
Buy automotive audio at low prices.
November 30th, 2007 at 5:42 pm
Great, thanks! I needed something to use for popup layers on our site. However I’m not a fan of putting “javascript” as the href property (benefits no-one really). What we did was to use separate code for open and closing so that we have a text link to open /expand the DIV and a close button (X) with the close javascript function.
Here’s some additional thought for what to do with href. If you’re use separate link to open close the DIV, use the href in the opener to scroll to the content, so instead of “#” you have “#myanchor” and place an acnhor4 with that name as part of your div.
December 3rd, 2007 at 4:56 am
cool tutorial - dugg!
December 4th, 2007 at 11:30 am
Neat - I’ve been playing arouns with css a bit but I’m having a little problem related to your example, so I figured I’d see if you had any ideas on addressing it… to start…
I have a div which is initially hidden when a page is loaded - there is an “open” link which opens it and offers a hide link etc. - works fine
I have a css file for both printing and non-printing uses. The css for printing causes the hidden divs to be block instead of none etc.
The div which is initially hidden when a browser opens the page WILL print if the user prints it before opening the hidden div using the open link.
The hidden div will print if it has been opened using the open link.
The problem: once the hidden div has been opened and closed using the open and hide links, it will no longer print from its hidden state.
Pretty sure this is because the css file for printing is only being handled only when the page is loaded and that manipulation od the display state after loading will supersede the initial control exerted by the printing css file.
Anyway - example is here - open and close the “CoverLetter” div to test
http://www.hav.com/res.htm
Any ideas how to allow the hidden divs to be printed after they have been opened and closed using links in the page??
December 4th, 2007 at 6:56 pm
[...] How to Create Digg Comment Style Sliding DIVs with Javascript and CSS 67. How to Create a Collapsible DIV with Javascript and CSS 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS 69. AJAX Shopcart [...]
December 7th, 2007 at 1:09 am
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
December 7th, 2007 at 1:00 pm
just a quick followup, in case anyone else is having this problem. The solution sems to be adding !important to the display attributes in the various print.css classes that are experiencing the problem.
What I didn’t understand is that changing a screen attribute with JS effectively (or actually) promotes the screen style to “inline” thus causing it to have precedence over the imported print.css. Adding !important as required in the print.css file allows the print.css styles to retain precedence.
Anyway ….
December 11th, 2007 at 6:23 am
Great tutorial.Keep up your great work.
Thanks dude.
December 11th, 2007 at 2:30 pm
Many thanks for sharing this piece of code. A helpful article.
December 15th, 2007 at 1:51 pm
Anyone know how to deal with a post back? all div tags get reloaded( back to the default setting) so lets say you have several collapsed sections( that the user has either collapsed or expanded on your page and post back occurs that reset all of them reset(I know… very frustrating )
Any Thoughts?
December 20th, 2007 at 12:38 pm
Thanks, this great code!
I wanted to use the timer function to make a div and used your idea to do that. heres how it goes:
function hidediv(div)
{
if(document.getElementById(div).style.display = ‘block’)
setTimeout(”document.getElementById(”"+div+”").style.display = ‘none’;”, 7000);
}
you rock Harry, i’m a fan.
December 27th, 2007 at 10:11 am
Is it possible to make wordpress plugin to automaticly make sidebar menu collapsible and expandible?
December 28th, 2007 at 7:19 pm
[...] for anyone from beginners to programming monks. A simple trick that needs to be used more often.read more | digg [...]
December 29th, 2007 at 12:48 pm
If we need to have a scrollbar image collapse/expand rows of a table on doubleclick. need some help to solve this. trying to use the table rows id to toggle the visibility and resize the image which indicates the number of rows collapsed.
January 1st, 2008 at 1:27 pm
[...] for anyone from beginners to programming monks. A simple trick that needs to be used more often.read more | digg story Posted in Uncategorized RSS 2.0 | Trackback | [...]
January 8th, 2008 at 5:58 pm
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
January 8th, 2008 at 9:55 pm
thanks, this are the effects what i have search.
January 9th, 2008 at 8:10 pm
I Think, İt’s Very Nice…
January 10th, 2008 at 3:18 am
Thanks … It is very useful to me
Pleae send thats type of useful stuffs.
January 12th, 2008 at 6:56 pm
pretty cool, thanks a lot
January 13th, 2008 at 2:22 pm
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
January 15th, 2008 at 8:24 pm
CSS bende dogru calıştı problem yok yani!
Webdizayner olmak zor iş : )
Thus, I set the style:
#element {display: none;}
Then I call the show function when a button is pressed:
The function is:
function show(id){
var d = $(id);
d.show(); }
January 15th, 2008 at 8:25 pm
Thank you bro this site wery good and spesific a website !
January 20th, 2008 at 6:19 pm
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
January 21st, 2008 at 11:11 am
Is there anyway to swap the “Toggle Div Visibility” text?
For example if the text read “Show Div Visibility” (when the page opens), then after clicking and displaying the hidden info, the text swaps to “Hide Div Visibility”?
Thanks, great script btw!
January 23rd, 2008 at 6:52 pm
Thank u for but
[…] 67. How to Create a Collapsible DIV with Javascript and CSS […]
January 24th, 2008 at 12:33 am
The only thing I cant figure out is how the collapsed div can dynamically open to the size of the content withing, in terms of div height. In other words if I have content in the div from a DB, meaning that sometimes it could need to be 10px in height, sometimes 100px. How can I make sure that the height of the div will adjust depending on the content?
January 29th, 2008 at 12:22 am
Vallahi bulunmaz velinimed ne diyim şimdi ben !
Ellerinize kollarınıza saglık sabah 5 lere kadar beni bu sitede tuttunuz
January 29th, 2008 at 12:24 am
Is it possible to make wordpress plugin to automaticly make sidebar menu collapsible and expandible?
January 29th, 2008 at 12:37 am
hey, awesome tutorial, I was just wondering if anyone ever developed a script that would close the previous div when opening a new one? Thanks in advanced.
February 1st, 2008 at 6:59 am
I was wondering can i replace my existing functions for collapsing and expanding the list items (very odd and plus throws some exceptions/errors in the older browsers).
http://www.entertainmentresidence.com/Radio-Entertainment.aspx
Please help if you think i can make it as simple as the Harry’s sample and still keep the impression that i achive with the older script?
Thanks:)
February 3rd, 2008 at 2:43 pm
Thanks a lot. This is the best piece of code for expanding/collapsing posts I have found. And it is not complicated as well.
February 5th, 2008 at 1:47 pm
Paris exposed video footage
Recently leaked footage of the new Paris Hilton sex tape
February 6th, 2008 at 8:20 pm
This is great! I do have a question though: could you use something other than a div? I had an iframe in mind.
February 8th, 2008 at 5:37 am
Great tutorial. Thanks.
February 9th, 2008 at 6:36 am
Page bookmarked for later use. Thanks:)
February 10th, 2008 at 7:01 pm
One word: “Thanks”
February 12th, 2008 at 3:27 am
How do I link to content inside a hidden from another page so that it becomes visible when the page loads?
In other words, all my are hidden from view by default (the menu is collapsed). But I want to provide a link on another page that automatically reveals the appropriate hidden , depending on where they came from. So if they clicked on ‘about us’ on page a, they land with ‘about us’ expanded on page b.
Many thanks for any help!
February 12th, 2008 at 3:29 am
Try that again, my tags got removed:
How do I link to content inside a hidden -div- from another page so that it becomes visible when the page loads?
In other words, all my -divs- are hidden from view by default (the menu is collapsed). But I want to provide a link on another page that automatically reveals the appropriate hidden -div-, depending on where they came from. So if they clicked on ‘about us’ on page a, they land with ‘about us’ expanded on page b.
Many thanks for any help!
February 12th, 2008 at 2:16 pm
nice tutorial! What would be wonderful, for the purpose of a navigation system, is if there were a better way to call the dropdown. Switching it to onMouseOver still leaves something to be desired. Any thoughts?
February 18th, 2008 at 8:31 am
There are many useful informations in this great article…I really enjoy reading the whole blog that you write. Thanks!
February 22nd, 2008 at 1:31 am
Is this script really cross browser compatible (very old vs. new browsers) ?
February 22nd, 2008 at 1:27 pm
In other words, all my are hidden from view by default (the menu is collapsed). But I want to provide a link on another page that automatically reveals the appropriate hidden , depending on where they came from. So if they clicked on ‘about us’ on page a, they land with ‘about us’ expanded on page b.
February 24th, 2008 at 5:33 pm
hintergrundbild
pretty sweet!
March 4th, 2008 at 6:55 am
thankss
March 11th, 2008 at 10:37 pm
I was wondering if someone here would know why I get an error “document.pageLoading” is null or not an object if pageloading is a swf file?
function toggleDiv(divid){
if(document.getElementById(divid).style.display == ‘none’){
document.getElementById(divid).style.display = ‘block’;
document.pageLoading.TCallLabel(”/”,”restart_function”);
}else{
document.getElementById(divid).style.display = ‘none’;
}
}
any help would be great… i’m just trying to call a function in action script when the div is toggled by the javascript… thanks
March 11th, 2008 at 10:40 pm
Also now i get ‘document.getElementById(…)’ is null or not an object
Why?
i want to be error free
any ideas?
April 9th, 2008 at 2:54 pm
Very nice tutorial - Over the last year Ajax has gone from virtually non-existent to becoming more and more popular everyday. I suspected when I first saw the Ajax function and wondered= “wow! ..how’d they do that” that it was probably going to start popping up more and more. I’m hoping to add some of this to http://www.ezprintsolutions.com to make a clean Ajax product and questionaire section. I’m surprised it’s not all over the Internet yet.
April 14th, 2008 at 12:28 pm
Sex Free Sex Pictures Office Sex
I can not agree with you in 100% regarding some thoughts, but you got good point of view
April 22nd, 2008 at 10:26 pm
>
>
>
April 25th, 2008 at 1:17 am
Animal Sex Women Having Sex With Animals Dog Fucks Girl
I can not agree with you in 100% regarding some thoughts, but you got good point of view
April 27th, 2008 at 10:21 am
Sex Girls Having Sex Rough Sex
I can not agree with you in 100% regarding some thoughts, but you got good point of view
April 27th, 2008 at 10:54 am
Great. This is as simple as it gets. I needed just this.
May 6th, 2008 at 8:59 am
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
May 14th, 2008 at 3:52 pm
Wow just what I was looking for and found it on my first googling. Just wanted to know you have the expansion happen from bottom up, can it be from top to bottom?
Once again awesome tut to add to my delicious
May 22nd, 2008 at 6:02 am
free on line video poker
Chère strep poker poker software developer video poker download play free black jack free online texas holdem game
May 22nd, 2008 at 9:45 am
Hi How to have dynamic content , diffrent content in the same div .
Regards
Manoj K
May 25th, 2008 at 1:37 am
fantastic script, i love it, but i want the div layer to overlap existing divs/ content instead of moving the content to make room, so i can make a ebay style dropdown content box. Ive tried using “z-index: 1″ in the div style, but with no effect.
im using the inline version of the javascript, how do i make the div overlap all other divs?
many thanks for a great script!
May 28th, 2008 at 9:21 am
Good to here
June 3rd, 2008 at 3:38 pm
great tutorial, thanks so much for posting this! i’m in an advanced web design class and a few weeks back i was really sick and missed the day that the teacher taught us how to do this. i asked him if he could show me and he said he “didn’t have the time.” i just did this, fully understanding it, and running into absolutely no problems at all in under 10 minutes.
June 4th, 2008 at 4:08 pm
[...] 67. How to Create a Collapsible DIV with Javascript and CSS [...]
June 6th, 2008 at 4:33 am
Thanx, not many tuts tell you about the # in the href moving the page up, and that’s the problem i was having
cheers
June 23rd, 2008 at 1:18 pm
texas holdem wahrscheinlichkeiten…