25/05/2010
0
This JavaScript tutorial guides you to build a JavaScript code for hiding and showing the HTML elements on the web pages, work with element's ID. This JavaScript are very detailed, so please go to the full post for more instructions.
- Demo
- Enlarge
- Reload
- New window
Free iPage Web Hosting for First Year NOW
If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?
Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage.
This is a quick tutorial to explain how you can easily show and hide page elements with javascript.
To begin with, each item that you want to hide/show should have a unique HTML ID. Let's begin with a very simple HTML page.
<h1>This is my title</h1> <div id="content"> <h2>Div1 Follows</h2> <div id="div1"> This is where my first div will be. </div> <h2>Div2 Follows</h2> <div id="div2"> This is where my second div will be. </div> </div>
We will then write a function that will hide all of the appropriate divs (in this case, div1 and div2).
function hideAll() {
var myDivs = Array('div1','div2') // Add each div ID to this array
for(var i in myDivs) {
if(document.getElementById(myDivs[i]) {
document.getElementById(myDivs[i]).style.display = 'none';
}
}
}
That function, when called, will hide all of the divs that are included in the "myDivs" array. However, we need a way to show the appropriate divs again, so we are going to modify the function slightly to insert a new link where the div should be.
function hideAll() {
var myDivs = Array('div1','div2') // Add each div ID to this array
for(var i in myDivs) {
if(document.getElementById(myDivs[i])) {
document.getElementById(myDivs[i]).style.display = 'none';
if(!document.getElementById('linkto_'+myDivs[i])) {
var myLink = document.createElement('a');
myLink.id = 'linkto_'+myDivs[i];
myLink.href = '#'+myDivs[i];
myLink.onclick = function() {
showDiv(this.href);
//return false; //uncomment this line and comment or remove the next line if you don't want the page to jump to the revealed div when the link is clicked
return true;
};
myLink.appendChild(document.createTextNode('Expand this entry'));
document.getElementById(myDivs[i]).parentNode.insertBefore(myLink,document.getElementById(myDivs[i]).nextSibling);
}
}
}
}
Now that we've inserted links that will show the divs, we need to actually write the function that's going to reveal the div when the link is clicked.
function showDiv(what) {
hideAll(); // Comment this line out if you don't want the rest of the divs to be hidden when you reveal a new one
what = what.split('#'); // If our div name/ID includes the hash symbol, we'll split it at that point
what = what.pop(); // The function above turned our div name/ID into an array. This will grab the last element of the array
if(document.getElementById(what)) {
document.getElementById(what).style.display = '';
if(document.getElementById('linkto_'+what)) {
document.getElementById('linkto_'+what).parentNode.removeChild(document.getElementById('linkto_'+what));
}
}
}
Now, we'll put these two functions together at the very bottom of our document (just above the closing body tag) and will then call the appropriate functions. I've also added a little bit of script that will check to see if someone loaded the page trying to access a specific div, and will show that div if so. Therefore, the entire body section of our HTML page will look like:
<body>
<h1>This is my title</h1>
<div id="content">
<h2>Div1 Follows</h2>
<div id="div1">
This is where my first div will be.
</div>
<h2>Div2 Follows</h2>
<div id="div2">
This is where my second div will be.
</div>
</div>
<script type="text/javascript">
function hideAll() {
var myDivs = Array('div1','div2') // Add each div ID to this array
for(var i in myDivs) {
if(document.getElementById(myDivs[i])) {
document.getElementById(myDivs[i]).style.display = 'none';
if(!document.getElementById('linkto_'+myDivs[i])) {
var myLink = document.createElement('a');
myLink.id = 'linkto_'+myDivs[i];
myLink.href = '#'+myDivs[i];
myLink.onclick = function() {
showDiv(this.href);
//return false; //uncomment this line and comment or remove the next line if you don't want the page to jump to the revealed div when the link is clicked
return true;
};
myLink.appendChild(document.createTextNode('Expand this entry'));
document.getElementById(myDivs[i]).parentNode.insertBefore(myLink,document.getElementById(myDivs[i]).nextSibling);
}
}
}
}
function showDiv(what) {
hideAll(); // Comment this line out if you don't want the rest of the divs to be hidden when you reveal a new one
what = what.split('#'); // If our div name/ID includes the hash symbol, we'll split it at that point
what = what.pop(); // The function above turned our div name/ID into an array. This will grab the last element of the array
if(document.getElementById(what)) {
document.getElementById(what).style.display = '';
if(document.getElementById('linkto_'+what)) {
document.getElementById('linkto_'+what).parentNode.removeChild(document.getElementById('linkto_'+what));
}
}
}
hideAll();
if(window.location.hash) {
showDiv(window.location.hash);
}
</script>
</body>
by Preview- Sent (0)
- New
Save up to 630$ when buy new iPhone 15
GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project
https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools
chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language
Dall-E-OpenAI.com
Generate creative images automatically with AI
AIVideo-App.com
Render creative video automatically with AI
Cool Domains for Sale!
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:
Curtiss [more]
18,611
0
4
0
10.8 KBytes
4 votes / 18,611 previews / 0 comment
25/05/2010
This JavaScript tutorial guides you to build a JavaScript code for hiding and showing the HTML elements on the web pages...How to toggle Elements with JavaScript - How to toggle Elements with JavaScript - Language: English
