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!

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:

$('div.demo-show')
  .children('div').hide()
    .filter(function() {
      var filename = location.pathname.split('/').pop();
      filename = filename.split('.')[0];
      return this.id == filename;
    }).show();

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.

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!

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

h3 {
  cursor: pointer;
}

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.

It looks like you’ve figured it out. At least, it looked like it was working when I checked it out.

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.

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. :)