This is something I learned a while back but I figured that I would write a little something down with the intention of possibly helping someone understand how to show/hide (toggle) divs using HTML, CSS (Cascading Style Sheets) and a bit of JavaScript.
Here is a bare-bones example. Say you had a horizontal navigation set up. The desired effect is that you want something to 'appear' on this same page when a user clicks on 'link 1' for example: Go ahead, click on link 1
So how does this work? It takes some CSS and a bit of JavaScript:
** This goes between the <head> and </head>, or you can set this up in an external .js file (but then you would need to remove the comment tags and the opening and closing script tags - and don't forget to reference the external file between the <head> head </head> tags
Something like this <script type="text/javascript" src="the_file_name.js" ></script>.
here is the Javascript:
<script language="JavaScript" >
<!-- <!-- To use in external stylesheet remove this line up -->
function toggleDiv(whichLayer)
{
if (document.getElementById(whichLayer).style.display == "none") {
document.getElementById(whichLayer).style.display = "";
}
else {
document.getElementById(whichLayer).style.display = "none";
}
}
//--> <!-- To use in external stylesheet remove this line down -->
</script>
and here is the code to trigger the 'toggling' of the div
<a href="javascript:toggleDiv('hideMe')">link 1</a>
and here is the code to set up the hidden div
<div id="hideMe" style="display:none; width: 300px; background-color: #000000; border: 1px solid #ffffff; text-align: center; padding: 10px; color: #ffffff;">Once I was hidden and now I am not. Click on 'link 1' again and I will be hidden </div>
One of the important things to remember is to set the id of the hidden div, for example this one is called 'hideMe' then you must trigger the JavaScript and make sure you trigger the correct id - yes, you guessed it - 'hideMe'
That's pretty much all there is too it. If you want a bunch of different hidden divs then use a bunch of different ids. You cannot use duplicate ids, each one on a page must be unique. Click on 'link 2' and 'link 3' to see a two more examples of what can be done.
Here is the coding for all three links and the div connected to them, including 'hideMe2' and 'hideMe3'so if you have not clicked on them I recommend doing so now: you might need to scroll all the way to the top of the page to see these divs - they are positioned absolutely using CSS.
<div style="width: 300px; background-color: #c0c0c0; border: 1px solid #000000; text-align: center; padding: 10px;">[<a href="javascript:toggleDiv('hideMe')">link 1</a>] [<a href="javascript:toggleDiv('hideMe2')">link 2</a>] [<a href="javascript:toggleDiv('hideMe3')">link 3</a>]</div>
<div id="hideMe" style="display:none; width: 300px; background-color: #000000; border: 1px solid #ffffff; text-align: center; padding: 10px; color: #ffffff;">Once I was hidden and now I am not. Click on 'link 1' again and I will be hidden</div>
<div id="hideMe2" style="display:none; width: 300px; position: absolute; top: 300px; left: 300px; background-color: #000000; border: 1px solid #ffffff; text-align: center; padding: 10px; color: #ffffff;">Me, I was hidden but I am using CSS absolute positioning. Maybe I will attempt to talk about that in the near future.</div>
<div id="hideMe3" style="display:none; width: 300px; position: absolute; top: 400px; left: 150px; background-color: #000000; border: 1px solid #ffffff; text-align: center; padding: 10px; color: #ffffff;">Link 3 triggered me. I set this div's id as <span style="color: red;">hideMe3</span></div>
The JavaScript does not change.
note: Normally I would not use an external stylesheet for the CSS and therefore I would be able to reduce some of the repetitive code. Hopefully you get the point of this quick tutorial.
4 comments:
Thank you very much
Very nice blog and information it’s very helpful for visitors. I would like to come on this blog again and again. Blog information is according to blog theme I want to say thanks to the blog owner for nice creation. Website Designing Riyadh, Web Designing in Riyadh
Post a Comment