Are you trying to find a way to hide and show your content? The demo below shows a simple yet elegant way of toggling your content and toggling the control text via Javascript and styling.
We will cover how to implement this example later on in the tutorial but first let's start with a simple example.
Here is the sample HTML and Javascript code:
<script language="javascript"> function toggle() { var ele = document.getElementById("toggleText"); var text = document.getElementById("displayText"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "show"; } else { ele.style.display = "block"; text.innerHTML = "hide"; } } </script> <a id="displayText" href="javascript:toggle();">show</a> <== click Here <div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>
By default, the peek-a-boo
text is loaded when the page loads but the display
attribute for the div that the content resides in is set to none
so it is not visible to the visitor. When the link is clicked, the toggle()
JavaScript functions executes and checks the value of the display style for the div that contains the content that we want to toggle.
If the display style is none
, the function will:
- Set the display style to
block
- This is executed in theelse
block of the function. The inner HTML content of a DOM element with ablock
display setting will be visible unless it is furthered controlled by CSS styling. - Change the link text to
hide
- The inner HTML of the link text, which in this case is justshow
, is replaced with thehide
text.
If the display style is block
, the function will:
- Set the display style to
none
- This is executed in theif
block of the function. The inner HTML content of a DOM element with thenone
display setting will not be visible for the viewer. - Change the link text to
show
- The inner HTML of the link text, which in this case is justhide
, is replaced with theshow
text.
Here is a more reusable and flexible toggle
function that takes 2 parameters: one for the div to hide/show and a second parameter for the div that contains the link text to be switched.
<script language="javascript"> function toggle(showHideDiv, switchTextDiv) { var ele = document.getElementById(showHideDiv); var text = document.getElementById(switchTextDiv); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "show"; } else { ele.style.display = "block"; text.innerHTML = "hide"; } } </script>
If you spice up this demo with some extra CSS styling, this can look like a nice little dialog box.
Here is the toogle2 JavaScript function:
function toggle2(showHideDiv, switchTextDiv) { var ele = document.getElementById(showHideDiv); var text = document.getElementById(switchTextDiv); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "restore"; } else { ele.style.display = "block"; text.innerHTML = "collapse"; } }
As requested, here is an example of a JavaScript function that toggles multiple elements simultaneously. You can either toggle each DIV individually or use the button to toggle all 3 regardless of which toggle mode they are in.
This demo uses the toggle2 function as previously demonstrated and a new function called toggle3. I apologize for not being very creative on the function names. Anyway, here is the JavaScript code for toggle3:
1 2 3 4 5 6 7 8 9 10 |
function toggle3(contentDiv, controlDiv) { if (contentDiv.constructor == Array) { for(i=0; i < contentDiv.length; i++) { toggle2(contentDiv[i], controlDiv[i]); } } else { toggle2(contentDiv, controlDiv); } } |
Line 2 of the function checks to see if the first argument is an array or not. If it is an array, it will also assume that the second argument is an array as well. If it is an array, the script will loop through each element and execute toggle2 with each pair of elements in the arrays. Please note that this function also assumes that both arrays are in the same order such that contentDiv[3] and controlDiv[3] are a pair that refer to the same toggle element.
If the first argument is not an array, we will just pass the arguments as is to toggle2.
Here is the HTML code for the demo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<table> <tr> <td> <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"> <a id="myHeader1" href="javascript:toggle2('myContent1','myHeader1');" >collapse</a> </div> <div id="myContent1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div> </td> <td> <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"> <a id="myHeader2" href="javascript:toggle2('myContent2','myHeader2');" >collapse</a> </div> <div id="myContent2" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #2</div </td> <td> <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"> <a id="myHeader3" href="javascript:toggle2('myContent3', 'myHeader3');" >collapse</a> </div> <div id="myContent3" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #3</div </td> </tr> </table> <input type="button" value="Press me to toggle all 3 DIVs" onClick="toggle3(['myContent1', 'myContent2', 'myContent3'], ['myHeader1', 'myHeader2', 'myHeader3']);"> |
All the excitement is jammed into line 23 where we call the toggle3 function and pass over 2 arrays: one array containing all the content div ids and another array containing the header div ids. The rest is history =)
This demo was written in response to a request. We start off with some hidden divs and each click of the button will reveal one div at a time. When we have revealed all the divs, the button will disappear.
Here is the HTML code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table> <tr> <td style="width: 150px;"> <div id="box1" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">First</div> </td> <td style="width: 150px;"> <div id="box2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Second</div </td> <td style="width: 150px;"> <div id="box3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Third</div </td> </tr> </table> <input id="toggleButton" type="button" value="Show me the money!" onclick="counter++; toggle4('box');"> |
The HTML code contains 3 hidden divs to start off with. The button will launch the toggle4 JavaScript function and pass over the prefix of the div IDs. Each div id is named with the prefix box and a number following the name. For example, box1, box2, and box3. This is important for our JavaScript function. In addition, it increments the counter by 1 each time. This variable is initialized in our function.
Here is the JavaScript code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var counter = 0; var numBoxes = 3; function toggle4(showHideDiv) { var ele = document.getElementById(showHideDiv + counter); if(ele.style.display == "block") { ele.style.display = "none"; } else { ele.style.display = "block"; } if(counter == numBoxes) { document.getElementById("toggleButton").style.display = "none"; } } |
Lines 1 and 2 will initialize two very important variables for us:
- counter - This variable will help us determine which box we will need to toggle.
- numBoxes - This variable represents the total number of boxes. This is important for us to know when we should hide the button.
Line 4 accesses the div we will need to toggle based on the name that is passed over as the argument and the counter. When these 2 values are concatenated, we get the name of the div we will need to toggle.
Lines 5-10 tells the same old story as before for toggling the content.
Lines 11-13 tests to see if we have reached our maximum number of divs to toggle. If so, it will access the toggle button and set the display attribute to none.
By popular demand, here is a demo that uses images instead of the Expand/Collapse text.
Here is the HTML code:
1 2 3 4 5 |
<div id="headerDivImg"> <div id="titleTextImg">Let's use images!</div> <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="/wp-includes/images/minus.png"></a> </div> <div id="contentDivImg" style="display: block;">This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.</div> |
Everything is pretty much the same as before except the image tag is used instead of the Expand/Collapse text.
Here is the JavaScript code:
1 2 3 4 5 6 7 8 9 10 11 12 |
function toggle5(showHideDiv, switchImgTag) { var ele = document.getElementById(showHideDiv); var imageEle = document.getElementById(switchImgTag); if(ele.style.display == "block") { ele.style.display = "none"; imageEle.innerHTML = '<img src="/wp-includes/images/plus.png">'; } else { ele.style.display = "block"; imageEle.innerHTML = '<img src="/wp-includes/images/minus.png">'; } } |
The toggle5 JavaScript function is pretty much the same as the rest of the toggle functions except that it switches the img tags instead of text.
Here is a new demo in response to a request where only one div is displayed at any one time.
Here is the plain HTML code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<table> <tr> <td> <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"> <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >collapse</a> </div> <div name="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div> </td> <td> <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"> <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >collapse</a> </div> <div name="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div> </td> <td> <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"> <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >collapse</a> </div> <div name="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div> </td> </tr> </table> |
Clicking on the links will execute the showonlyone JavaScript function and pass on the name of the div id.
Here is the showonlyone JavaScript code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function showonlyone(thechosenone) { var newboxes = document.getElementsByTagName("div"); for(var x=0; x<newboxes.length; x++) { name = newboxes[x].getAttribute("name"); if (name == 'newboxes') { if (newboxes[x].id == thechosenone) { newboxes[x].style.display = 'block'; } else { newboxes[x].style.display = 'none'; } } } } |
Thanks to Justin and Ulysses for helping out with the IE6 bug that was there =)
Line 2 will find all our divs with the newboxes name attribute and place them in an array. Lines 3-10 will loop through these divs and check to see if the id of the div matches the id that was passed over to the function. If there is a match, the function will set the display attribute to block which will make the div and all its contents visible. If the id does not match, the display attribute will be set to none which will make the div and all its contents hidden.
If there any other demos/tutorials that you would like to see on this subject, please feel free to comment below and I will try my best to implement it.
Note: If you have an issue with your code, please give me a URL to work with. It's extremely difficult for me to help if I cannot actually see the code.
UPDATE: Since this post has been pretty popular, I felt is was my duty to update it newer methods that was not available at the time of writing this blog. Nowadays, it is much easier to use jQuery to hide or show content.
If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!
what if i need two links.. how to do that
Hi Joe,
If you have 2 divs that you want to hide, you just need to have different ids for each div. Here is an example:
for two toggle. need two javascript? cos elementID is not in array
Hi ayesay,
As per your request, I have created a third demo here. Please check it out. It handles multiple toggle elements!
I hope this information helps.
Thanks for your comment/question.
in the first example of show/hide text how would one make the hidden text smaller? That “peek a boo” is pretty large
Hi Matt,
If you notice the “peek-a-boo” text is inside some “h1″ tags. You can simply remove the h1 open and closing tags and it should appear as normal text. h1-h6 tags are usually reserved for headings with h1 being the largest font size and h6 being the smallest.
Allen
How could I apply this to: …
what I want on the page I’m making up is:
It has some links on the left,
to the right of that is space for an image to display,
further to the right is an inline frame.
What I want is – when the link is clicked -
it opens the page in the inline frame ,
but also opens an image in the area just to the right
of the links.
so it’s a combination link function – open an image to the right of the text link – and act as a normal link to open the page in th einline frame.
possible ?
thanks
hi,
very usefull!!
what if i need one link, to toggle 5 div’s, one div at a time.
1 click on the link, display the first hidden div,
click the link again, display the second div,
and so on till all 5 divs are displayed.
when the fifth div is displayed, i want the link to disappear…
thanks!
Hi IDB,
I have created a demo in response to your request. I hope it helps =)
Great! Exactly what I was looking for!!! Thanks a million!
Works like a charm. Thanks!!!
Hi all,
Reloading the whole page calls the content back by default. What if I don´t need the content status (none or block) to be changed by reloading the page? Would be possible?
Thanks
Hi Charlie,
This is certainly possible via cookies which can remember a user’s settings. I have a demo based on cookies:
http://www.randomsnippets.com/2008/04/14/how-to-dynamically-add-content-to-a-div-via-javascript/
I will try to include a demo here which involves cookies soon.
Hi Knix,
It would be very useful for me. Thanks in advance.
Hi, I’m looking for a script that only shows one div at a time…
i.e. three divs; it starts with the first div shown, when a link is clicked the second div shows and all others are hidden, when another link is clicked the third div shows but no others. Any ideas? Thanks x
Hi,
I am using an onclick on an input text box to fire a toggle on a div that is hidden via display:none. The toggle works but in a strange way. The user has to click twice (instead of once) on the input field in order for the div to display. I have search far and wide without any conclusions. I have posted my test code below if you can help.
Thanks
test1
function disInvProducts()
{
if (InvProducts.style.display == “none”)
{
InvProducts.style.display = “block”;
}
else
{
InvProducts.style.display = “none”;
}
}
#InvProducts { background-color: #FF33CC;
position: absolute;
width: 200px;
height: 300px;
display: none; }
.DetailInput1 { background-color: transparent;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt; }
Products
Hi Dave,
Can you please include the HTML as well? I would like to see which input field you are referring to in this case.
Hey Knix,
I actually solved the issue a few moments ago. All I did was change the toggle code around. It was nothing but logic.
Old Code:
function disInvProducts()
{
if (InvProducts.style.display == “none”)
{
InvProducts.style.display = “block”;
}
else
{
InvProducts.style.display = “none”;
}
}
New Code:
function disInvProducts()
{
if (InvProducts.style.display == “block”)
{
InvProducts.style.display = “none”;
}
else
{
InvProducts.style.display = “block”;
}
}
Thanks for the help though.
Thanks for this helpful script. I have it working nicely. However, I want to customize it a little more. I’m using “function toggle2″ and would like to swap out your text for a “plus” and “minus” icon. For now I’m using text for the “+” and “-” signs but I would like to use images. What would the DOM syntax be for that? I’m not well versed in JavaScript so forgive my ignorance.
Here’s what I have so far:
…
text.innerHTML = ” + “;
…
I was hoping it was something simple such as:
…
document.getElementById(‘imageID’).src = ‘icons_plus.gif’;
…
but that doesn’t work. Do you have a solution?
Thanks in advance!
- Fernando
Hi! I have a question. Your code works like magic! =) I’m just wondering how would I go about customizing the code to toggle images (ex. plus.gif and minus.gif) instead of texts (i.e. Collapse/Expand)? Thanks!
I have not tested it but you should be able to place your img tags in the innerHTML instead of the collapse/expand texts. Try this:
Hi! Got this site from a friend while brainstorming over a problem for a webpage, maybe you can help me out?
The problem I have is that 2 div blocks is in use, where one contains (named “contentleft”) a picture where 3 seperate hotspots is active, each of these hotspots are links with a mouseover funcion and are built up with polygons. The problem is that when click at the links, they open in a new tab or a new browserwindow, thats not what should happend.
So what should happend? Well when you click at one of the hotspots the link should activate the page its linked to in the other div block, called “contentright”.
The hotspots dont have any “names”, which would make it easier honestly, if they had, and the div blocks, well they have “names” but you cant target them. Using a sepererate css document to create the div blocks.
No tables or iframes is wanted in this particular case.
Hope you can help, thanks in advanced!
Best regards Hellcat
Hi Hellcat,
It sounds to me like you want to load html pages dynamically into your “contentright” div based on where a user clicks on your hotspots.
If this is the case, you will need to use AJAX. I highly recommend using the jQuery library:
http://jquery.com/
It is very lightweight and has tons of nice plugins.
If you would like to see a demo as to how this will work, please let me know and I will come up with a demo post on this topic.
BTW, I noticed you tried posting again with the code. Try placing your code between these tags:
<code>
actual code…
</code>
Thanks for the great examples above! They are very helpful in creating some really cool websites. When I first came across this tutorial I couldn’t think of a way to use it for any of the projects I was working on. Finally, I was cleaning out my bookmarks and revisited your page. I was excited to see the new additions and that got me thinking about other ways to use the script. I thought that it would be nice to have a series of ‘hidden’ divs, and only one can be opened at a time. Basically, if you have a div ‘Expanded’ and click on another div, the first would close, and the selected would open. It would be possible to close all the divs, but only have one opened at a time. I tried messing with the script to produce this effect, but I’m not really sure what I’m doing due to lack of any real knowledge in javascript.
Thanks very much for your great insight and taking the time to help everyone out, it’s very much appreciated.
Have a great one!
Hi Abdoanmes,
Thanks for the comments! =)
Please check out the latest demo. It addresses the issue you are facing.
That’s really awesome and exactly what I was looking for. I played with it a bit and I changed the initial state of all the divs to ‘none’ so that the a visitor would have to select which div would be opened first. Now in this demo, once a div is turned on, all the divs cannot be collapsed again when you select the collapse button above the currently opened div. If I were to add another ‘else’ statement to the function, would that be the right logic to create the effect I’m looking to achieve? Or does that just throw a wrench into the works?
Great info here, thanks!
Hi Abdoanmes,
I do not think adding another else statement in this function will achieve what you are looking for. It will require some modification of the function but I do not have much time to work on it right now. I have a lot of catch up work to do because I was away the last couple days. Please let me know if you are able to modify the function.
Hi, I’m trying to employ the technique in the last demo, but I’m having a little trouble. The div layers I’m trying to show or hide contain some big tables with image thumbnails, and the toggles seem to have no effect.
The page’s code is pretty long, but can be found at nicholemaury.com/images.html
Thanks for your help!
Nevermind, I seem to have fixed it!
I just noticed that the last demo seems to work in all browsers except Internet Explorer. Why would that be?
Hi Justin,
Thanks for letting me know. I just found out that IE does not support getElementsByName which would throw a monkey wrench in this. I will find a new way to do this but will need some time.
This is the code I have been seacring for but I need it to work for IE as well as firefox. Is there anyway to modify it for getElementsByID instead of name? I really need this to finish my website. If any one has any clues or suggestions that would be great.
function getElementsByName_iefix(tag, name) {
var elem = document.getElementsByTagName(tag);
var arr = new Array();
for(i = 0,iarr = 0; i < elem.length; i++) {
att = elem[i].getAttribute(“name”);
if(att == name) {
arr[iarr] = elem[i];
iarr++;
}
}
return arr;
}
Hi Jon,
Could you give a couple more details about how this new code works? Do we only need to replace the areas that read “name” or are there other changes?
Hi, just following up on Justin’s question – wondering where exactly this new code needs to be integrated within the previous? Also if it does work, why it hasn’t been added to the code on this page already? Seems to function fine in Firefox and Safari just IE causing the dramas…. as per usual. Thanks for your time and efforts.
Found this code that works fine across FF3, Safari3, and IE7.
function hide_elements(elementids){
var elems=new Array();
elems=elementids.split(‘,’);
var len = elems.length;
for(i=0;i<len;i++){
element = document.getElementById(elems[i]);
element.style.display = ‘none’;
};
};
function show_elements(elementids){
var elems=new Array();
elems=elementids.split(‘,’);
var len = elems.length;
for(i=0;i<len;i++){
element = document.getElementById(elems[i]);
element.style.display = ‘block’;
};
};
Hi,
Thanks for following up on this, does this work in much the same way, one just needs to replace ‘elems’ with the name of our choice? Or do we need to replace ‘element’ as well?
OK, I figured just to put my id tags in the () separated by commas, but I can’t get this to work either.
Here’s a solution that worked great for me:
function showonlyone(thechosenone) {
var example = document.getElementsByTagName(“div”);
for(var x=0; x<example.length; x++) {
name = example[x].getAttribute(“name”);
if (name == ‘example’) {
if (example[x].id == thechosenone) {
example[x].style.display = ‘block’;
}
else {
example[x].style.display = ‘none’;
}
}
}
}
hi, nice demo, just a small modificaion i need as i don’t know javascript but will be thankful if this can be implemented.
1) Same scenario to hide and show of div, div based on different locations but with same name, means all closes or all expands.
2)there is a cookie that counts how many times visitor has navigated through( pages).
3)javascript checks cookie value like 1,2,3.
4) One condition if cookie value is 1 or 2 hide div, else show.
5) At first div’s are visible but when cookie records value div’s can be hide based on vlue, there should be flexibility to select value.
Kindly let me know the code, if it can be pasted with an working example.
Hello.
Thanks for all the hide/show snippets !
But the one with 3 divs where only 1 shows at the time is broke or something.
cause when i copy/paste the code and try it on my comp the Div #1 get’s stuck and the links don’w work any more. :
Could you please mail me a working source or something ?
Thanks on advance
// Nilsen
THank you. You’re a life saver!
Hey…I finally figured out how to do the toggle show/hide demo up near the top but I have a problem…I need to make a table-like set of data for a jobbank. I have created a table with CSS (NO TABLES YEAY!). But the problem is that the javascript I gleaned from here forces me to create an additional div tag (ex: showTextDiv, showTextDiv1, showTextDiv2, etc)…
The problem is that this is a job bank which will be changing regularly so keeping track of which row has which div will get really confusing really fast.
Finally my question – how would I structure the javascript to look at the divs individually so that I can keep the “showTextDiv etc” like it is yet still have multiple instances on screen and functioning correctly? here is the page for reference (please note that there are 3 separate divs making the 3 rows work correctly…one main div and an alternate div to change the row color):
http://www.acmanet.org/index-test.cfm
SORRY! My fault, here’s the right link:
http://www.acmanet.org/jobbank/index-test.cfm
Thanks for the excellent toggle scripts using images. I am very new to javascript and was just wondering how you would combine this effect with the show only one effect together?
Thanks again
Hi,
The “showonlyone” is exactly what I was looking for, but there is that problem with IE.
Is there anyway to add a variation for IE?
using: getElementsByID ?
Thank you.
Jana
Hi again,
I found here the script I needed, – the showonlyone – but My website is having links problems at opera and internet explorer. ((of showonlyone)) Could you please help with a code that includes commands that these browsers can recognize??
thank you.
Hi Jana,
The function has been updated to work in IE6 and IE7. Thanks to Justin and Ulysses.
Thanks so much for this! It really helped alot!
ooohhh man this was a great tutorial! thanks for that, i really didnt feel like messing with divs today!
Hi,
you have made some great hide div’s thingies :-). I especially like the one with the plus and minus sign. I am using it here: http://www.dtails.com/PublishedService?pageID=9&itemcode=Far!
Can I ask – how can I make the one with the plus and minus sign start the opposite way of what it does now? Meaning, how can I hide the content on load, instead of it being open? Just like the text-link one, with the “Peek-a Boo” in the div. That one is closed on loading
Thanks a lot for your great work!
Jens
Hi Jens,
This should be pretty simple. Just start off with div content hidden instead of being visible and keep everything else the same.
Thank you so much for your help Knix. Worked perfectly :-)!
Great stuff!
Many thanks!
I’m looking for 3 or more div’s to be opened or closed but only one at the time.
There are three ways in which such a thing can work.
1. Hide the headers of the ones that are not opened. (Favorit)
2. Opening a div will close the one that was open. (Not so nice)
3. You’ll have to close the div, before you can open another. (Okay)
(English is not my native language, so I do hope you understand what I mean.)
Pieter
Hi there,
i was hoping if these toggle snippets are compatible with all browsers? and if so, are there any bugs or errors you have encountered with using any?
thanks,
sincerely Christina
The last one doesnot works in IE 6
please help me.
Hi amit,
The function has been updated to work in IE6 and IE7. Thanks to Justin and Ulysses.
Thank you very much for these scripts, they are working great for me.
I am using the image toggle to open and close multiple divs on one page. Along with the image, now people want the headings to be clickable as well so users can click the image or the heading to open the div.
The heading name needs to stay the same (not change to expand or collapse, like the examples), so that’s why I’m not sure how to tackle this one. Also, I’m pretty new to javascript.
Any help with this problem would be most appreciated.
Thanks.
RC
Hi there!
I have recently adapted and modified the second demo that you listed at the top of this page, (e.g. click here: Peek-a-boo!)
I was wondering if there is a way of modifying the CSS code so the toggling works from horizontal point instead of toggling vertically downwards?
It would be much appreciated from someone who has knowledge
on togglings!
regards,
Christina, South Australia
Hey, you make this very easy to understand which is great. However, I have one important variable I’m wondering if you can solve.
I’m working on this site: http://raiseupart.com/Cmag/index.php
You’ll notice that if you click ISSUES, another list of links pops out. That was easy. But, now I need to be able to click on the years that popped out and have another list pop-out.
I tried changing ids and using the same code, but it seems to be an either/or situation, I guess because that’s what ‘toggle’ implies?
Thank you!
Hi,
Thank you for posting so many scripts! My problem is this: I want the links to show on page load, but I don’t want the text to show until after I have clicked the link or button to show the text. Can you create (or point out the script if it is already on this page) a script that does this?
Thank you!
Love the scripts, they were very helpful.
the toggle3 function calls on your toggle2 function but you don’t have a function named “toggle2″, both of the first functions are just called toggle. I renamed the function needed to “toggle2″ and it now works. Thought you might like to know this.
Thanks for the heads up Tammie.
I have added the toggle2 JavaScript function code.
Hello,
The last demo (to display only one DIV at a time) is exactly what I’m looking for, but it’s not working on Internet Explorer (version 7 at least).
I saw some comments about a fix, but it doesn’t seem to be working either.
Do you have a solution to have this demo work on IE?
Thanks a lot,
Luke
Hi Luke,
The function has been edited to work in IE6 and IE7. Thanks to Justin and Ulysses.
Thanks a lot guys! I’ve just tried it and it works perfectly fine under IE7!
Great function!
To make the SHOWONLYONE code work in both FireFox & Internet Explorer, I have replaced the content of the showonlyone.js file with the following. Works really well.
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName(“div”);
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute(“name”);
if (name == ‘newboxes’) {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = ‘block’;
}
else {
newboxes[x].style.display = ‘none’;
}
}
}
}
Thanks Ulysses! I have replaced the old function with the one you have provided.
For you information:
ShowOnlyOne works with IE5.01, IE 5.5, IE 6, Opera and Safari.
Great!
(But ‘name’ is not allowed as attribute for a ‘div’.)
Hi Knix,
The credit should go to: Justin
Justin reply on April 2nd, 2009 9:04 pm:
It is that entry that helped me resolve the IE issue.
Thanks anyway.
Ulysses
This code is exactly what I’ve been looking for. As much as I want to use it, I’m having trouble getting it to work for me. I am clueless about javascript. I’m really good at copying and pasting!
The code I have appears to work, but the image for my toggle button appears between the text instead of beside the text. How can I rectify this? The other thing I cannot figure out is how to add more links. I think you call them links. I have a bunch of FAQ for my website and wanted to list each question with the toggle function which opens up to the answer. I really need someone to paste the whole code for me. Your help would be totally appreciated.
This is the code I have:
<!–
function toggle5(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == “block”) {
ele.style.display = “none”;
imageEle.innerHTML = ”;
}
else {
ele.style.display = “block”;
imageEle.innerHTML = ”;
}
}
Let’s use images!
This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.–>
Hi Joy,
If your code is working but the image is being displayed in the wrong location, you should check the image id and ensure that it is placed inthe correct position.
Please post your URL, so I can look at the source of the page and work out why it is failing to display in the expected position.
Ulysses
Hi Ulysses
Thanks so much for responding. Here’s the url to the code I tried on my page:
http://dejavuapparel.synthasite.com/test4
As you can see the image is stuck between the two text lines.
Can you please also tell me how I can add more of those links?
As I said before.. I’m really really new at this stuff. I’d appreciate a whole code that I can copy.
Once again, thanks so much for your help.
Sorry… it didn’t get the whole code in there. Lemme try again.
<!– function toggle5(showHideDiv, switchImgTag) { var ele = document.getElementById(showHideDiv); var imageEle = document.getElementById(switchImgTag); if(ele.style.display == “block”) { ele.style.display = “none”; imageEle.innerHTML = ”; } else { ele.style.display = “block”; imageEle.innerHTML = ”; } }–> <!– Let’s use images! This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.–>
I can’t figure out how to put the whole code in!!!
<!– function toggle5(showHideDiv, switchImgTag) { var ele = document.getElementById(showHideDiv); var imageEle = document.getElementById(switchImgTag); if(ele.style.display == “block”) { ele.style.display = “none”; imageEle.innerHTML = ‘<!–’; } else { ele.style.display = “block”; imageEle.innerHTML = ‘<!–’; } }–>
<!– Let’s use images! <!– This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.–>
Hi Joy,
Copy your web site URL on which this code is implemented. Then paste it into this message section.
Ulysses
Hi Joy,
Have a look at this page I have setup for you.
http://dejavu.ulysses.co.nz/
It is a working example. Contact me via my website to get more details on what you need to do, etc.
Ulysses
[...] 2008 by rhyker Are you trying to find a way to hide and show your content? Then have a look at this page. It shows a simple yet elegant way of toggling your content and toggling the control text via [...]
Hello,
I am having some trouble, while this is very good code and suits my purpose, Im not proficient in JavaScript so I am getting slightly stuff.
What I am trying to do is…
I have three links as follows: -
XP VISTA MAC
When a user clicks XP a section display the relevant info on XP appears, then when a user clicks VISTA, XP closes and VISTA appears.
However when I click XP, VISTA or MAC in any order, the previous option does not close but the one just clicked open’s.
Is there anyway you can help me or point to what I need to edit and such?
If you could provide me with the coding required, that would be extremely helpfull.
If you are using “ShowOnlyOne” and didn’t make mistakes in copying en editing it. Things should work.
I havent made any mistakes and have only changed what is needed so the relevant info is displayed…
Then there must be a conflict with another javascript or another stylerule.
Is there a way to modify “ShowOnlyOne” so it will validate correct? (name attribute is not allowed with DIVs)
By the way:
I used ShowOnlyOne for a vertical menu (in Dutch).
You can see it at
http://www.debinnenvaart.nl/binnenvaarttaal/index.php
Pieter
don’t want to make the comments list much longer so here a short THANK YOU!
Hi Anthony,
Look at my comment on thread 35 above for the answer to your problem.
The showonlyone() function needs a different set of code to make it work properly on Firefox & Internet Explorer.
Hope this helps.
Ulysses
Knix,
I can’t thank you enough for this series of demos. For SEO and cross-browser-compatibility reasons, I don’t like iframes, and the alternative is terrible in IE, so I’ve been looking for a clean way to display one div at a time depending on which link the user clicks. A lot of other demos I looked at had mountains of cumbersome code with questionable results. Your demo not only gives me exactly what I need, it does it will clean, simple code, and keeps all of the content SEO-friendly
All the Best,
Aaron
I have created a tab system in wordpress using the showonlyone function. It worked perfectly except that I was not able to make the current tab highlighted.
Perhaps, you would be so kind to extend a bit your code to achieve this goal.
I would prefer this solution than the other tabbing systems.
Much less overhead.
Very nice work you have done, many thanks for it.
Hi Kassad,
Unfortunately, the demo that I have here does not really contain any tabs. Perhaps you can paste your html and I can see what I can do.
Knix
Hi Knix,
Well, that is what I have so far…
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
}
a:link, a:active, a:visited {color:#67a063; text-decoration:none; outline:none;}
a:hover{color:#ca7700;}
.tab {
width: 50px;
border: 1px solid silver;
background-color: #dde;
padding: 5px;
float: left;
text-align: center;
}
.newboxes {
position: absolute;
top: 39px;
left: 8px;
width: 174px;
height: 300px;
border: 1px solid silver;
background-color: #fff;
padding: 5px;
display: none;
}
Credits
WordPress Content #1
Archive
WordPress Content #2
Meta
WordPress Content #3
I am sure that you can find a solution to highlight the selected/active tab.
Thank you very much in advance for your help.
Kassad
Hi Kassad,
You can change the class of the chosen tab via JavaScript and have some styling for the chose tab class:
You will then need to define the chosentab and nonchosentab classes via css. Here is a sample:
Please note that this code is not tested but I think you will get the gist of it.
Knix
Hi,
thanks a million for your fantastic job, you made my day.
cheers
Something like that…, except that it deals with the content area not with the tabs.
Thanks immensely for the tutorial. I’ve used this on http://mancinostaylor.com, and they’re very happy with it!
Right now I’m trying to use the “showonlyone”/”newboxes” script to display an art gallery on my site:
http://danale.com/art
Ideally, I’d like all the links (“Commission”, “Digital”, etc.) to be stacked one on top of the other, hiding the thumbnails until someone clicks on them. When someone clicks on, say, “Digital”, I’d like the thumbnails for the art to reveal under the word “Digital”, with all the other word links still stacked on top of one another.
Right now when you refresh the page, each link allows space for the thumbnails to show. It isn’t until you click on one that they all stack on top of each other again, until you click on the new category to allow the art to show.
It’s most likely something with my CSS, but any help you guys can offer would be greatly appreciated!
Regardless, thanks a ton for this tutorial!
Nevermind, I fixed it! I needed the first box to have “display:block;” directly in the div, and all the rest to have “display: none;”. After that I can go as nuts with the styling as I want!
Thank you so much guys!
Do you think you could make a tutorial on how to make smooth, Flash-like javascript show/hide animations? I’ve seen it done before, just wondering if a small tweak would make it possible.
Hi Danale,
If you could give me a link to an example to what you are referring to, I would be more than happy to do it.
Knix
Actually, I found another source/sample here:
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
Examples 4, 5 and 6 (basically what’s on the right) is what I’m looking to use for my gallery at http://danale.com/art .
:-)
Hi,
I’m looking for something similar to the 3 collapsible boxes. I would like the boxes to close as you click on the next and have the ability for them to be closed completely. I’m making a vertical nav flyout to the left bar.
Thank you.
Hi JD,
Are you looking for something similar to what you see here:
http://www.plasterdog.com/layouts/fly_out.html
Basically, your submenus would appear as you hover over each menu item. If not, please give me a page that shoes a good example.
Knix
Something similar to http://www.sears.com
I have my page that will always show. I would like to have vertical tab bar that when the tabs are clicked will expand the hiden content.
What I am trying to do is show or hide a div when a user clicks the link, having multiple divs that belong in the same place so when the user clicks a link it needs to hide the current div, and then show the new one. I am a newbie to Javascript.
Please help,I’m trying to use the demo which uses the functions toggle 2 and toggle 3 but its not working for me, there must be something I missed. I’m a newbie.
It is showing on the webpage but its already collapse…nothing happens when I click it. Is there some stuff that I need to do before I get it to work? I copied the javascript in the head portion of my html and the table in the body. Please help, I’ve been cracking this case for 3hrs now and nothing works. Thanks in advance
[...] a twitter one, that can be achived a whole load of different ways. How to hide, show, or toggle your div __________________ Domain Diagnosis [...]
I used your very first example, but created 3 different DIV sections each controled by a different button. How can I make the visible DIV hide when a second is clicked instead of having to toggle off first?
function toggle1() {
var ele = document.getElementById(“toggleText1″);
var text = document.getElementById(“displayText1″);
if(ele.style.display == “block”) {
ele.style.display = “none”;
text.innerHTML = “ ABOUT ”;
}
else {
ele.style.display = “block”;
text.innerHTML = “ ABOUT ”;
}
}
function toggle2() {
var ele = document.getElementById(“toggleText2″);
var text = document.getElementById(“displayText2″);
if(ele.style.display == “block”) {
ele.style.display = “none”;
text.innerHTML = “ FOLIO ”;
}
else {
ele.style.display = “block”;
text.innerHTML = “ FOLIO ”;
}
}
function toggle3() {
var ele = document.getElementById(“toggleText3″);
var text = document.getElementById(“displayText3″);
if(ele.style.display == “block”) {
ele.style.display = “none”;
text.innerHTML = “ CONTACT ”;
}
else {
ele.style.display = “block”;
text.innerHTML = “ CONTACT ”;
}
}
I need to show and hide all the div’s. But in one of the example there one almost what i’m looking for.
But it working funky. I need when i press the bottom hide all div and when i click again show all.
The problem is when i click on one of the single div it hide, but after i click hide all the function hide all div’s but the one that was hide it show..
Can i explain my self. It hard to explain myself sorry
Pls help i’m pulling my hair off
Love the ‘onlyshowone’ script as it does EXACTLY what I want it to do. My problem is with IE and its inability to handle onclick events within list options. Specifically, I have a dropdown menu that I want a user to select from in order to toggle the visibility of a second menu. This works perfectly in Firefox, but not in IE because of the aforementioned lack of support for ‘onclick’ within the options.
A sample page is here: http://rossow.us/tmp/sample.html
The links across the top of this sample page demonstrate what I want the corresponding menu options to do (which they do in Firefox, just not IE). I know this problem is entirely unrelated to this set of fine scripts, but if someone could point me toward a solution that works in IE I’d be more than grateful. I’m a javascript novice at best, so thanks for your patience.
Hi Brent. Look up the code changes that you require on post number 35 above.
To make the SHOWONLYONE code work in both FireFox & Internet Explorer, I have replaced the content of the showonlyone.js file with the following. Works really well.
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName(”div”);
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute(”name”);
if (name == ‘newboxes’) {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = ‘block’;
}
else {
newboxes[x].style.display = ‘none’;
}
}
}
}
Thanks, Ulysses, but that isn’t the question. (That’s the code I’m already using.) The problem I’m having is that IE doesn’t recognize ‘onclick’ events within OPTION tags and therefore the script is never called. I’m looking for a workaround.
You can look at the full source code for the page I linked above, but in a nutshell here’s what I’m using right now to call the ‘showonlyone’ script:
Retailer
Firefox handles it beautifully — when you select that option from the dropdown menu, only the DIV with id ‘scope3′ is displayed. But when you select the same thing in IE, nothing happens. This is well-documented as not working, but I have yet to find directions I can understand on how to work around the issue. (I’ve seen references to putting an ‘onchange’ trigger in the SELECT tag, but I have absolutely no idea how to do that.)
I know this isn’t directly related to the code presented here, but I hoped someone could help anyway. Thanks again!
Sorry — it didn’t show the code. Let’s try again…
<option value=”Retailer” onclick=”javascript:showonlyone(‘scope3′);”>Retailer</option>
Never mind — figured it (‘onchange’) out on my own after a good night’s rest. Thanks again for a terrific script!
Hi!
I have a problem. I’m using first javascript example on this great page. But I’m using it in a table.
firstfirstfirst
secondsecondsecond
thirdthirdthird
fourth
fifth
It looks great in explorer 8, but looks awful in firefox. What am I doing wrong?
Pleas help.
Hello there,
I was trying to modify your showonlyone script to do a design that opens up another set of tabs which then opens the last div which will have content. having a bit of trouble with that and its inability to work across separate divs rather than tables. is there a way to do this?
Thanks!
Untitled Document
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName(“div”);
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute(“name”);
if (name == ‘newboxes’) {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = ‘block’;
}
else {
newboxes[x].style.display = ‘none’;
}
}
}
}
collapse
collapse
Div #3
Div #2
Div #2
collapse
collapse
I am trying to do this but using a select drop down box is that possible?
Great demo!
Question about Toggle3. How would I change the header STYLES when items are open? For instance I want the Collapse button to turn yellow once I’ve revealed DIV #1,2,3.
Courtney
I was trying use your code in a strange way. I thought maybe I could use this to hide my site and play a gif or some flash for a few seconds (as a preloader) but I have 1) no idea how to automate it or set a timer in java, also 2) I have no idea what i’m doing with javascript.
anyone able to point me in a direction?
Hi,
I am working on ERP product.I have used images plus and minus for displaying div.
its working fine.
but i have many buttons like clear,new, refresh etc on my page.
when i click these buttons,the hiding div is visible again.
i want the div to be hided until the user clicks on the plus buttton.
Hi
I need all the divs to be collapsed when the user lands on the page, then when they click on the link the content appears, then when they click on another link the previous content is hidden and the new links content is shown.
Not sure I go about achieving this?
Thanks
I want to Hide the div initially when the page was loaded.
So what change in js should be done?
please help.
thanx in advance.
Hi arpit,
Hiding the div initially will not require a change in the JavaScript. Instead, just add styling to the div itself. I will show an example with inline CSS but it is best to place it in your stylesheet:
I hope this helps.
http://www.ifaq.gov.sg/toteboard/apps/fcd_faqmain.aspx
above is a link of the demo i would like to request your help for,
where a seperate button is used to show and hide the toggled DIVisions..
please help.
I’m using the first block of code “Peek a boo”
Could you give me an example of having multiple hide show links on a single page?
Hi Knix,
This code is great, clean, simple, just what I needed. I don’t know what I would do if not for the hard work of code-gurus like you.
Here’s my implementation: http://www.range37.com/training.html
Thanks!!!!!!!!!!
Very Interesting & Usefull for noobs!!!!!!!!!!!!!
Thanks you once again!!!!!!!!!!!!!!!!!!!
This is the one I had searched!!!!!!!!!!!!!!!!!!
This article is really helpful
I can get the first answer, open to the first question, but how does one seperate the following answers so they don’t pop up under the first question, as an answer? I cannot get the other answers to open under the correct question, when showing decending questions and answers. Anybody know what I’m doing wrong? I have tried lots of formulas, but just can’t get it to work. Is there anyone out there that can change the following code to make this work? Thank you.
1×1=
function toggle() {
var ele = document.getElementById(“toggleText”);
var text = document.getElementById(“displayText”);
if(ele.style.display == “block”) {
ele.style.display = “none”;
text.innerHTML = “show answer”;
}
else {
ele.style.display = “block”;
text.innerHTML = “hide”;
}
}
show answer
1
1×2=
function toggle() {
var ele = document.getElementById(“toggleText”);
var text = document.getElementById(“displayText”);
if(ele.style.display == “block”) {
ele.style.display = “none”;
text.innerHTML = “show answer”;
}
else {
ele.style.display = “block”;
text.innerHTML = “hide”;
}
}
show answer
2
1×3=
function toggle() {
var ele = document.getElementById(“toggleText”);
var text = document.getElementById(“displayText”);
if(ele.style.display == “block”) {
ele.style.display = “none”;
text.innerHTML = “show answer”;
}
else {
ele.style.display = “block”;
text.innerHTML = “hide”;
}
}
show answer
3
[...] a great example of this at RandomSnippets.com (complete with the code that drives the [...]
Hi all,
Reloading the whole page calls the content back by default. What if I don´t need the content status (none or block) to be changed by reloading the page? Would be possible?
Thank you for this great post. I have been looking for a good working version in jquery, yui, moo-tools etc and this one seems to work best..
I have used this and thought everything was working great… Until someone pointed out that in IE7 (probably other flavors of IE as well) our page gets messed up once you use the toggle. We have a header and footer, and the footer doesn’t float down when you click on the show and the extra text is pushed down. In fact.. it looks like the footer moves up!
Then when you click hide, the text slides up.. but there is still part of the web page hidden by the now moved up footer.
Is there any way to resolve this quickly?
I should have stated I was using the first demo of the peek-a-boo.
Hi,
thanks for the trick! How about if you want to pass the toggle info through a page refresh? When you press show and refresh the page, the setting is reset and goes back to hide. So, how does this work through a page refresh?
This was an awesome guide!!!
I changed the code a little bit so that it closed a certain division completely. It works great! Check it out:
http://www.modernwarfare2cc.com
The only problem is that since I defined it in a general template, when I open up a different page, it comes up again. Is there any way to make the website (or computer) remember that the user has closed the div? That way, when a user closes it on one page and goes to a different page, it won’t show up again.
Thanks!
Great demo thanks. Do you know if there’s there any way to re-write the last demo in jquery?
Just what I was looking for, works great. Thanks. My pure CSS version worked fine for all browsers except for IE, it didn’t repaint the rounded left and right corners correctly upon expansion.
Does anyone know how to make it so that i can use an image and text in the link?
i.e. this does not work, when i click the text, the link dissapears…
Click Link
i am using Toggle5 with images… but wanted to add text as well.
thx
Thanks Alot, it saved my time
Hi, May i know how to show text and image in –>> .innerHTML ??
Can that be text.imageEle.innerHTML
Very useful, thank you!
Hi, i still didnt get my answer, its ok… i have one more questions !
I’m using Toggle5 with images too, how do i duplicate the effect to another table using the same java/html code on the same page ?
cus, it only works on one layer .. does it have a given name ?
thanks a lot for the code! certainly the most thorough example of showing/hiding divs i’ve found on the internet.
Hi,
I have a problem which seems like it should be routine but I cannot find an answer to it.
I have a log file which has two levels of detail: results and analysis. I want the page to display only the results by default, with a link that shows the analysis on demand.
There are an unknown number of each type of entry. I have created an “analysis” id and a “results” id and I assign them appropriately, so the report has many “analysis” divs and many “results” divs.
What I want is that when I click the “Show” link, all the analysis divs become visible. Every example I have found on the internet only reveals the first div with id “analysis”. The rest of them stay hidden.
There must be a solution, but I cannot find it.
Thank you so very much for the ‘showonlyone’part above! I’ve been looking for hours for that!
Hi there,
Firstly, thanks a MILLION for the demo and corresponding code. Works like a treat and I’m eternally grateful.
Just to push things a little further, I am wanting to have a ‘slide’ effect with the show/hide action and was hoping you could advise how I need to adjust my code:
function toggle(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == “block”) {
ele.style.display = “none”;
imageEle.innerHTML = ”;
}
else {
ele.style.display = “block”;
imageEle.innerHTML = ”;
}
Hope to hear from you soon!
Thanks and regards.
Hi Knix,
Firstly I love this script… Great for massive amounts of content in tiny little spaces and very SEO savy.
I have run across another use for this script that you may want to use, but it requires a little modification that’s out of my league (JS Newb). What I wanted the script to do is toggle trough divs via a single next button or link.
My client wants a few fact files shown one at a time and the ability to see the next fact by clicking a link. I tried some random quote generators but with only 4 facts atm they tend to show the same fact over and over and need the page to be reloaded to change.
Do you think it is possible to add this to your demos?
Regards,
Steve
function showstuff(boxid) {
document.getElementById(boxid).style.visibility = “visible”;
document.getElementById(boxid).style.display = “block”;
}
function hidestuff(boxid) {
document.getElementById(boxid).style.visibility = “hidden”;
document.getElementById(boxid).style.display = “none”;
}
Show again
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
hide again
plz try this .
Hi. I used the showonlyone code on each of the following pages and it works terrific:
Weddings
Commercial
Training
Seminars/Workshops
Performances/Recitals
Occasions/Parties
Music
Documentary
However, it creates a new problem in IE 7. Each of those links should open in my IFRAME called “sizeframe”.
After I have visited my first page, eg. weddings, and the showonlyone function has been called/clicked at least once, the links I have in the first snippet do not open up in my IFRAME any longer. Instead they open in a New Window. Any ideas why this is happening? I know it is caused somehow by the showonlyone javascript, because without it, my links open just fine.
I love this script, but I need to be able to click on the link again to completely collapse the divs (and have NOTHING expanded). Right now, clicking on the same link after expanding the div makes the div remain expanded.
So, I guess I want to combine this and a ‘toggle’ script, but I don’t even know where to begin.
Is there any way somebody could help me with the code for that?
Whoops, forgot to specify which code I was using! I’m using the “new” demo, with only one div displayed at a time. (showonlyone)
Thank you for the onlyshowone multiple div script. I was able to use the same script to change the style of the links so that they change when the div changes. This was for thumbnail images that open a larger gallery image, so the thumbnail image has a border of one color when selected and another when unselected.
function change(link) {
var th = document.getElementsByTagName("img");
for(var i=0; i<th.length; i++) {
name = th[i].getAttribute("name");
if (name == 'th') {
if (th[i].id == link) {
th[i].className = 'sel';
}
else {
th[i].className = 'unsel';
}
}
}
}
I’m looking Toggle 3, is it possible to have it so when the site loads it starts collapsed?
Hi Aron,
To start with the divs collapsed, simply edit your CSS so that the divs are hidden:
#mydivId {
display: none;
}
That should do it!
thanks for the quick reply, i’ll try that now
Hi i am working with toggle5, is it possible to work link the text along with the + , – images?
I am using 13 instances, Thirteen has different texts
Please any help will the highly appreciated
Thanks for compiling and usefully displaying all this info. Great learning resource :]
Hello
I am having a toggling div tag. I want div tag to overlap contents below it. whenever it is visible it changes that row height to height of div tag.
Hi i am working with toggle5 where plus and minus images are used for hiding and showing div. I hv created 3 such boxes.. n gave it diff ids. when u click minus button for the very first time it doesn’t work however every click aft tht works fine.
Hi Asmi,
Make sure the css for your divs are set to:
#yourDivIds {display: block;}
Allen
Hey thanks a lot.. tht solved my problem..
No problem =)
Allen
I am using this script to toggle when a form is being shown. However, when the form is submitted, if there is an error, the DIV disappears when the page reloads. Any way to keep the DIV shown after the page is reloaded?
Hi,
This problem has bothered me quite sometimes and I still couldn’t figure out.
I have a page with:
1. Three divs ID’ed in order from top to bottom: head; toggled; body.
2. The three divs have top margin of 5px, which help vertically space three divs evenly 5px from each other.
3. Top and Middle div have display properties set at ‘block’; the bottom div’s display set at ‘none’;
4. I have a javascript function designed to toggle the div from block to none and vice versa.
Here is the problem: After I toggle the bottom div to block, then toggle the middle div to ‘none’, the top div and the bottom div is not spaced 5px from each other (as I expected) but sticked together.
This problem seems to persist only in IE.
Surprisingly, if I take out the doctype declaration, the problem is gone!
So can anyone explain what is the best way to fix it. I also included the code.
Thank you in advance.
function toggle_block(toggled_block){
var toggled = document.getElementById(toggled_block);
if(!toggled){
return;
}
if(toggled.style.display == ‘none’){
toggled.style.display = ‘block’;
}else{
toggled.style.display = ‘none’;
}
}
click ‘display body’ then ‘hide this block’ – notice the red div and green div stick together
My large DIV section should start hidden/invisible.
In the ONLOAD event for my HTML page, I use javascript to set the DIV’s style to:
myDiv.style.display=”none”;
This sort of works, but…
**PROBLEM** – unwanted quick flicker:
On some operations, including page refresh, the user can see the whole large DIV contents briefly render, then a half-second later the ONLOAD logic kicks in and hides the DIV.
I tried setting the style= attribute on the DIV element, but no effect.
** HOW can I prevent the quick flicker?
Thank you.
Now the flicker is suppressed for me, by…
style=”display:none”
…as an attribute on the DIV element.
Thanks anyway, nice website.
Thanks for the post. Exactly what I needed!
Thank you for your work .
Function “show only” is very useful , whith a fade , it will be top for lighter prog .
Thank’s
Hi, Im in a real bind.
I used the toggle5 demo. I have it working good using divs. However I now need to add another function to cycle through the divs. Basically a way to use previous and Next function while hiding the other divs. Please help!! I would really appreciate it. Thanks so much.
Is there any way to control both an image and text i.e. I’d like a + icon with open and then once open I’d like this to change to a – icon and close. Thanks in advance for your help.
[...] http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/ http://www.dhtmlgoodies.com/scripts/show-hide-content-slide/show-hide-content-slide.html [...]
thank you for a great set of scripts.
i am using the showonlyone version, and am having trouble with one small aspect. i would like to change the style of the inactive toggles, as in a different bg color or such. can you show me an example? everything i have tried has no effect or breaks the function.
Thank You in advance.
[...] read an article by randomsnippets.com about showing and hiding a DIV using javascript. Although there were some [...]
Hello
Is it possible so that the div closes from right to left rather than top to bottom?
Thanks
Mark
Hi there. Thanks for the lesson. I’m wondering if you can also advise on how to make a “show all” and “hide all” toggle function for multiple DIVs. What I find now is that the toggle3 function switches all of them, making any that are displaying into hidden, and any hidden into displaying. (Hope I’m making sense!)
Mil gracias.
I’m trying to figure out how to do this with links in wordpress.
I’m struggling with the fact that I’m forced to use classes rather than ids. I’ve done some funky workarounds though, as you can see on the “Links” thing (hover over an arrow)
Is there a better way than making the font 0pt and white and the div 0px high, then making the div height relative and text black and 8pt? haha
Thank you so much. Your code did help me really.
Can you show me the javascript and html to use the “showonlyone” concept but have the link text/image change like it does in the first demo – with the plus/minus sign?
Here is the only way I’ve found to:
* Toggle Multiple Div with identical ID’s , using the same link
function showhide(id) {var tags = document.getElementsByTagName(‘div’);for (var i = 0; i < tags.length; i++) {if (tags[i].id == id) {tags[i].style.display = (tags[i].style.display == 'none') ? '':'none';}}}
* using this to call it:
(a onclick="showhide('show');return false;")Show/Hide(/a)
- i.e. – ’show’ is the id of the div’s
Hey there, this is super helpful but I have one question. I’m helping someone out with a site and the sidebar tends to be a bit long. I thought the “Show only One” div would be perfect, and it does work, EXCEPT when you first get to the page, it shows all of them! Is there any way to fix it so it shows one or none straight off?
Link-> http://www.newleaf.inlunae.com
Hi Kel,
Two easy options are to directly enter the styling in the div via inline CSS or address it in your CSS page (recommended method) to be displayed or not by default.
One way is to address this in your CSS page:
#mydiv { display: none; }
Or you can address it via CSS inline styling directly in your HTML:
<div id="mydiv" style="display: none;">my cool div</div>
I hope this helps.
Allen
Many thanks!! ShowOnlyOne saved my day!
how to make div show and hide without javascript.
Hi Vijay,
Why not use JavaScript to do it? I can’t imaging having to use server-side resources to alter the display of the client. This should definitely be handled via JavaScript. Is there a reason why you don’t want or can’t use JavaScript?
Allen
Hello,
I am trying to use javascript to validate a form and display divs telling the user if they miss a field out out that is required.
I have managed to get this working however I cant make it remove the div if the user fills out the required field and then re-submits the form.
Any ideas? I can post some code if you like.
Thanks very much for any input, it is much appreciated!
Kind regards, Mike
Thanks for the great scripts!
I decided on using the showonlyone version and it is perfect except for 1 thing. Is it possible to add a function to make it so that you can expand AND collapse the hidden div? The way it is now the last expanded div stays open with no way to collapse/hide it.
A few others have asked whether you can use both text and images together – is that possible. For example I’d like to create a link and then have a open/close icon next to that text link. The problem is at the moment if you use toggle5 then the text next to the image link disappears after you’ve clicked the link once.
Hi Al,
It is certainly possible to have images and text together. If you keep the text outside of the div (or whatever container) that you are using for the image that makes it appear and disappear, it should work.
This is basically what I am doing in my example for toggle5 where the text is outside of the “imageDivLink” id element.
Let me know if I am misunderstanding your request.
Allen
Please excuse me if this has already been answered, but I didn’t want to read through all the replies. =P
I’m currently using your toggle5 (showonlyone) code, and have it set up and working perfectly.
However, I was wondering if it was at all possible to have the code set up so that I could close the open div by clicking its’ link again. I’m not at all fluent in JavaScript, and every attempt I’ve made thus far has backfired horribly. =P
Thanks in advance,
Paul
Hi,
I have two tables in div tag, i want only one to be displayed at time which i know how to do it but what i want is it should be displayed in the same place as the first one. So if i hide first table and display second table it displays below the first table though first table is not visible.
So i want second table to take the place of the first table.
Thanks
Hi Kate,
If you use “display: none;” for your tables, it should not take up space in the layout which is what happens when you use “visibility: hidden;”.
Allen
Wow. These scripts are great! I’m using the last example (ShowOnlyOne). I’ve looked through all the posts above and can’t find a solution to my problem:
When you click on a link, I want two DIVS (each with different ID’s) to appear, and all other DIVS to turn off.
An alternative would be to somehow specify (by ID) in the link exactly which DIV’s to turn off and which ones to turn on.
Any help would be hugely appreciated.
Regarding the demo that uses images instead of the Expand/Collapse text. The div is open to start, so going to a page with this on, it is already open, clicking minus button would close.
How would i change the code, so by default the contentdiv is closed, and you would click the image to open.
I am using this with gravity forms. I want it so their is a buy-now button on the page, clicking it will make the gravity form appear underneath. At the moment, the form appears on the page by default, clicking the button hides the form. So basically it is doing the opposite of what i want it to do. What part of the javascript would i change ?
Hi Jon,
In this case you would just have the styling for contentdiv to be set to “display: none;” instead of “display: block;”.
Allen
I need a code for the user to be only able to view one div like the last example you have published but with the difference that when he clicks for the second time on the collapse button the corresponding div will be hidden. so no divs appear.. please some help!
Hi! How can I make
1. a bottom toolbar for my website to toggle toward upside not downside with all elements closed and ShowOnlyOne,
2. toggle toobar with laterally button.
Thanks!
HI Bofy,
I think this site has a great example of that:
http://ryan.rawswift.com/2009/02/15/fixed-that-bar-at-the-bottom-like-facebook/
Allen
Many thanks Allen Liu/Knix, nice ideas, nicely illustrated!- i’ll make good use of them
the only room for improvement I see now would be in the code, some DIV tags seem to be missing an end bracket, especially in the showonlyone example, in which i was particularly interested.
Again, Thank you!
Great catch! I just fixed up the code. Thanks!
Thank you so much! So versatile and well explained, too. Just a little hard to see where one option ends and the next begins, however.
Thanks for the suggestion! I added some <hr> tags in there. Hopefully, that will make is a bit easier to visualize.
Allen
Thank you man!
Hi I have used toggle2 along with toggle3 as demoed here. however on IE the content displays behind the elements below it instead of pushing them all down. any ideas what might be wrong? you can view the issue here http://www.peelentertainmentgroup.com/what-we-do
thanks
toyin
Hi Toyin,
It looks like the issue is addressed. If so, please share what you did to solve it.
Thanks,
Allen
Hi no its not but I am working hard on it. hope to get a break thruough soon. did you check it on IE? what version. It works fine on firefox.
cheers
toyin
I see. I used FF. What version of IE are you using? I will check it out when I get in front of a PC later on today.
yeah, using ie8 thanks
Looks like you need a:
<div style=”clear: both;”></div>
before
<div class=”bottom-art-Sheet-bkg-inline”>
Thanks a lot Allen. but that didn’t work. I have finally solved the problem by putting border:1px solid #cccccc in the style for that same div you mentioned i.e.
Very bizarre solution but worked. still dont understand why though.. thanks a lot for the javascript code though… very brilliant.
Definitely odd but that is IE for ya =) I’m glad got it working.
hi there. i been searching this codes. and unfortunately i don’t know how to make it work. i used the “peek-a-boo” demo and make it work. but if i use any other codes here i dont know why its not working. i want to use the ‘showonlyone’ but cant make it work. can you help me please. i’m using firefox as my browser.
Hi Dee,
I can try to help you out. Can you give me the url to your site so that I can see what you did?
Allen
its still on draft and im still testing the codes on notepad.
and im planning to add it to facebook fan page. will the codes properly work there?
the problem is it wont change to div#2 when i click the second tab. it will just refresh.
thanks for the fast reply.
Hi Dee,
Unfortunately, I cannot help out unless I see the page and the code you used.
Allen
If you cannot give me a live page, then can you tell me what error message you get? FireFox/FireBug should be giving you JavaScript error messages.
I’m trying to recreate the hide/show divs on this page for the bios http://morrisonplc.com/
i understand the concept but i’m not quite sure on how to apply it to the site i’m working on at the moment.
i’m just doing short 1-2 line bios with a picture on the left
so:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra sem vitae leo cursus nec cursus est blandit. Mauris ut mi in magna adipiscing fringilla a ac enim.
and i want to make the image for each person a trigger to show a mid box with a larger image and more complete text about the person.
any help would be much appreciated or a pointer in the right direction.
Hi Robert,
It looks like you came up with a nice solution. Nice job!
Allen
the website i linked is the one i want to mimic not the one i’m working on :p unfortunately ^^
and i always forget that coding doesn’t show up properly in boxes.
Hi Robert,
Ooops…sorry for misunderstanding your original comment. You can definitely make this work with the concepts shown above except the divs, with each persons bio, that you are going to show/hide are all going to be in that middle box with “display:none”. This way nothing shows up at first. The link for each person’s bio would just show that particular bio or div. For the cool effects, you may want to look at jQuery: http://jqueryui.com/demos/dialog/#modal
I also have a jQuery demo where you can hide/show elements which is MUCH simpler.
Allen
I’m using the Peek-a-boo demo, and I was wondering what part of the code I would have to change in order to have unrelated topics on the same page be hidden or shown independently.
At this point, clicking the hide/show on one div affects all the divs, which defeat the purpose of what I’m trying to do.
I also have very limited JS experience, which doesn’t help much.
Please check out my “checkonlyone” demo. I think that may be what you are looking for. If not, please let me know. If possible, provide me with a link to your site.
Thanks,
Allen
I actually figured it out after talking with a buddy that does Java Programming. what i needed was to change the “function toggle();” to “function [something unique for each div to be hidden/shown]();” These tutorials are fantastic.
Hi.
I’d like to use this but here is my situation. I have two divs (one with a random image generator of landscape photos and one with a random image generator of portrait photos. Upon page load I’d like for either one to be displayed. Basically, I would like it to be random.
Any ideas?
[...] [...]
I’m trying to hide/show a particular post on the same page when you click on the link instead of it taking you to another page. Any idea how to do this?
Hi Tyler,
You can try the following code:
Allen
I’m trying out your first toggle code, using radio buttons as the switch, but when I click, the hidden div shows under (or over) the div underneath it rather than moving it down.
Essentially, I found a site that does what I’m looking for:
http://www.pimsleurapproach.com/learn-german.asp
If you click the “No” radion button where it asks about your billing address, the billing address entry area shows, and everything under the cart moves down. make sense?
I could just grab those folks code, I’m sure, but theyre using loads and loads of nested tables, and I just want to use divs.
Any ideas?
Hi Chuck,
I’m sure it is just all in the way your site is laid out. Can you give me the url to the page you are working on? This way it will be much easier for me to help you out. I’m still a bit confused to what you describe at first because you mentioned “the hidden div shows under (or over).” Maybe seeing your actual code and example could clarify this.
Allen
Sadly, its on an internal server…I’ll be working on it when I get home tonight, maybe I can create a sample that recreates the issue.
No problem. I’ll be able to look at it tonight if you can prepare the sample page.
Allen
Got it!
I had a container div surrounding the div I needed to expand and collapse, and the div next to it that just contained content.
In that div I had “display: inline-table” (dunno why I put it in, it wasnt needed). Once I removed that, the code works perfectly.
Thanks!
~C
Awesome! I’m glad you were able to resolve it. Inline vs. Block placement will definitely give different effects in the layout of your div.
Allen
Hi, im from argentina, sory my english
can i add an effect, like ´slide´or ´fade´?
thancks
Please check out my other post relating to hide, show, toggle divs with jQuery.
i have getting both div content simultaneously over each other when page load at beginning. after clicking it become fine and working. ho wto show only one content at starting
You can add the styling code to the div to hide it from the start:
thanx for helping me… i have wasted 5 hrs for searching this….
Thanks so much for posting these. You are the ONLY person that I have seen post these type of show/hide scripts in a clear and easy to follow way. This page has been a HUGE help for my development project!!!!
Wow, as someone very new to web designing, I am thrilled to see someone so supportive as to stick with a topic so long and help so many people.
I have an image (tree with many hearts) and I want to use DreamWeaver to create hotspots for each heart. Then, when a user hovers (or clicks) on a heart, a different quote appears.
Here is the site: http://www.oss-shamrocks.com/Mrs%20Newport.html
I would love your input. Thank you so much!
Hi Ken,
At first glance, I thought the overall image was cute however, the quotes are not popping up for me when I click on the hearts. I used FireFox 4/Mac OSX. If you hover over it long enough though, a popup does occur but that is the natural response of the HTML.
Allen
Thank you SO MUCH! I am currently making a website, and this helps SO MUCH. I will be sure to donate (let me make some Paypal cash first )
Dude you rule!
Haha…thanks!
Ty so much dude !
Brilliant stuff!!! Got it working relatively quickly and it works cross browser :-) Thanks so much.
Have you had any thoughts on how the div could fade in/out as opposed to just popping?
(sorry, found the fade section!) http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/ !
No problem. I was just about to reply to you with the same response =)
Allen
hello….
i m using div but this tag not using name property.. so give me solution
Hi Rahul,
I would recommend to use jQuery implementation instead. One of the many advantages of using jQuery is the ease of selecting almost any element or group of elements.
Here is my post of the jQuery implementation of the show/hide post.
Instead of using the selector where it is looking for elements based on the name attribute, you can choose the child elements of a certain parent element.
Let’s say you have the following HTML for your divs:
The JavaScript only changes slightly for the “showonlyone” function:
I have not tested this but the idea is to choose all the child elements of the parent element which is “parentDiv” in this case. We are only using id’s here so there is no need to base this function on the “name” attribute.
I hope this helps.
Allen Liu
hi allen love your snippets man, you are awesome, one question you dont you work on jquery-ajax :-( , please work on it, so that we can get it. please regards waqas
Thanks for the comment Waqas! I usually do snippets for solutions that are hard to find on the internet. I feel that all aspects of jQuery AJAX is pretty nicely covered out there. Is there a specific issue you are having with AJAX with jQuery or you would just like to see a general tutorial on the topic?
Thanks for the script . The excellent thing about the script is its so simple that I can edit in my choice . Loved it
Hi Allen
The fact that you have kept this tread going all these years is amazing.
If I could also now ask for your help, no matter how I import the above example with 3 DIV’s where only one is visible at a time it will not work. If you could email a full working example it would be greatly appreciated.
Regards
Rod
Hi Rod,
Thanks for the comment. I have put all the code here for you. Just copy and paste everything to a text editor and name with a “.html” extension (e.g. demo.html). The double-click that file and your browser should automatically open it up.
I did a lot of cleanup to the original code:
I hope this works out for you.
Allen
Hi Allen,
Thank you, this works fine in Demo.html.
However when I moved it into my eCommerce site I had to move the CSS into its own style sheet which worked fine, However when I add the rest of the code to the website the HTML editor its changing the code for some reason – note the addition of the “[CDATA]“.
// <![CDATA[
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x
Would this be the reason it's not working? Can the rest of the code be made to work with the "[CDATA]” included in the code?
I can post a link to the site if that would help.
Regard
Rod
Hi Rod,
The CDATA just tells the XML parser to ignore whatever is inside the CDATA section. It should not have an effect. I took a look at your code and it was missing the div name “newboxes” for the 3 divs. Your HTML part should look like this:
Notice that I added name=”newboxes” to the 3 content divs. That is what worked for me on my end.
I hope that helps.
Allen
Hi Allen,
I note most of the code I posted did not show so will send via email.
Regards
Rod
Allen i have a question for you…
When it says “document.getElementById”, i was trying to do “document.getElementByClass” but it doesn’t work…
How do we say to get a class (“liveLyrics”) that is inside of:
e.g.
head
style type=”text/css”
#background {
height: 550px;
width: 1008px;
background-image: url(http://example.png);
background-repeat: no-repeat;
float: left;
}
#background #rightLyrics {
height: 406px;
width: 727px;
margin-top: 38px;
margin-left: 41px;
}
#background #rightLyrics .liveLyrics {
height: 45px;
width: 90px;
margin-top: 40px;
margin-right: 56px;
float: left;
}
style
head
body
div id=”background”
div id=”rightLyrics”
div class=”liveLyrics”
img src=”example.gif”
div
<div class="liveLyrics"
<img src="example.gif"
div class=”liveLyrics”
img src=”example.gif”
div
div
div
body
html
sorry, this doesn’t accept html tags… please remove my previouse coments…
Hi David,
I think the function you are looking for is
document.getElementsByClass()
and notdocument.getElementByClass
.Allen
Sorry that’s not enough information… because the class “liveLyrics”
is inside of the id “background” and id “canais”…
what should i put inside of document.getElementsByClass()?
e.g. document.getElementsByClass(background canais canal)??
Thanks for your time, you’re very helpful
Hi David,
You should just be able to call
document.getElementsByClass("liveLyrics")
directly to access elements with the “liveLyrics” class. I’m not sure how much control you have on this but I would recommend using the jQuery library. Once you have jQuery going on your site, the element(s) selector code is just$(".liveLyrics")
=)Allen
I think it’s impossible, because even when i take the class “liveLyrics”
and put them out of the id’s…. its still doesn’t work…
Can you give me the URL to your site?
Allen
Tell you this… my friend who owns the site is gonna email you with the e-mail [censored] because the website is not publish yet, and my friend Peter will send you the html file called “canaisindex.html”…
Hope you find the solution
PS: Great Post, did you learn by yourself?
just one more thing can you give me your e-mail?
PS: remove this coment if you want
Hi David,
Feel free to email me at allen.liu@randomsnippets.com.
Allen
I’ll give it my best shot. Yes, a lot of things can be learned from the internet these days =)
Allen
Hi there – I’m working on my website and company’s social networking and I find it difficult to organize them all. Can you direct me to how you would go about having a social bar at the bottom of the page (like I have it) but with the ease of clicking the button to (for instance) +1 with google, +1 like with FB, tweet with twitter etc. much like you have it on this page just above this reply.
Thanks for your help. It’s taking me way to long to find something I like!
Have an excellent day.
Rob
Hi Rob,
I used a WordPress plugin for the nice buttons =)
It is open source so you should be able to see the PHP/HTML/CSS/JavaScript code to implement it. You may want to reference the author though to at least give him/her credit for the awesome work.
Allen
Great tutorial! I am using the at any one time code and was wondering if you knew a way to use a image as the button. When the button is clicked it would change images.
Example(when page is loaded):
Collapse 1btn(green img) Collapse 2btn(blue img) Collapse 3btn(blue img)
Example(when Collapse 2btn is clicked):
Collapse 1btn(blue img) Collapse 2btn(green img) Collapse 3btn(blue img)
Any suggestions would be greatly appreciated.
Hi Joe,
You can style a tags to look exactly like buttons with the right CSS and still get the same effect as an actual button =)
Here is an awesome example!
Allen
Perfect Thanks!
Good Evening Allen.
Trust all well on your side of the world.
Im not that clued up on coding, well more like advanced coding like java script.
Im wondering if you can help me out here.
Im trying to, lets say”fancybox” a bunch of videos. The show and hide div function, would it work for this type of project? I have a few thumbnails of the vids and when u click on the thumb nail, would it at all be possible to have an iframe of the youtube vid come up (almost like the fancybox script)?
If i view this project off line, it works like a bomb (fancybox) brings up the vid and plays awesomely.( the vids arn’t in iframe as i have copies on my hard drive) But doesnt work when i upload it to the site. It there anything i can do or u can suggest for me to have this effect on my site?
Best regards
Hi Brendan,
I think I understand your issue but can you give me the url to your site? I would be much easier for me to see what the issue is and possibly give you a solution.
Allen
Hi Allen,
Thanx so much for the speedy feed back!!!
Here is the link the my site http://rstfitness.co.za/.
If u look at the bottom of the home page u will see what im trying to do.
Hi Brendan,
The reason why the videos do not work is simply because the “John Smit is back in action__ Ready to take on 2011__.flv” is not there. I am getting a 404:
“NetworkError: 404 Not Found – http://rstfitness.co.za/video/John%20Smit%20is%20back%20in%20action__%20Ready%20to%20take%20on%202011__.flv”
Are you sure the following exists in your directory?
http://rstfitness.co.za/video/John Smit is back in action__ Ready to take on 2011__.flv”
I would be careful of having spaces in your file name and replace them with dashes. They can definitely cause some problems depending on your environment.
Also, it may be worth looking into nice jQuery video gallery plugins to do the job. Here are some examples:
http://www.videolightbox.com/#preview
http://smple.com/videoGallery/ (You can easily customize the links with your images to make it look nice.)
I hope this information helps!
Allen
Hi Allen,
Thanx once again for your feed back, its highly appreciated:)
im going to use the videolightbox plugin and see if this does the job.
Ill be sure to post my findings and achievements here once im done.
Thanx Allen
Bean
No problem. I hope it works out for you.
Allen
Hi Allen,
Thanx for the links. they works perfectly
Sweet! =) It looks like you went with the jQuery solution. Awesome choice! I would have done the same thing.
Allen
ahhaah thanx again Allen. Just a lil pro tho, once one of the vids are viewed, the site stops? like u cant view another one?
But yeah man, once again thanx for saving me on this one lol
It looks like you are getting a ton of JavaScript errors that are repeating:
swfobject.removeSWF is not a function
http://rstfitness.co.za/cprimvid/engine/js/videolightbox.js
Line 1
Did you customize the
videolightbox.js
file?Allen, as i said im not too clued up with the script side yet. and no i havent edited the.js file. should i?
Hi Allen,
Sorry budd, i forgot to take out the old script for the swf i had in preivously.. All is 100s now.. thanx again man
Awesome. It’s looking good!
Hi Brendan,
I think building an e-commerce page/site from scratch is not the most efficient way to go about accomplishing this. You’re basically reinventing the wheel. I would recommend installing the WordPress content management system and using the WP e-Commerce plug-in. You can literally have this up and running in about 10 minutes. It supports many of the popular payment gateways, including PayPal and Google Checkout, and transactions are made safely through SSL connections.
In addition, you have tons of free e-commerce themes that you can use and customize to your own liking.
Here is a how-to video where the guy installs everything in 5 minutes.
Allen
No, it is not recommended for you to edit library files directly.
Hi Allen.
Just wanna say thanx again for helping me out. My client is very very impressed : )
Im still new to all the coding we have in our computers these days, iv only been a web designer now for 2 years, learning new things everyday.
I have no idea about forms and php and stuff. What i need to do for the same client is make a product purches form.
Iv search the internet and only get simple forms. What i need is a form that i can modify in the future as more products come up. If u go the order form http://rstfitness.co.za/order/form.php everything here is perfect, im just missing one thing. ok well two things.
the quantity and total. Say now someone wants 3 of this product and then wants 10 of the next one, the clients wants it totaled and sent to the mailing address. So this is my problem, i dont know where to look or what to do to get the function there. It seems ur pretty clued up with scripts and stuff.
What can u suggest?
Hi Everyone,
I want to grayout the background when a modal comes on page load..Can anyone help me out on this.How can i code for this in javascript.Thanks alot in advance!!
Hi Barnali,
To do the modal on page load, it will require JavaScript and CSS. I found a nice modal tutorial on this and the CSS. If you are using jQuery and the jQuery UI library, it already has some nice built-in dialogs and modals.
I hope this helps.
Allen
thanks alot @ax163.