The jQuery JavaScript library is something I discovered within the last few months and have been using actively in my current project. I love the ease with which you can traverse the DOM and select elements, add events and enable special effects. It dramatically reduces the lines of code required to perform these tasks and aids the separation of functionality from style.
When you combine this with CSS it can enable you to do amazing things with just a few snippets of code, which I’m going to demonstrate using the presentation of FAQs, something I had to do today.
First the HTML, with the FAQs being styled using a definition list:
<dl id="faq">
<dt>Question 1</dt>
<dd>Answer 1</dd>
<dt>Question 2</dt>
<dd>Answer 2</dd>
</dl>
Then the stylesheet:
#faq dt {
color: #2763A5;
cursor: pointer;
margin: 8px 0;
padding: 0;
}
#faq dd {
border: 1px solid #BABAC0;
padding: 10px 10px 0 10px;
margin: 10px 0 20px 0;
background-color: #FFFFE1;
}
Finally, the JavaScript, written using jQuery syntax:
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown('slow');
}
});
});
Don’t forget to include the jQuery JavaScript library in your <head> which you can download here.
That’s it! Here’s an example.
I tried doin gthe same, but the expand-decompress doesn’t happen. when the page opens, it is in expand option. Please assist.
Hi om, you’re missing the jQuery library from your page. I’d failed to make this clear in my post so I’ve updated it, but you just need to visit http://jquery.com/, download the file and place in the head of your page.
i downloaded the same, and added to the section, yet it doesn;t work.
what next please?
regards
Hi om, I’ve looked at your page, http://www.custbase.com/om/faq.htm, and still can’t see the jQuery file included in the . Is that the page I should be looking at?
Yes, that is right. I was testing local on my machine and didn’t see the change. now i have uploaded the same, yet no change.
i downloaded the jquery file. and remaned to as u had done.
please suggest.
regards
I’ve looked at your page using Firebug in Firefox and it shows that the request for the jQuery file is returning a 404 (Page Not Found) error, so you’ve not referenced the file correctly. Try using the full path to the file.
thanks for your help. i found the problem. the flename was having “jquery-latest.js.js” got it corrected and now all set.