Download sliding show/hide script

Demo | Demo 2

Bookmark and Share

Put this into your <HEAD> section

Put this into your <BODY> section

Configuration

Create content

You use plain HTML to create your "questions" and "answers". This is coded in the following format:
<div class="dhtmlgoodies_question">Q: What kind of site is dhtmlgoodies.com ?</div>
<div class="dhtmlgoodies_answer">
  <div>
    dhtmlgoodies.com is a private site developed and maintained by Alf Magne Kalleland.
  </div>
</div>

Notice that I have used two DIVs for the answers.

You use CSS(The part between <style type="text/css"> and </style>) to configure the layout. Look at the examples for more help.

I have used a background image in this demo for the rounded edge at the right of each question:

If you like to use it, right click on it and select "Save target As". Put the file in a sub folder called "images".

Initialize show content

You can automatically expand content when the pages load. This is done by calling the showHideContent function manually. Example:

<script type="text/javascript">
showHideContent(false,1); // Automatically expand first item
</script>

This will automatically show the first item.

Javascript variables

There are two javascript variables which you can use to control the slide speed. These are:
var dhtmlgoodies_slideSpeed = 10; // Higher value = faster
var dhtmlgoodies_timer = 10; // Lower value = faster

If you want to be able to expand multiple items at the same time, you can do that by setting dhtmlgoodies_expandMultiple to true, example:

var dhtmlgoodies_expandMultiple = true;

Update log

  • September, 11th, 2006: Fixed problem with the script in Netscape 7.1.
  • April, 3rd, 2006: Fixed problem with initial sliding in IE.

Comments

Admin comment
DHTMLGoodies
You can do almost everything with css, but I think you need some javascript.

Here's one simple example:



<style type="text/css">
.expandedNode div{
display: block;
margin-left:20px;
}
.collapsedNode div{
display:none;
}
</style>
<div class="collapsedNode" style="cursor:pointer" href="#" onclick="this.className = this.className=='collapsedNode' ? 'expandedNode' : 'collapsedNode'">Main node
<div>Content to expand<br>Content to expand</div>
</div>
<div class="collapsedNode" style="cursor:pointer" href="#" onclick="this.className = this.className=='collapsedNode' ? 'expandedNode' : 'collapsedNode'">Another Main node
<div>More Content to expand<br>More Content to expand</div>
</div>


The only Javascript here is use to toggle css class


DHTMLGoodies at 09:33AM, 2011/02/17.
House
I am having a problem with this code - I'm sure it's me.

