[Nublet]

Okay, I'm very new to jQuery but a project I'm doing requires me to use it. So I'm thinking of using it so that when the user clicks my list heading the list drops down. Here's the list I have:



So what I'm saying is, when the user clicks "Albums by Big L, alive and posthumous" the list of his albums drops down. I just have no idea how to do it hehe. Any pointers?

[Martyr2]

Put your <UL> tag inside a div. Give the div an ID attribute. In jQuery there is a function called .slideDown() which you can call on the div when a click is detected on the heading. To start it off though, we want to set the menu to be hidden.

<span id="myheading">Albums by Big I, alive and posthumous:</span>
<div id="submenu" style="display: none;">
   <ul>
     <li>Lifestylez ov da Poor & Dangerous, 1995</li>
     ...
   </ul>
</div>

Then jQuery like this can control the slide down...

$(function() {
     $("#myheading").click(function() {
          $("#submenu").slideDown();
     });
});

Here if we click the heading, we say get the element with ID "submenu" and slide it down. So play with that and you will surely get the idea. If you want the menu to go back up when they click the heading again, check out toggle() and slideUp() methods.

P.S. Here is a fiddle to show you... http://jsfiddle.net/CVUxr/

This post has been edited by Martyr2: 07 April 2013 - 10:25 AM

[Nublet]

Thank you so much! /> I've been lost in this thing for weeks />

This post has been edited by Dormilich: 08 April 2013 - 01:15 AM