Solved

jQuery DropDown Item

Posted on 2009-07-06
5
421 Views
Last Modified: 2012-05-07
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.
0
Comment
Question by:veruthandai
  • 3
  • 2
5 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 24789486

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

Author Comment

by:veruthandai
ID: 24793945
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
 
LVL 82

Expert Comment

by:hielo
ID: 24794370
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
 

Author Comment

by:veruthandai
ID: 24794682
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
 
LVL 82

Expert Comment

by:hielo
ID: 24805274
>>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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now