I'm trying to implement this example (as is) into my Blogger site. If you're not familiar with the concept (I wasn't..but I'm also not a programmer anymore), it handles things like this:
1. The Site template contains the header section for every page.
2. Each page contains just the pages (aka the post's) content - there are no header/title sections available for each page.

So, what I did was this:
- I copied and pasted the first bit of code entitled "PUT THIS INTO THE SECTION" into the site template just before the end tag. I made no modes to the code.
- When I went to update that code (save it), it informed me that there was a problem with the following message: "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The entity name must immediately follow the '&' in the entity reference.
"

- Now, in the meantime, I've put the second code snippet into the page itself (aka the post), but obviously, I can't test it until I get the code working properly.

Any ideas?
House at 10:50AM, 2011/02/25.
Mayssa
the css javascript code is amazing, it's magic, thank you
Mayssa at 06:19PM, 2011/03/07.
Nao
Hello! anyone knows how to create read more in html. I have that site I need to update. I'd like to be able to introduce the subject of some news and then add a read more link, alowwing the user to read the following text, but on the same page!

I figured I could use javasccript document write on a link but it does not seem to work, Anyone has the key?
Nao at 10:47AM, 2011/03/08.
Admin comment
DHTMLGoodies
NAO,

document.write only works when the page is being rendered. You cannot use that after the page is fully loaded.

What you probably need is something like this:

<script type="text/javascript">
function showMore(id) {
document.getElementById(id).style.display='';
}
</script>
<a href="#" onclick="showMore('news1');return false">Read more</a>
<div id="news1" style="display:none">
More text<br>
More text<br>
More text<br>
More text<br>
</div>
DHTMLGoodies at 10:53AM, 2011/03/08.
Nout
I cannot manage to automatically show some tabs on loading the page.

Where exactly do I place the following code?


showHideContent(false,1); // Automatically expand first item
Nout at 01:43PM, 2011/03/11.
Tyler
Help please - the 'initialize show content' code does not seem to work. I want to have my first answer expanded when loading the page, but when I add the code it breaks and nothing expands or collapses.
Tyler at 12:38PM, 2011/03/12.
bryan
Outstanding post!! Works perfect, I did make some css mods.
bryan at 02:37PM, 2011/03/15.
mort
I LOVE this script!
mort at 05:35AM, 2011/03/30.
Axel G.
Hi there... I have a problem here, this script is awesome!!

I'm trying to use it in a gallery whith 3 pictures for each row ("dhtmlgoodies_question" divs) and a bunch of rows. when you click one of the pictures it slides another div with some information of the picture ("dhtmlgoodies_answer"). the problem is when I click on a picture it slides the div, but also the other pictures from the row, except on the last item of the row, it slides fine.

What I'm looking for is when I click on a picture from the row, the "answer" div slide only the bottom rows and not the other divs in the same row

I hope you can give me a hint on how to solve this I really need to finish my project soon

Thanks!
Axel G. at 02:54PM, 2011/04/02.
Sreekumar MP
Good work. I was writing java script for the code earlier. But you were managed the effect in just one line of code.

Great.
Sreekumar MP at 12:40AM, 2011/04/07.
Clement
Thanks for the awesome script.
Is it possible for it to show another html page instead? like glinding in a new page into a content frame?
Clement at 05:52PM, 2011/04/13.
Newbie
I love this code,

Actually, I am looking of this.
Newbie at 03:54AM, 2011/04/15.
alf
Great script and html. But - I still have a number (>10%) of my users who still use IE7 as their primary browser. And the sliding doesn't always work with IE7. All other versions and browsers work great. Any ideas as to how to modify the script to make it compatible? Or is the answer to create a separate IE7-only style sheet? Thanks!
alf at 09:39AM, 2011/04/22.
alf
I was able to answer my own question after playing around with the style sheet a bit. I ended up changing the answer_content padding to 5px, which cleared up the IE7 issue. I also added padding-bottom:25px to answer_content because FF4 was cutting off sections when printing (but not in the display).
alf at 04:13PM, 2011/04/22.
mike
I was wondering if it was possible to put a submenu with the content
mike at 03:02PM, 2011/04/28.
Melissa
Thanks for sharing this. simple, elegant, works beautifully
Melissa at 04:06PM, 2011/04/28.
guioo diesel
I tried to use on tumblr, but the blockpost moves with the list when these slide
my tumblrtheme is this, if you can help me
http://diesel-.tumblr.com/
guioo diesel at 07:18PM, 2011/04/28.
Hans
This is great, but I also need to use this to show the first 4 lines of text, then a "more.." link that will expand the div to show all the content. Is there a way to do this? I have searched high and low for this, but can't seem to find a suitable solution.
Thanks
Hans at 11:18PM, 2011/04/29.
artemishunter
Great effect!

I am having trouble mimicking the "two column" look in the DEMO 2 example. How do you get the div layers to be side by side like that, instead of the way that they are in DEMO 1?

Thanks!
artemishunter at 04:10PM, 2011/05/10.
leonardo.g
I have some problen in IE7 when I insert the code in a div with "overflow-y:auto"

es.:


leonardo.g at 11:02PM, 2011/05/17.
redzuan
could anyone tell me how to make sure the first div is default open?
redzuan at 01:29AM, 2011/05/19.
Rizwan
Hey

I want to do the same thing but with a navigation bar. My main goal is to click a nav link, display the content then click another nav link and then display that content but hide the previous.

How on earth do i do this???
Rizwan at 02:16PM, 2011/05/31.
simo
awesome! thanks for sharing.
simo at 06:49PM, 2011/06/01.
Dom
Hi! This is really great stuff and I'm going to use it in my site. I was just wondering if you could help me out on one point? Is it possible to get a hover effect (colour change) on mouse over for the question links? Please help if you can.

Dom
Dom at 08:49AM, 2011/06/05.
n8wandler
@dom:

u can insert a hover effect by adding some css in the code.

my example:

html code:

*Your Question Link*

similar css code:

p.slider-link{
color:#666;
margin:0px;
padding:0px;
}

p.slider-link:hover {
text-decoration:underline;
color:#F00;
}


hope this helps...

btw: awesome script m8
n8wandler at 03:40AM, 2011/06/09.
n8wandler
sry, here my html code :)

