More Showing, More Hiding
read 204 commentsWe've received a number of comments recently from people looking for variations on the showing and hiding theme. For the basics, you can take a look at two earlier entries, Basic Show and Hide and Slicker Show and Hide.
For a full-blown plugin solution with lots of options, look no further than Jörn Zaefferer's Accordion Menu. But if you want to try some showing and hiding on your own, read on.
Caveat
In this tutorial, we'll explore a couple ways to show and hide details by clicking on headings. I recognize that there are many ways to mark up the HTML for this sort of thing, and many more ways to write the JavaScript/jQuery. Even the functionality can vary greatly, depending on your needs. Some common variations include:
- each detail shows and hides independently of others
- one and only one detail visible at a time
- either no detail or one detail visible at a time
We'll take a look at the first two variations this time, and the third in a separate entry (so that I can get something posted more quickly).
The Setup
As with any jQuery script, we need to include the jquery.js file and our custom script file in the <head>, like so:
- <script src="/js/jquery.js" type="text/javascript"></script>
- <script src="/js/more-show-hide.js" type="text/javascript"></script>
It's important to include jquery.js before any other files that use it. Also, you may need to change the path to match your site's structure.
For the elements to show and hide, we'll use a simple <h3> / <div> structure:
- <div class="demo-show">
- <h3>Title 1</h3>
- <div>Lorem...</div>
- <h3>Title 2</h3>
- <div>Ipsum...</div>
- <h3>Title 3</h3>
- <div>Dolor...</div>
- </div>
Now let's add to that a little CSS to shape things up a bit:
- .demo-show {
- width: 350px;
- margin: 1em .5em;
- }
- .demo-show h3 {
- margin: 0;
- padding: .25em;
- background: #bfcd93;
- border-top: 1px solid #386785;
- border-bottom: 1px solid #386785;
- }
- .demo-show div {
- padding: .5em .25em;
- }
Finally, we can get to the scripting.
Option 1: Independent
Remember, this is the option that allows each detail section to be shown or hidden independently of the others. It's also the easiest of the three to accomplish.
The key method we'll be using here is .slidetoggle(), an excellent little effect that slides the matching elements down when they are hidden and slides them up when they are visible. But before we do that, let's make all of the detail sections hide when the DOM is ready:
Line 2 gets every <div> that is a child of the first <div class="demo-show"> and hides them. I'm using :eq(0) here because I'll be showing two show-hide examples that use the same class, but we're taking the examples one at a time.
Now, we can bind a click handler to each <h3> that is a child of <div class="demo-show">. You can see this in line 3 below:
All that's left is to drop the .slidetoggle() method inside the click method. Since we know that each <div> that we want to toggle appears next to each <h3> that might be clicked, we can use the handy .next() method (line 4):
- });
- });
I used the "fast" option for the duration of the slide, but we also could haved used "slow" or "normal" or a numeric value for the number of milliseconds.
Try out the demo. See how a click on each <h3> will show or hide the next <div>, independent of the others:
Title 1
Title 2
Title 3
Option 2: One and Only
Let's move on now to the scenario in which we want one detail <div> at all times, but no more than one. The first thing we'll need to change for this one is the line that hides all of the child <div>s of <div class="demo-show">. We'll make it hide all but the first <div>:
Again, we add an :eq() to the containing <div> selector, this time with 1 as the index, because we want our second demo (and because JavaScript numbering starts at zero).
Next, we add the same click handler for the <h3> elements, but this time we need to change the effects that take place within it:
Line 4 above slides down the <div> that follows the clicked <h3> by using $(this).next(), but only if that <div> is hidden (:hidden). Also, now that we've chained .next() onto $(this), we've changed the context to that following <div>. So then in line 5 when we refer to .siblings(), we're actually getting the siblings of the <div>. Since out of all the siblings we only want to slide up the slides up the ones that are visible <div>s, we use .siblings('div:visible').
Give demo #2 a whirl:
Title 1
Title 2
Title 3
There you have it—two fairly straightforward examples of showing and hiding elements on a page. Next time we'll take a look at two ways we can implement the third variation on the showing-and-hiding theme: having either no detail or only one shown at all times.
Karl,
This page - http://www.quartershoa.org/test_categories1# - is working ok but I'd have to write 7x more jquery code for the full requirement. The content will be filled from a database by a loop routine, including the ids. What jquery technique would I use to return the id that's clicked on to the jquery object so I can eliminate having to write jquery code for each id. Many thanks for your help...Jim
Hi Jim,
Instead of giving each of those divs a unique class, give them a common class (for example, "cat"). They already have a unique id. Then, I'd remove the <div id="cats">, because it seems superfluous and it doesn't even wrap around the first table.
Give a class of "expand" to all the links for which you want to expand content underneath and a class of "collapse" to the ones for collapsing the content. Then you just need to use jQuery's DOM traversal methods to access the div that immediately follows the table in which a link was clicked.
So then your script might look something like this:
Hi Karl,
Your advice on use of Collapse and Expand classes in response to my 11/6 message did the trick! It was a good lesson for me in the power of chaining. Jquery is a powerful tool and, for me, learning it requires an adjustment to the traditional thinking process in solving a problem.
If you were next to me, I'd give you a big hug! You are an invaluable resource, and I greatly appreciate your responsiveness and how generous you are with your time...Jim
Hmm, a little tricky to understand for an norwegian newbie like me, but I think mainly understood it.
But I still have a few questions, just to clear out some of my missunderstandings.
To begin with, what is thesecond script for? do I need it?
<code>script src="/scripts/jquery.js" type="text/javascript">
<code>script src="/scripts/more-show-hide.js" type="text/javascript">
and this, where do I put this? somewhere in the <header> right?
<div class="demo-show">
<h3>Title 1</h3>
<div>Lorem...</div>
<h3>Title 2</h3>
<div>Ipsum...</div>
<h3>Title 3</h3>
<div>Dolor...</div>
</div>
And i dont need the css right?
last question, this javascrip thas to be caught inside which tag? And where do i put it?
<code>$(document).ready(function() {
$('div.demo-show:eq(0)> div').hide();
$('div.demo-show:eq(0)> h3').click(function() {
$(this).next().slideToggle('fast');
});
});
Hi Karl,
Thanks for the great work. But is it possible in the second example to hide the already opened div once it's h3 is clicked again?
Thanks
Hi bor,
Yes, take a look at "Option 3: Zero or One" in Accordion Madness.
Hi, thanks for the great tutorial.
Im desperate to create a horizontal accordion, does anyone have any examples?
It needs to open and close on click. Many thanks!!!
am using jquery
to edit profile page its update the database.but in the view page the old record is displaying this problem is only in IE browser .its woring fine in mozila .am using codigniter....plz help me
Hi chenthilf,
I think you'd have more success presenting this problem to the jQuery discussion list. Perhaps you could also provide more detailed information when you post it there.
hello,I have such kind of question...
for example,I have images and divs with ids:
I want to have one button show/hide, which will show or hide only first four divs and images as well...
how can I make this?
Hi dr,
Unfortunately, your comment's code didn't come through. Please read the "important" instructions above the comment field for more information.
I'm having a couple problems which are likely due to my staring at the code too long. Instead of the used in the example code, I'm using a definition list. I'm using the first script example, and trying to do what Jessica did in comment #24, adding an Expand All/Contract All toggle link. However, I'm having several issues with the code (see below) not behaving as I would expect.
The issues are:
1. Hovering over the text doesn't show the text as clickable; in other words, the pointer doesn't change to a hand when hovering over the text. If I click the text, the content does display, but there is no visible way to know the text is clickable.
2. I'm using prepend to create the Expand All/Contract All toggle-all element, and then trying to populate the toggle-all element with the appropriate text.
Here's the script - any ideas what I'm missing?
Here's the markup:
just add : cursor:pointer; to your .demo-show h3 css block
Looks like some of the code didn't make it through. On the line that begins with $("#content, the code should be:
Quick question...
I have the slide working great on my site. The menu is on a Joomla based site. The only problem that I am having is that when viewing certain pages, one of the divs opens on the slide.
None of the links within the slide are linked to these pages.
This is the JS:
$(document).ready(function() {
$('div.demo-show > div').hide();
var hrefParts = location.href.split('=');
var thisPage = hrefParts[hrefParts.length-1];
$('div.demo-show div:has(a[href*=' + thisPage + '])').show();
$('div.demo-show > h2,h3').click(function() {
$(this).next('div').slideDown('fast')
.siblings('div:visible').slideUp('fast');
});
});
This is the CSS:
.demo-show {
width: 219px;
margin: 0px;
}
.demo-show h2 {
margin: 0;
height: 43px;
}
.demo-show h3 {
margin: 0;
height: 30px;
}
a img {border: 0px; }
a:hover img {border: 0px ; }
a:visited img {border: 0px ; }
.demo-show div {
padding: 6px 15px 6px 15px;
background:url("http://www.watchdogproject.us/templates/SCtIR_Template_01/images/Nav/slide_nav.gif") repeat-y;
color: #3e3e3e;
font-size: 10px;
width: 189px;
}
ul.list {list-style-type:none; margin: 0px; padding: 0px; line-height:14px;}
li.bullet {background: transparent url("http://www.watchdogproject.us/templates/SCtIR_Template_01/images/Nav/circle.gif") no-repeat scroll 0px 3px; color:#212121; padding-left:13px; padding-bottom: 4px;}
.demo-show a {font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 10px; color: #3e3e3e; text-decoration: none;}
.demo-show a:link {font-weight: bold; color: #3e3e3e; text-decoration: none; }
.demo-show a:hover {font-weight: bold; color:#791e00; text-decoration: none;}
.demo-show p {margin-top: 10px; color:#04224f; line-height:14px; font-size: 10px;}
element.style {
poisiton: static;
}
Last thing, it works perfectly on a non-Joomla site.
Has anyone figured out how to disable jquery (show all hidden elements) when printing the page? I believe this question was raised a couple times earlier in this post.
Sorry for the double post... this goes with my post above. Here is the code I'm using and would like to "disable" for print:
To create on function in javascript. When we write tag in body,then one rouend corner square is automatically display in body.
slideToggle("slow") in jquery-1.2.3.min flickers on IE7 (7.0.6000.16609, Vista), whereas it works perfectly on FF2 (2.0.0.12, Vista):
Just before sliding down, the DIV fully displays for a split second. The same when on sliding up, but here the DIV is fully displayed for a split second just after it has finished sliding. Additionally, the contents of the DIV shifts down after the DIV has been fully opened. Here's a test page:
This is a great tutorial and it safe me from getting some to code this for me
Hi there,
Does anyone know of a way to have an image that when you rollover it, it fades into another image?
Additionally, I would like the fade to be fast onmouseover and slow onmouseout.
I have tried this lots of times and the issue that I keep getting is that I have to let the fades complete before you can initiate the fade again. In other words if I set onmouseout fade to 'slow' if I rollover the image again before this 'slow' fade has completed, nothing happens.
I would like to know if there is a way to interrupt the fade so that if it half complete, the fadeOut is stopped and immediately starts the fadeIn
My pathetic attempts are:
Here!
And the .js file is:
Here!
It is cluncky, to say the least.
ANY help would be great.
Thanks.
Hi Nat,
Have you tried checking to see if the element is already animated? Given your HTML, it would look something like this:
Also, note that I used class names instead of repeating the code for each id.
Thanks for that.
I replied to your jQuery Google Groups message too.
I posted there because I thought that more help was better than less!
Can I ask, what does:
$('> .fade',this);
this part do?
Nat.
Hi Nat,
That selects the element with a class of "fade" that is a direct child of the hovered element. It could be written this way as well:
$(this).children('.fade')Hi there Karl,
Thanks for all the help with this.
That was great how you used the classes to cut out lots of code, thanks.
I've got to sort this 'cos my mates all think that jQuery CANNOT do this. They think that I will end up having to resort to doing this the long way round with JavaScript and using 'setInterval' and 'clearInterval'.
I want to prove them wrong!
The big sticking point though, is that I can't get the .hover to interupt the fade out.
I have currently set the fade out to 6000 so that it is clear whether or not the fade out can be interupted by placing the mouse over the images.
Here is what it looks like.
Here is .js with lots of commented out attempts.
The
if (!$fade.is(':animated')does not seem to holt the animation.I am at a complete loss.
I would like it so that onmouseover the alternative image (.out) fades in, and onmouseout this same image fades out. The catch here though is making it so that if you interupt the fade part of the way through, it stops it (.stop()?) and fades in the other direction.
Hopefully..... Much appreciated.
Hi Nat,
I think I have something for you. I changed all of the fade times to 3000 so you can see it working both ways:
This worked on the test page that I put together, so I hope it works for you, too.
That is SO cool.
Thanks. In a strange twist of fate I bought your 'jQuery Reference Guide' today. I have not got it yet, but at least you and Jonathan can know that in this corner of the world there is a man who is truly grateful.
I have, needless to say, stuck it to my mates who said that this was beyond jQuery. They think that you are too clever!
Again, many thanks for sorting this out.
I'm using this code:
$(document).ready(function() {
$('div.demo-show > div').hide();
var hrefParts = location.href.split('=');
var thisPage = hrefParts[hrefParts.length-1];
$('div.demo-show div:has(a[href*=' + thisPage + '])').show();
$('div.demo-show > h4,h5').click(function() {
$(this).next('div').slideDown('fast')
.siblings('div:visible').slideUp('fast');
});
});
The link to the test site is:
http://www.ctbiobus.org/TestSite/BioBus/index.php?page=staff
The problem:
It happens in several cases, but for instance, click on "About", then click on "sponsors", the menu opens in two places. I was debugging it, and it happens in places where the sub menu links do not point to the same place.
Any suggestions?
Hi Dustin,
I think you're seeing that problem because both of those hrefs have "sponsors" in them. One has
?page=sponsorswhile the other has?page=sponsorships. To avoid the problem, try usinghref$=rather thanhref*=.Hope that helps.
Hi,
Great script and works well, but I have a question :)
I have used your script to create a menu for one of our new sites. You can see it on http://lic.iuvo.tv/ . The problem is that only Undergraduate and Postgraduate menu items have sub-menus.
I am using the following structure for the menu:
The javascript is:
I want it to work so that clicking on a menu item without submenu, such as title 1, would only trigger close for any open submenu. Is this possible?
Thanks!
Hi Anton,
It looks to me like it's doing what you want it to do. Am I misunderstanding something?
thank you very much!
it works!
Karl,
It does, but if you click on of the links with no submenu and then on the one with submenu there is a delay as if it is trying to close the empty dd tag before opening a new submenu.
Okay, Anton. So, you basically want to do something different if the next dd element has nothing in it, right? If that's the case, then this should do it:
Thank you Karl!
Hello,
first of all - thank you very much for the script.
But it only seems to work if I have 3 sections as in the sample. I'm working with 12 's and nine after the first 3 are just open, like plain text.
(I don't know js, can't you tell?!) Thank you in advance :)
Oops, i meant 12 "div's" (it got cut off)
Please delete my previous 2 comments as I found that I had an extra that messed it all up!
Again, thanks a ton for the script and tutorial.
hi i have some problem using this script..
in ff all works perfect, in ie7 almost fine..
but in ie6 this works terrible! but still it works :D i mean there are showing whole hidden divs just before slidiing(in-out).. for a short time, but still.. then after that it is sliding correctly..this make a lot of chaos!!
please check out: http://www.rocard.pl/katalog.php
any ideas?
Hello, In the second example, how can I make toggle effect on the Title that is opened - I want it to slide up when I press on it. Thanks in advance.
Hi, everything works great except I would also like a toggle all so that it opens them all at once and closes them all, how would you do this?
Hi,
Thank you for the script it is great.
I have a little problem with UTF-8 charset though and was wondering if you know why.
I have uploaded 2 examples at http://s.ocsia.com/layout/ and http://s.ocsia.com/layout-2/
Layout 2 uses UTF-8 and the menu stops working right away.
Hi,
I have a 'simple' question but I can't figure it out...
We are using demo #2 with the titles 1 2 and 3:
When the page loads, the 3 text associated to the titles are closed and you need to click on one of the titles to make the text appear. How can we make one of the tabs open when the page loads. We do not know which one will be open and we do not know how many items there will be on the page.
Also, how can we create a link that will automatically open one of the tabs without the actual H3 being clicked?
Any assistance would be greatly appreciated.
Thank you,
--
Y
Nice tutorial. Good way to demonstrate some more advanced selectors.
n00b question:
As with any jQuery script, we need to include the jquery.js file and our custom script file in the , <--- where can I download your custom more-show-hide.js?
I downloaded http://ui.jquery.com/download_builder/ with Accordion widget and slide effect but it doesn't work
Thanks
Hi,
Thanks, this is very powerful. Just wondering if there is any way to apply these effects on tables? How to show hide some lines?
Thanks
Sorry didn't read properly... Here is the htmp code
Untitled Document
features
Product 1
Product 2
A
a
a
B
b
b
C
c
c
D
d
d
Here is what I do to apply it to tables, but the result is not good:
Could you please tell me how it could be improved??
OK, I am not a PRO, you could include a preview to avoid this kind of mistake, hope my mistakes will be removed. What I want to do is a table with some toggle to hide and show lines.
Great article.
Using #25 example above works well, but when a h3 (that is visible) is clicked the h3 background is changed (as per the code).
Any ideas on how to prevent this? I don't want the toggleclass to fire if the h3's sibling div is visible.
Here's the code.
Thanks!
$(document).ready(function() {
$('div.demo-show:eq(1)> div:gt(0)').hide();
$('div.demo-show:eq(1)> h3').click(function() {
$(this).toggleClass('opened').next('div:hidden').slideDown('fast')
.siblings('div:visible').slideUp('fast');
});
});
.demo-show h3 {
padding-left: 20px;
background: url(/images/closed.gif) no-repeat 2px 50%;
}
.demo-show h3.opened {
background-image: url(/images/opened.gif);
}
Mmmmm, not really explaining things too well in the post above.
Basically I need to check if a sibling div is visible. If it is then I don't want the toggleclass to fire. Otherwise, the background image on the h3 changes but the sibling div doesnt show or hide (as it's already visible).
Hope this is a better explanation. Can anyone help? Thanks v.much!
Hi Karl,
I did everything that you mentioned in this tutorial and couldn't get it to work at all, first of all, all the divs were showing, and then I changed the div to have a style="display:none" in the second two and then tested it and still no effect..??
Have I done something wrong here??
Cheers
Phil
@samy, table rows are notoriously problematic because browsers assign to theme different display values by default (block or table-row, typically). Try doing the same thing but without the speed argument for the toggle method. Instead of
.toggle(400), just do.toggle()@Meander365, to check the next sibling's visibility, you could do something like this:
@Philip, Yes, you're surely doing something wrong. I can't tell you what, exactly, you're doing wrong, though, without some more information. Can you give us a link to a test page that we can look at for you?
Hi Karl,
This is where i put the files for testing the above example, can you please help me out as I want this to work and I am really getting into the jquery stuff and the amount of amazing things you can do with it...
http://maticdesign.com.au/samplehideshow.html
Cheers
Phil
?;-p
Hi Phil,
The problem is that you've copied the code exactly, but your HTML doesn't match exactly. This part of the selector --
div.demo-show:eq(1)-- matches the second div with a class of "demo-show". Your HTML has only one div with an id of "demo-show". Try changing your script to look like this:Karl,
you were right!! Thanks a bunch.. you are a legend!!
Cheers
?;-p
Hi Karl,
I'd love to use this application in some of my sites, but I can't seem to figure out how to automatically show my content when the window loads and then use the toggle to hide my content (slide it up and out of view). Is this possible? I'm trying to use .show() but it is not working. Am I missing something really simple here? Can you please give me some guidance?
Thanks!
Jason
Hi Jason,
I'm not familiar with the toggleElements() method. It's certainly not in jQuery core. Maybe you could just use the basic slideToggle() method? I suspect that toggleElements() is a plugin of some sort that forces an initial hidden state.
Karl,
I just realized that I my question on the wrong page! So sorry! I'll post my question on the appropriate page.
Thanks!
Thanks for this source.
This is so much more elegant and concise than what I was doing before. Let's just say it involved individual class names for each box on the page I wanted to collapse/expand and way too much code :).
I do have a question; I can't quite seem to figure out what's going on. I basically have a bunch of boxes on the page that I want the user to open/close as they wish. I'd like the arrow indicator to change as well. I'm almost there:
So if I have this, the class is toggled just fine (arrow changes), but nothing slides up or down. If I change the .clickfunction to just the .box_head div then the sliding works, but the class doesn't change. I can't get them both to work at the same time!!! Please help me I have no idea what I'm doing :).
Thanks!
I have been tasked to build a website for a client which has a map on one of the pages, clicking the hotspot areas on the map would show different addresses (one at a time), I would like to use jquery for this as I am a designer not a coder, but would like to know if this is possible as the map (using image map to get hotspots) is in one part of the screen and the addresses need to show on another part of the screen?
Thanks.
took me a while cause I have different HTML for my page and it's generated by PHP, but I finally figured it out! the this() and next() functions you used were what made it doable. THANKS for the tutorial
brent@
mimoYmima.com
I am new to jquery. The expandable / collapsible div example here applies perfectly to what I need to do.
What I am missing is how to add persistence so that when the page is reloaded, the browser will remember the state of each div (expanded / collapsed).
I would greatly appreciate if anyone has a working example to point me to.
Thanks!
Hi Max,
One way to add persistence is to use cookies. View source on this page for an example.
Hi Karl,
Thanks for your post! I got the cookie to work fine!!
I have one more little question... and you can refer to the code at:
http://pastebin.com/f2c239f1a
I added + & - to the div to help the user understand it is possible to expand or collapse it. With the previous version these buttons worked well, but now it is as if the buttons are activated after clicking 2 or 4 times... so first the button is a +, I expand and it will remain a +, then I collapse and the msg_head becomes unstyled, I click again and it gets a -.
I hope it is possible to understand my explanation.
Summarizing, cookies work fine, but I have a problem with toggleClass.
Thanks again :)
Hi there. Great tutorial. Can somebody please please tell me where I might actually find the more-show-hide.js file that everybody seems to be using? I learn well by example and really need to know where this lives...Thanks!
Hi Penny,
Sorry about that. You can find the code at http://www.learningjquery.com/js/more-show.js.
How to fix the lenght of the div, and if contents which are to be displayed require more space how can we add scroll bar within this, is it possible?
Hi xeeshan,
You can do this in your stylesheet by setting an explicit height for the div and setting
overflow: auto;I'm new, and having some difficulty isolating slides. I have a lot of
divelements with the same class. And all of them slide during the click. Lastly, theaclass that sparks the toggle appears after my slidingdivin the markup - does that matter? What would I do instead ofnext(), as cited in your independent example. Thank you!!!!!!!!!!!!!Hi James, unfortunately, I can't help much without more information. Do you have a test page I can look at?
Excellent - here you go: http://jcollinsmedia.com/krs/gov/
Click "More info" and you'll see my errors. As you can tell I'm not capable of getting anything to act independently. The images ("More info" and "OK thanks") won't even toggle independently. I appreciate your time very much!!!
Hi James,
Take a look at the code below. Although the script and the html could be improved further, this should at least get things working for you:
The trick here is to use
thisto zero in on the elements you want to act upon.Also, note that I added a
return false;line at the end of the click handler. For accessibility, you should include an href attribute for your links; better yet would be to give each slider div a unique id and use it (with a preceding "#") for the href.Hope that helps.
Perfect - thanks! The "More info" and "OK, thanks" images weren't switching so I changed
hreftosrc. That worked, but I have no idea why. :) Thanks again!!!!!!!Oh, right! Duh, sorry about that. My bad. Images don't have
hrefattributes; they havesrcattributes.You know, another enhancement would be to simply use a CSS background image sprite and toggle
.css('backgroundPosition', '0 0')/.css('backgroundPosition', '0 -36px'), for example.Hi,
How can I do collapse a div if it is toggled (expanded) by clicking in the body, just to collapse .
thanks
In order to prevent "double callbacks" (not really harmful unless you use the Callback to start an Ajax fire, in which case it will query the Ajax URL twice) in FF, Opera and other modern browsers it's better to do something similar to:
$(($.browser.msie===true?'html,body':'html')).animate({scrollTop:$("div#ele").offset().top},speed,callback);I noticed this when I was creating complicated firebacks for Ajax based on events (to prevent firing too many animations and Ajax calls at once), it would call the page queries twice in a row, originally I thought it was me till I noticed that Firefox and Opera was animating both html and body. So I changed it to detect IE which requires html,body and then let every other modern browser animate html.
Can this be done with a table? I have a table with multiple rows and after each row I need to have another row that is hidden.
But slides out when you click a button.
Be careful with sliding table rows. Firefox will mangle it because of how the display property is reset on completion. Better to use fadeIn or show (without a speed).
Hi all,
please help me!
I made a dropdown list using JQuery :::>
jQuery('#list_123456789').accordion({active: true,alwaysOpen: false ,animated: 'easeslide',alwaysOpen: false , event:'mousehover'});
please help me out how to shrink all expansions after a while automatically ????
Cheers (",)
Hello, I am trying to create a "drop-down" advanced search widget that activates and deactivates on .'hover'. I am having issues with the select elements of the search control activating the hover and the div then closes. Is this possible to do with jQuery? I have even tried putting the form in an iframe with still no luck :(
Here is the jQuery I used:
$('.searchWidget').hover(
function() {
$(this).find
(".topSearch").show();
},
function() {
$(this).find
(".topSearch").hide();
});
And the HTML:
<div class="searchWidget">
<div class="topSearchTab">Advanced Search</div>
<div class="topSearch" style="display:none">
[LENGTHY FORM HERE with selects and inputs]
</div>
</div>
Karl,
Thank you very much for the elaborate example.
what a great example from a noble guy.
Thanks again,
Hunter
Thank you for the great work! Greatly appreciated! :)
So how do you make the first div immediately visible when the page load? Right now, all the divs are hidden when the page load until the h3 links are clicked.
Look at Option 2. It uses this line:
$('div.demo-show:eq(1) > div:gt(0)').hide();Hi Karl,
I'm using option 1 - Independent. What would I need to remember the state of the accordion? Lets say a user clicks to hide a div, then they move to another part of the site. Then they come back. How can I do it so that it remembers that state of that div?
On December 14, 2008 a user asked a similar question and you gave him a link, but unfortunately that link is no longer in service. Any ideas would be appreciated.
Hi Adrian,
sorry about the dead link. I've just restored the page. View source to see what I did.
This solution does not seem to be working with ie6. My company uses all ie6 and was wondering if you could help me modify the cookie solution to remember a state in ie6.
Thanks
I, too, am having trouble getting the cookie’d version to work in IE7 or IE8. Any ideas?
Sorry, guys. I must have misconfigured the path option. Should be working now.
Actually this piece of code isn't working:
$(document).ready(function() {
$('div.demo-show:eq(1)> div:gt(0)').hide();
});
It isn't hiding the second and third div, or I'm doing something wrong here?
You may have to adjust the selector expression depending on the HTML structure of your own page. The one you copied and pasted is referring to all divs except the first that are children of the second div with a class of "demo-show." I'd recommend using your own HTML, with IDs and classes that make sense for your page.
I'm not good at all at programming but I made it work with a bit different code than yours :)
Here is the JQuery part:
$(document).ready(function() {
$('div#accordion:eq(0) > div:gt(0)').hide();
$('div#accordion:eq(0)> h3').click(function(){
$(this).next('div:hidden').slideDown('fast')
.siblings('div:visible').slideUp('fast');
});
});
And the HTML part:
Menu 1
Some text goes here...
Menu 2
Some text goes here...
Menu 3
Some text goes here...
As you can see I just changed the eq(1) into eq(0)
Right. And you also changed the class selector to an ID selector. Since IDs must be unique anyway, you can simplify this quite a bit:
Well that was enlightening for a newbie. Thanks Karl!
I noticed I was getting a bit of a jump in my animation - just before the inner div was completely revealed (at maybe 80% visibility).
I added a height via CSS to the inner div and it smoothed things out.
My question - is there a way to dynamically check/adjust inner div height via jQuery so I won't have to have a set height in the CSS. Basically, check what the height will be and then adjust the animation so the jump doesn't happen.
To say I'm a jQuery beginner is an understatement so forgive me if this is ridiculous. :)
Really Need Help Please.
I'm a newbie when it comes to jQuery. LearningJQuery.com has been a real help in educating me in the wonders of jQuery.
But, I'm lost trying to implement this Hide/Show in a new design.
example http://youthofsuburbia.com/showhidetest.php
For some reason only the first divwrap is being effected (hiding the child div)
And "Show" (tagged with H3) is not making the hidden div visible. It's not even clickable.
the HideShow file is located here http://youthofsuburbia.com/javascript/more-show-hide.js
I made some changes to it. Hope that's not whats breaking it. But I assume since one div is being hidden on load then its working some what, just not sure where the bugs are coming from.
Thank you for any help.
Hi Marshall,
It looks like you've figured it out. At least, it looked like it was working when I checked it out.
Hey Karl,
I figured parts of it out.
I'm still lost on how to get the show/hide text to act like a link.
The example here on LearningJQuery, when you place the cursor over the "Title 1" the cusor icon changes to resemble the same cursor icon that appears when a normal link is hovered (the little hand).
When the text on my page "Show/Hide" is hovered with the mouse the cursor changes to the typical Text Icon. I'm afraid that the cursor not changing people will assume the text is not clickable.
You can set the cursor style with CSS. For example:
Hi,
I'm using the independent show/hide toggle method for the FAQ on this page:
http://www.buttecommunitybankproperties.com/resources/faq.php
I would like to add Show All / Hide All links to the top and bottom of the FAQ that will show and hide all answers at once. I'm stumped. Can anyone help?
Great tutorial. Many thanks.
Vesper
I'm newish to JS but this tutorial was great.
One question though that I have seen asked before but I can't find an answer to. Is there a way to have one of the headings expanded (showing its sub-menu items) when the user clicks to another page? For example...
I click on "Contact" and it expands to show 3 sub categories. I click on one of those categories and am taken to the appropriate page. When I reach the new page, I would like "Contact" to be expanded showing its 3 sub categories below it.
In other words, I don't want to have to keep clicking "Contact" to expand it once I am on one of the contact pages.
Hope that makes sense - Thanks!
HI KR,
Typically in that situation, you would match up an id or class of the expanded categories with the current URL. Here is a really rough example, using classes similar to the ones in the entry:
Notice that I used a filter function. The function returns only the div that has an id matching the file name of the current page, without an extension such as .html or .php. Of course, if your site has pretty URLs with no extension, you wouldn't need the
filename = filename.split('.')[0];line.Karl,
First of all, you are a saint for helping people like me who are new to JQuery!
I was wondering if you meant to include double == at the end of the code. When I added your code exactly as you advised it changed nothing. So I changed that to one = and now all of the sub menus display as expanded on all pages at all times. I have tried many things, including changing 'demo-show' in your code to another name, but I either get nothing or all menus expanded. I am obviously doing something wrong.
I think I'm going to email you a link to my test pages(s) because I don't want them floating around on the internet just yet. If it's something you can quickly look at I would appreciate it, but I TOTALLY understand if you don't have time to solve my problem. Thanks!
Hi KR.
I definitely meant the double equals. That way, the function will return either true or false. Sure, send me a link, and I'll try to take a look.