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.
veruthandaiAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:

<!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().get(0);
				$(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>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
veruthandaiAuthor Commented:
This works pretty well, and I think I can make use of it. I was curious if you could explain a bit more what is going on with the jquery code. Specifically...
 
    if(prev)$(prev).toggle("slow");
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?
0
hieloCommented:
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).

<!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>

Open in new window

0
veruthandaiAuthor Commented:
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!
0
hieloCommented:
>>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.
<!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>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.