LINKNAME

sry for doubleposting...
n8wandler at 03:41AM, 2011/06/09.
n8wandler
damn, the guestbook kills my html-code :D

give the answer only a "" -tag with a special class, for example "slider-link" and design this with css like my post above, dont forget the hover element!

peace
n8wandler at 03:47AM, 2011/06/09.
soroush
very nice idea!
Can i use this slide menu verticaly?
If i can,please help me. I don't know javascript but expert in php:D
soroush at 01:01PM, 2011/06/17.
ANI
can we implement this script for image sliding up and the hiden content coming on click
ANI at 08:41PM, 2011/06/17.
MyNameIs
showHideContent(false,1);

Doesn't work :-(
MyNameIs at 08:45AM, 2011/06/19.
Admin comment
DHTMLGoodies
showHideContent(false,1); works in the demo.

It's important that you have that line near the end of your page. Example: on the line above , especially if you have a lot of <table> tags on your page.
DHTMLGoodies at 05:05AM, 2011/06/20.
Tennar Sanal Hayat Teknolojisi
i tried to use this on my http://www.ziza.net/tr/mantar/ page but i couldnt success
Tennar Sanal Hayat Teknolojisi at 05:49AM, 2011/06/20.
Admin comment
DHTMLGoodies
Tennar,

I cannot find that you are using this script on that page.
DHTMLGoodies at 09:49AM, 2011/06/20.
LP
Hi, I need to be able to change the text inside dhtmlgoodies_question on click - how do I do this? Sorry new to javacript! Thanks
LP at 07:07PM, 2011/07/20.
Lennart
Hi,

i would like to know, what I should change to have a inside-slide in a slide.
My Problem is, that the height of the slide don't change if I touch the inside-slide.
Do you have a quick answer for me?
Thank you very much!
Lennart at 02:16PM, 2011/07/22.
Segio
Hi! Thanx for this script. Is great!
I have a question:

I donĀ“t want to show the first item or any item. I want to see every one hidden at first. How can I do that? I tried this:

showHideContent(false,0);

but the script stops working.
thanks!
Segio at 12:59PM, 2011/08/02.
Daryl
Hey, thanks for the amazing script.

Wondered if you could kindly help solve my problem. I have a link within my question div to an external page. So when the link is clicked the answer box starts to slide down just before the page changes.

How can i fix this?

Thanks, Daryl
Daryl at 07:39AM, 2011/08/03.
Dominic
Hey Daryl,

Thank you for this code! I'm trying to incorporate it into a Tumblr page, but it seems that when I create an HTML blog entry it automatically converts DIV tags to P. Can this code work or be adapted by using P class="dhtmlgoodies_question" instead of DIV?

Thanks in advance for any insight on this! :)

Cheers,

Dominic
Dominic at 11:24AM, 2011/08/10.
LadyFuzzy
Hi, I love the script. It works perfectly. But I have a question..

" is there anyway to change the color of those blue boxes.. say to dark red or something?"

My website is black,Maroon & Gold and I was hoping to change the color to something similar to that.. The BLUE looks nice and all it just doesn't match my website color scheme. Any advice is helpful. Thanks. PS. I'm not too familiar with all this I use Dream weaver to edit most things..
LadyFuzzy at 05:05AM, 2011/08/11.
kaspr
The code:

