Today I am going to show you how to show and hide elements, with jQuery. What is jQuery? You should
Link to your stylesheet or remove it and add styles in the head section. Style your divs the way you want to.. or download the zip and use those files. Totally up to you. If you don't know how to use css, get out of this thread.
So we have 7 divs. The overall div, which holds everything: menu. We also have alot mof headers and submenus. The headers will trigger the opening and closing of the submenus. Shall we start with the jQuery?
First, you must download
Now insert this in our head.. I mean the html. :laugh:
That starts jQuery sort of.. without it, the code below would do nothing.. well I actually don't know what will happen.
This is the full jQuery code, I'm going to explain it to you, no worries. Add this under the code shown above.
The whole page is in the zip file.
This is a requirement, meaning without it, the code after it would be useless.
This tells the browser to hide all elements with the class 'submenu', our submenus.
That tells the browser this: when I click the element with the id, header1, header2, or header3, open the submenu(with the same number as the header) and close the others.
Understand? All files included in the zip. If you want me to explain more, just reply and I'll do it. By the way,
You must be registered to see links
. First we are going to need the basics, the html.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Practice</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="menu">
<div id="header1" class="header">First Header</div>
<div id="submenu1" class="submenu">Content here.</div>
<div id="header2" class="header">Second Header</div>
<div id="submenu2" class="submenu">Content here.</div>
<div id="header3" class="header">Third Header</div>
<div id="submenu3" class="submenu">Content here.</div>
</div>
</body>
</html>Link to your stylesheet or remove it and add styles in the head section. Style your divs the way you want to.. or download the zip and use those files. Totally up to you. If you don't know how to use css, get out of this thread.
So we have 7 divs. The overall div, which holds everything: menu. We also have alot mof headers and submenus. The headers will trigger the opening and closing of the submenus. Shall we start with the jQuery?
First, you must download
You must be registered to see links
. (.js file) If you're wondering why it's a js file, jQuery is like a simpler javascript.Now insert this in our head.. I mean the html. :laugh:
Code:
<script type="text/javascript" src="jquery.js"></script>That starts jQuery sort of.. without it, the code below would do nothing.. well I actually don't know what will happen.
This is the full jQuery code, I'm going to explain it to you, no worries. Add this under the code shown above.
Code:
<script type="text/javascript">
$(document).ready(function(){
$(".submenu").hide();
$("#header1").click(function(){
$("#submenu1").slideToggle();
$("#submenu2").slideUp();
$("#submenu3").slideUp();
});
$("#header2").click(function(){
$("#submenu2").slideToggle();
$("#submenu1").slideUp();
$("#submenu3").slideUp();
});
$("#header3").click(function(){
$("#submenu3").slideToggle();
$("#submenu1").slideUp();
$("#submenu2").slideUp();
});
});
</script>The whole page is in the zip file.
Code:
$(document).ready(function(){
});This is a requirement, meaning without it, the code after it would be useless.
Code:
$(".submenu").hide();This tells the browser to hide all elements with the class 'submenu', our submenus.
Code:
$("#header1").click(function(){
$("#submenu1").slideToggle();
$("#submenu2").slideUp();
$("#submenu3").slideUp();
});
$("#header2").click(function(){
$("#submenu2").slideToggle();
$("#submenu1").slideUp();
$("#submenu3").slideUp();
});
$("#header3").click(function(){
$("#submenu3").slideToggle();
$("#submenu1").slideUp();
$("#submenu2").slideUp();
});That tells the browser this: when I click the element with the id, header1, header2, or header3, open the submenu(with the same number as the header) and close the others.
Understand? All files included in the zip. If you want me to explain more, just reply and I'll do it. By the way,
You must be registered to see links
is an excellent site for learning all sorts of languages. Not programming.
