Create a reusable javascript function
<p>At the moment I'm using the below function to perform a simple slide...</p>

<pre><code>function jeans(jean, links) {

$(links).hide();

$(jean).hover(

  function() {
        $(links).show('slow');
    },

  function() {
        $(links).hide('slow');
});}
</code></pre>

<p>And calling it where required with...</p>

<pre><code>jeans('#red-jeans', '#red-jeans ul');
jeans('#blue-jeans', '#blue-jeans ul');
jeans('#yellow-jeans', '#yellow-jeans ul');
</code></pre>

<p>I'd like to be able to perform this by just attaching a class on the parent "#red-jeans". </p>

<p>I'm tring something like</p>

<pre><code>function jeans(selector) {

$(selector 'ul').hide();

$(selector).hover(

  function() {
        $(selector 'ul').show('slow');
    },

  function() {
        $(selector 'ul').hide('slow');
});}
</code></pre>

<p>...but my syntax is atrocious!</p>

<p>If someone can point me in the right direction it would be very much appreciated!</p>

<hr>

<p>The issue is now that the slide runs on every element I've got the class on. Can anyone recommend an amend that would only activate it on the current hover? I presume a (this) is needed somewhere...</p>

<p>Thanks!</p>