<script type="text/javascript">
showHideContent(false,1);
</script>

Doesn't work on me. It stops the whole script.
But the code:

<script type="text/javascript">
initShowHideDivs();
showHideContent(false,1);
</script>

Does work. But, whenever a page loads, it opens the content but then it closes again after the page loads 100%. Do you know what is causing to happen?

Please email me if needed. I really need this to be fixed as soon as possible. Thank you for your great script.
kaspr at 12:30AM, 2011/08/17.
sureash
Very Nice Script.. i used this script in my blog..
Click here
http://adari69.blogspot.com/p/news_3437.html

How to increase the sliding speed
sureash at 12:41AM, 2011/08/27.
Requiem Inori
So I have been using this code for a long time now, and I always loved how it worked! Recently, though, I have tried working on a project where another area is using this code (albeit with different widths and setup) for an affiliate section.

The first area that I used the original code in was for our sliding content on the left side area of the site, which was perfect for hiding cluttering information like news or introductory (it is an area which uses 250pixels in width). The second area was going to be the affiliate area,which uses 699 pixels in width) and so I had to copy the first code into another location, rename the title areas so that they were not the same as the ones in the first code in hopes that it would not cause a conflicting issue between them.

However, a confliction still occurred. The area with the affiliates slides, but the area with the side navigation no longer slides.

Apparently you cannot have two versions of the code on the same page, even if the parts are renamed and the width designated is different.

I have worked really hard trying to figure out how to fix this and have come up with no answers. I want to keep the first area the same, since it is fine, but I want to try and get a simple content slider that works the same way for the second area that the affilate place is using.

A friend and I have tried to just have the two areas use the same code setup, but because one area needs 250 pixels, and the other needs 699 pixels, in width... the outcome is either that one area is cut short, or the other area is spaced out.

http://knightoffate.proboards.com

The two places using it are listed below.
Left side navigational areas: Introductory Synopsis, News areas, Soundtrack area.

Affiliate Box: Affiliate box and content.

I posted this up in the proboard area as well, colour coding the areas for better view.
http://support.proboards.com/index.cgi?action=display&board=coderequests&thread=401538
Requiem Inori at 05:51PM, 2011/10/06.
Douglas Bento
Hello! I have read your post and it is exactly what I was looking for. I used the script below and it worked well. The only problem is that it isn't hiding back the informations. What should I change in the code to hide back the dates when I click on the words, please?
_________________________________
<script type="text/javascript">
function showMore(id) {
document.getElementById(id).style.display='';
}
</script>
<a href="#" onclick="showMore('news1');return false">Read more</a>
<div id="news1" style="display:none">
More text<br>
More text<br>
More text<br>
More text<br>
</div>
________________________________

Thanks in advance.
Douglas Bento at 06:26AM, 2011/11/09.
luis gustavo
if I want to use FADE + SLIDE, how should I do?
luis gustavo at 10:24PM, 2011/11/24.
Whichrtmej
Hi, I think this is a great script and it works well on my site. I do have one question I hope I can get help with. I have it setup so when some one clicks on "Read More..." the divs expand and show my content. When you click on "Read More..." again it shrinks the divs. My question is where and how can do I insert code so when you click "Read More..." the box expands and the "Read More..." changes to "Read Less...". And when you click on "Read Less..." the divs collapse and "Read Less" changes to "Read More...".

Hopefully this is understandable. Thanks in advance for you help.
Whichrtmej at 03:00PM, 2011/11/27.
Nicolas
Hello, thank you for this script. I like to make a change on the script but I can not do it.
I put a background image in the class. DivQuestion and I would put another background image when the user hovers over the block divQuestion and also when the block is open. Vou can sm'aider please. Thank you in advance.
Nicolas at 03:11AM, 2011/12/22.
Nicolas
<a href="#comment1216">Nicolas wrote:</a>
Hello, thank you for this script. I like to make a change on the script but I can not do it.
I put a background image in the class. DivQuestion and I would put another background image when the user hovers over the block divQuestion and also when the block is open. Can you help me please. Thank you in advance.


