I have found a javascript that allows you to toggle a div by the div id, well here it is...
| <script language="JavaScript"> function toggle(id){ if (document.getElementById){ var el = document.getElementById(id); el.style.display = (el.style.display == 'none') ? 'block' : 'none'; } } </script> |
And if you want the div to be hidden by default just add this to the Javascript:
| window.onload = function(){ toggle('page'); } |
This part of the code needs to be put in the and section of your website
| <html> <head> <title>Test</title> <script language="JavaScript"> function toggle(id){ if (document.getElementById){ var el = document.getElementById(id); el.style.display = (el.style.display == 'none') ? 'block' : 'none'; } } window.onload = function(){ toggle('page'); } </script> </head> <body> <a href="#" onclick="toggle('page')" title="">Link01</a><br /> <a href="javascript:toggle('page')" title="">Link02</a> <div id="page"> <center> <p align="center"> <br> Test your HTML here.<br /> <script language="JavaScript" type="text/javascript"> <!-- function preview(){ if(document.pad.text.value.length>0){ pr=window.open("","Preview","scrollbars=1,menubar=1,status=1,width=319,height=300,left=50,top=50"); pr.document.write(document.pad.text.value); pr.document.close();} else alert('Learn to code before you put something in...')} // --> </script> </p><form name="pad" method="post"> <font size="1"> <font color="#fefefe" face="tahoma" size="1"> <textarea name="text" rows="12" cols="30"> </textarea> <br /> <input onclick="preview()" value="Preview" name="view" type="button"> <input value="Clear" name="clear" type="reset"> <input onclick="document.pad.text.select();" value="Select All" type="button"> </font> </form> </center> </div> </body> </html> |
This part is the div with the id, you can put anything in between the div's
| <a href="#" onclick="toggle('page')" title="">Link01</a> |
or
| <a href="javascript:toggle('page')" title="">Link02</a> |
This part is the link to toggle the div visible or non-visible if you are going to change the div id in the code above also change it in the link, you can also use an image to toggle the div just put the image source html code where the Link01, or Link02 text is
Hope, this helped.
Related Articles
- You, too can Have Fun with Sepia Images!If you are one of those who wonder how people come up with the cool looking sepia tone prints that you admire so much. If you are doubling up with jealousy over a sepia tone, here, we will give you tips on how you could achieve this sepia tone, too...
- Successful CSS Template SkinsThe CSS mantra is the separation of content and style. The content should be in the HTML and the CSS should take care of how the HTML is displayed on the page. However, most web-designs dont properly separate content and style. The HTML and CSS are there separately, but if you changed the HTML, th....
- How To Create Columns With Div'sWhen we at Ecommerce Partners started using divs rather than table for web page layout, the most daunting experience for me was how to create columns using divs. So, here is the solution for all those website developers who are struggling to use divs for web page layout.
- Making a 3 Column Fluid Layout With CSS3 Column CSS Layouts always seem to be the most sought-after by web designers. To create a layout with three columns, including two fixed width sidebars and a fluid center and not using tables seems to be, as A List Aparts Matthew Levine put it, The Holy Grail in his article on this.
- Dreamweaver CS3 and Cascading Style SheetsCascading Style Sheets (CSS) is a W3C standard mark-up language for defining the appearance of web pages. The use of CSS allows developers to fully separate the content of the page from its presentation, speeding up the development process and also making the...
- Javascript Table RolloversHow you can get a table effect on rollover.
- CSS Menu Using JavaScript (Revised)noticed a flaw with my original JavaScript drop down menu regarding customization using CSS. The problem was this; the LI elements below the #divs that were hidden didnt conform to their own CSS customization and stuck with the rules of the above LIs.
- Datasheet controlAuthor Ben Hunt is principal consultant at Scratchmedia Ltd. and his client list includes the BBC. Here he guides us through the process of creating a datasheet.
- Time to Say Goodbye to SpamYou are going to love this Article - Time to Say Goodbye to Spam! The author gives you benefit of considerable programming knowledge in this helpful tutorial. Along with simple texts he gives you the code to filter spam like crazy.
- Sliding Jquery MenuUsable web design implies smart usage of a page space. A sliding menu is sure to come into place when you want to give your visitors more control over what they see on your site.