aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Simple Expand Collapse Jquery Question Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Soft Skills this week in the Jobs Discussion forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Simple Expand Collapse Jquery Question" Watch "Simple Expand Collapse Jquery Question" New topic
Author

Simple Expand Collapse Jquery Question

Michele Smith
Ranch Hand

Joined: Oct 27, 2010
Posts: 421
I am trying to implement a simple little expand collapse. I wondered if anyone has a suggestion. It is not working in IE9 and it is not working in Firefox. -- Thanks, Michele


Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61761
    
  67

Problem #1 (not saying that there aren't more) is that your jQuery code is not in a ready handler. So it's executing before the elements it's supposed to instrument even exist.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Michele Smith
Ranch Hand

Joined: Oct 27, 2010
Posts: 421
I put the entire jquery script into the same folder as this html and it does not work referenced as a relative link.

Any suggestions?

Thanks,
Michele
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61761
    
  67

How you import the code is irrelevant to the problem I've addressed.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61761
    
  67

P.S. It's not recommended to mix the scripts (or images or stylesheets) with the HTML/JSP files. Neither is page-relative addressing recommended.
Michele Smith
Ranch Hand

Joined: Oct 27, 2010
Posts: 421
Is this better?

Wrap your code in a document.ready callback to ensure that the elements are present in the DOM before you try to operate on them:


If it is better, where should I put this relative to the javascript function? Should it be at the beginning or at the end?
Michele Smith
Ranch Hand

Joined: Oct 27, 2010
Posts: 421
Also Bear, in regards to your comment, I agree with you it is better to separate the css and the js but I am putting it all together so you can see it and also I am testing it on my local machine before implementing the code into the project. Thanks, Michele
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61761
    
  67

Michele Smith wrote:where should I put this relative to the javascript function? Should it be at the beginning or at the end?


I'm not sure what function you are asking about, but the declaration of the ready handler can go anywhere in a script block. And you can have more than one ready handler.

Some people place the script block(s) in the <head>. Some put it at the end of the body (which arguable has performance benefits depending upon who you ask).

The important thing is to make sure that any jQuery statements that manipulate DOM elements are within the ready handler so that they do not execute until after the elements have been created.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61761
    
  67

Michele Smith wrote:Also Bear, in regards to your comment, I agree with you it is better to separate the css and the js but I am putting it all together so you can see it

For me, that just makes it harder to inspect the code. I'd personally prefer to see the CSS and structure posted separately. That's the way I write code, and am more accustomed to perusing. Others' mileage may vary.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Simple Expand Collapse Jquery Question