Nicolas at 03:12AM, 2011/12/22.
Joel
Thanks!! it's a great piece!!!! really so easy to follow

I was trying to hide entire block of questions and answers but wasn't successful so i used the idea from your comments

<script type="text/javascript">
function showMore(id) {
document.getElementById(id).style.display='';
}
</script>
<a href="#" onclick="showMore('news1');return false">Read more</a>
<div id="news1" style="display:none">
<div class="dhtmlgoodies_question">
here goes the Q&A...

</div</div>


Thanks again for this awesome post
Joel at 03:43PM, 2012/01/04.
whichrtmej
Hi, I am trying to incorporate this script into my site. I have added all the script to the Head section and this is what I have for the body.

<body>
<div id="Readmore" class="dhtmlgoodies_readMore">Read More...</div>
<div class="dhtmlgoodies_extension">
<div>
<p> And a whole bunch of text.... </p>
</div>
</div>
</body>

When I run the code and I click on "Read More" my text expands and when I click on "Read More" again my text retracts. Everything is working as it should.

What I want is to change "Read More" to "Read Less" when it is clicked and my text expands and change "Read Less" back to "Read More" when my text retracts.

Any help would be appreciated.

Thanks Whichrmejt
whichrtmej at 10:21PM, 2012/01/07.
Ryley Wade
Try as I might I cannot seem to get this working in any version of IE. If anyone can suggest something I would really appreciate it. The slide function just doesn't want to work.
Ryley Wade at 05:42PM, 2012/01/14.
Gasten Sauzande
How can i transfer this code to a button? I am starting at javascript so u'll need to explain with details. Thanks.
Gasten Sauzande at 08:55PM, 2012/01/17.
chuck
this javascript works decent in firefox although i'm having major issues integrating it into my website http://development.cornerofgrey-street.com/sbd/sbd_dmb_v4-A.html

sort of works in FF, fails to work in chrome and IE. can someone help me out here?
chuck at 09:20PM, 2012/01/20.
jack
I have a question.. how do I modify the answere height for each question. Thank you! It works perfect!
jack at 03:42PM, 2012/02/17.
engonge
It works in chrome...thank you so much....
engonge at 04:25AM, 2012/02/27.
Alex
Is there a way to link to them from another page, so that the question you linked to is open when the page gets opened.
Cheers
Alex at 09:10AM, 2012/02/29.
Giovanni
Hello, it's wonderful script and many thanks for it, BUT, when I have let's say 4 200x200px divs hidden and slide them down, when I click on another one, page's scrolling bar is set to the top ... can I avoid that "bug" please?
Giovanni at 02:03PM, 2012/03/12.
Giovanni
<a href="#comment1422">Giovanni wrote:</a>
Hello, it's wonderful script and many thanks for it, BUT, when I have let's say 4 200x200px divs hidden and slide them down, when I click on another one, page's scrolling bar is set to the top ... can I avoid that "bug" please?


I solved it ... put on end of showHideContent(e,inputId) function "return false;" and that's it :)
Giovanni at 03:36PM, 2012/03/12.
Carl
I don't want the active slide to close when I click on it. How do I solve that?
Carl at 03:51AM, 2012/04/03.
meena
hey hi, i just want to ask that what shud i do if i want to close or hide the answer div on click outside the question div also.. please help me
meena at 04:23AM, 2012/05/31.
tony
iframes!

I have tried this code and am having fun with it.

However, when in an iframe and looking at a long 'answer' div then clicking on a 'queston' div with a much shorter answer, the parent page does not scroll back up and you are looking at empty space (unless you sroll back up manually).

Any way to fix this so it will scroll automatically? ie, it needs a second, 'scroll to top' function, for the showhide onclick event or something similar.

