jQuery DropDown Item
I'm a little new to jQuery in general - I'm trying to basically write a <div> that, when clicked, will drop down with another <div> layer below it - ( and alternatively close back when clicked again ).
Is this possible using jQuery without any excessive plugins or suites?
An example would be Invision Power Board 2.3 - on a post view - if you click a username, it drops down with all of their information.
Is this possible using jQuery without any excessive plugins or suites?
An example would be Invision Power Board 2.3 - on a post view - if you click a username, it drops down with all of their information.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
if you look closer, prev is initially a global variable set to null. Thus, the first time that either John or Jane gets clicked the if is NOT executed because prev is null.
Immediately after that, the global variable prev obtains a reference to the element that follows the label you clicked. To clarify, in this statement:
prev = $(this).next().get(0);
$(this) => the element you clicked on - namely the div that contains either John or Jane
$(this).next() => the element that follows the div that contains John or Jane (which you just clicked)
By default, $(this) will NOT return a jQuery object, NOT a DOM object. **To get the DOM object, use .get() method. So essentially, prev now contains a reference to the DOM object that follows the element that contains either John or Jane.
Lastly, the last line will toggle whatever prev refers to. So, if you initially clicked on John, then prev refers to the div that contains "Details for John" and since it is initially hidden, then "toggle" which is a jQuery built-in method, will change its visibility.
After the first execution, prev is NO longer equal to null, so the next time when you click on Jane, the if statement sees that prev is no longer null and will execute:
$(prev).toggle("slow");
Because of the previous call prev still contains the last thing that was toggled - "Details for John". So now, you "re-toggle" whatever is in prev to hide what you previously expanded. THEN you continue to update prev what whatever you clicked NOW. The process repeats.
**Strictly speaking, you do NOT have to save the DOM object in the prev variable. You can just save the jQuery object and use it directly instead (see updated example).
>>Is this just the code for toggling between the two?
Yes, but that is because I included only TWO "sets/groups" of labels-details elements
>>What performs the actual dropdown?
the toggling
How could I make use of this if I had any sort of styling and the next DIV layer was not the layer I needed to show?
You can change the DIV to any element you want. By now, it should be clear that next() simply gets the element that follows "John", regardless of whether it is a div or not (also reflected on updated example).
Immediately after that, the global variable prev obtains a reference to the element that follows the label you clicked. To clarify, in this statement:
prev = $(this).next().get(0);
$(this) => the element you clicked on - namely the div that contains either John or Jane
$(this).next() => the element that follows the div that contains John or Jane (which you just clicked)
By default, $(this) will NOT return a jQuery object, NOT a DOM object. **To get the DOM object, use .get() method. So essentially, prev now contains a reference to the DOM object that follows the element that contains either John or Jane.
Lastly, the last line will toggle whatever prev refers to. So, if you initially clicked on John, then prev refers to the div that contains "Details for John" and since it is initially hidden, then "toggle" which is a jQuery built-in method, will change its visibility.
After the first execution, prev is NO longer equal to null, so the next time when you click on Jane, the if statement sees that prev is no longer null and will execute:
$(prev).toggle("slow");
Because of the previous call prev still contains the last thing that was toggled - "Details for John". So now, you "re-toggle" whatever is in prev to hide what you previously expanded. THEN you continue to update prev what whatever you clicked NOW. The process repeats.
**Strictly speaking, you do NOT have to save the DOM object in the prev variable. You can just save the jQuery object and use it directly instead (see updated example).
>>Is this just the code for toggling between the two?
Yes, but that is because I included only TWO "sets/groups" of labels-details elements
>>What performs the actual dropdown?
the toggling
How could I make use of this if I had any sort of styling and the next DIV layer was not the layer I needed to show?
You can change the DIV to any element you want. By now, it should be clear that next() simply gets the element that follows "John", regardless of whether it is a div or not (also reflected on updated example).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.label{font-size:120%;font-weight:bold;}
.details{display:none;}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var prev=null;
$(function(){
$(".label").bind("click",function(){
if(prev)
{
prev.toggle("slow");
}
prev = $(this).next();
prev.toggle("slow");
});
});
</script>
</head>
<body>
<div>
<div class="label">John Doe</div>
<div class="details">Details for John</div>
</div>
<div>
<div class="label">Jane Doe</div>
<div class="details">Details for Jane</div>
</div>
<div>
<div class="label">Jill Doe</div>
<p class="details">Details for Jill</p>
</div>
<div>
<div class="label">Jake Doe</div>
<ul class="details"><li>Details for Jake</li></ul>
</div>
</body>
</html>
ASKER
So I wouldn't have to use prev/next? For example, in jQuery's Tab UI, you elect the divs to use based on bookmark links (#item). Is there any way to toggle things in this manner?
When styling a page, it's often difficult to always put things like this side by side in every situation one might want - I'm just trying to fully understand what the limitations are for when thinking of the HTML for it. This is extremely helpful, I appreciate your help!
When styling a page, it's often difficult to always put things like this side by side in every situation one might want - I'm just trying to fully understand what the limitations are for when thinking of the HTML for it. This is extremely helpful, I appreciate your help!
>>So I wouldn't have to use prev/next? For example, in jQuery's Tab UI, you elect the divs to use based on bookmark links (#item). Is there any way to toggle things in this manner?
I don't know what you are referring to. Not familiar with Tab UI.
On the example I posted, the only things that need to be "next to each other are the element that contains the label AND the element that contains the content/details for that label. However, if you need to "move them" as a unit, you need an enclosing element that holds both. That's why I use four sets/groups of divs, each of which contains a label and the details. Each of these sets do NOT have to follow each other. You can position them around the screen independently of each other.
Read comments on code below. Experiment - you will learn more by making mistakes.
I need to attend other things so this was my last post on this matter.
Best of luck.
I don't know what you are referring to. Not familiar with Tab UI.
On the example I posted, the only things that need to be "next to each other are the element that contains the label AND the element that contains the content/details for that label. However, if you need to "move them" as a unit, you need an enclosing element that holds both. That's why I use four sets/groups of divs, each of which contains a label and the details. Each of these sets do NOT have to follow each other. You can position them around the screen independently of each other.
Read comments on code below. Experiment - you will learn more by making mistakes.
I need to attend other things so this was my last post on this matter.
Best of luck.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.label{font-size:120%;font-weight:bold;}
.details{display:none;}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var prev=null;
$(function(){
$(".label").bind("click",function(){
if(prev)
{
prev.toggle("slow");
}
prev = $(this).next();
prev.toggle("slow");
});
});
</script>
</head>
<body style="position:relative;">
<!-- This OUTER div contains TWO element div: 1 for the label, and one for the details of that label. Thinks of this outer div as being a group or set. IF you style this div, you can then position both the label and its content wherever you want on the screen. -->
<div style="position:absolute;left:0em;top:5em;">
<div class="label">John Doe</div>
<div class="details">Details for John</div>
</div>
<!-- This is here just to show that these "sets" don't need to follow one after the other -->
<p>He</p>
<!-- This is another set. WITHIN the label and/or details divs, you can also use more html markup and I will still work. Then only thing
you need to be careful is to provide the proper structure for each "set":
set container element
label container element
details container element
-->
<div style="position:absolute;left:5em;top:10em;">
<div class="label"><h1>Jane Doe</h1></div>
<div class="details">Details for <strong style='color:red;'><span style='font-size:130%;'>J</span>ane</strong></div>
</div>
<p>Hi</p>
<div style="position:absolute;left:10em;top:15em;">
<div class="label">Jill Doe</div>
<p class="details">Details for Jill</p>
</div>
<p>Ho</p>
<div style="position:absolute;left:15em;top:20em;">
<div class="label">Jake Doe</div>
<ul class="details"><li>Details for Jake</li></ul>
</div>
</body>
</html>
ASKER
if(prev)$(prev).toggle("sl
prev = $(this).next().get(0);
$(prev).toggle("slow");
Is this just the code for toggling between the two? What performs the actual dropdown? How could I make use of this if I had any sort of styling and the next DIV layer was not the layer I needed to show?