tony at 12:10AM, 2012/07/04.
tony
Being able to click in the 'answer' div to close it would also be great.
tony at 05:12AM, 2012/07/04.
Igor
Great Code. No complaints. How about making it fading in/out simultaneously with sliding out/in? Any ideas?
Igor at 05:40PM, 2012/08/31.
sibghatullah
Thanks . this is very useful.
sibghatullah at 01:46AM, 2012/09/03.
Naz
<a href="#comment837">kaspr wrote:</a>
The code:

<script type="text/javascript">
showHideContent(false,1);
</script>

Doesn't work on me. It stops the whole script.
But the code:

<script type="text/javascript">
initShowHideDivs();
showHideContent(false,1);
</script>

Does work. But, whenever a page loads, it opens the content but then it closes again after the page loads 100%. Do you know what is causing to happen?

Please email me if needed. I really need this to be fixed as soon as possible. Thank you for your great script.


the error is because you initialize it twice in the "window.onload = initShowHideDivs;" and "initShowHideDivs();"..

So u can simply comment the "window.onload = initShowHideDivs;" and initialize it before showHideContent(false,1);
Naz at 01:41AM, 2012/09/10.
Mey
Hello,

I was looking for a Show/Hide text script. yesterday all day I searched and tried some of them but nothing worked until I saw your simple code. I am just a simple html user, don't know anything about script writing etc. Anyway I tried your below example and it is perfectly worked and I really like it. Thanks for sharing with us, My only concern is I need FADE EFFECT with toggle, any idea?

<style type="text/css">
.expandedNode div{
display: block;
margin-left:20px;
}
.collapsedNode div{
display:none;
}
</style>
<div class="collapsedNode" style="cursor:pointer" href="#" onclick="this.className = this.className=='collapsedNode' ? 'expandedNode' : 'collapsedNode'">Main node
<div>Content to expand<br>Content to expand</div>
</div>
<div class="collapsedNode" style="cursor:pointer" href="#" onclick="this.className = this.className=='collapsedNode' ? 'expandedNode' : 'collapsedNode'">Another Main node
<div>More Content to expand<br>More Content to expand</div>
</div>
Mey at 05:01AM, 2012/09/11.
Mey
anyway I used your main code and it worked very well as well and using fade effect too.. great work. thanks
Mey at 08:13AM, 2012/09/11.
Jon Mustafa
Thanks for this script. It works brilliantly, one thing I do wish to change though, and that is the questions and answers spacing, at the moment they is 0 point spacing betwen each question/answer. How can I make the spacing more for each question/answer?

Again many thanks for a great script

Jon Mustafa
Jon Mustafa at 01:35PM, 2012/09/27.
Gopi
<a href="#comment111">Nout wrote:</a>
I cannot manage to automatically show some tabs on loading the page.

Where exactly do I place the following code?


showHideContent(false,1); // Automatically expand first item


Gopi at 01:05AM, 2012/12/19.
Brandon
This is an excellent code! Thanks so much!
Brandon at 08:27PM, 2013/10/19.
elly
Hello,
I want to ask this:
1.My questions are are not in english but in greek. Whay shoyld I change so that I can see them before put it on browser. In the browser it work fine but before that it shows me strange letters.
I'm not a programmer.. Please some help
2. Where should I put the
<script type="text/javascript">
showHideContent(false,1);
</script>
3.How can I put a background foto for the answers.
Thank you .
elly at 08:33AM, 2014/05/20.
Carlo
GREAT SCRIPT!!! :-)

BUT
showHideContent(false,1);
STILL DOESNT WORK even put at the end of the page

Check it
www.isg-uni-mainz.de/kursangebot_online.php

Thanks for answering
Carlo at 07:14AM, 2015/03/26.
victoria
I am so happy I found this code. Thank you very much.

I'd love to use this on a multi-level vertical Wordpress navigation. Is it possible to use this with child and parent elements instead of two independent divs?

If you have any tips on how to modify this script so that it can work with multi-level vertical menus I would greatly appreciate it.

Thank you
victoria at 04:55PM, 2015/06/02.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2016 dhtmlgoodies.com