JQuery Beginner Question regarding slide up/down effect

Question

So I tried creating the slide up down effect like in this example

http://paulsturgess.co.uk/articles/show/83-jquery-text-slide-up-slide-down-effect

The problem is..its showing the text when the web page opens

I want the "Paragraph" to be displayed ONLY when mouse is over it and NOT when the page first loads

I am a complete noob to Jquery but I want to make it work

Help?

My script

<script type="text/javascript">

   $(function(){  
  $('.feature_box').showFeatureText();    
})

$.fn.showFeatureText = function() {
  return this.each(function(){    
    var box = $(this);
    var text = $('p',this);    

   // text.css({ position: 'absolute', top: '57px' }).hide();

    box.hover(function(){
      text.slideDown("slow");
    },function(){
      text.slideUp("fast");
    });

  });
}

HTML content

<div>
    <div class="feature_box" align="right">
        <h2><a href="#">Cart Details</a></h2>
        <p>
        <a href="#">Excepteur sint occaecat cupidatat non proident. <BR />
        Qui officia deserunt mollit anim id est laborum<br />
        Excepteur sint occaecat cupidatat non proident. <BR />
        Qui officia deserunt mollit anim id est laborum</a></p>    
    </div>
</div>

What changes do I make so that paragraph doesn't appear by default when the page first loads??

Also, Is the mouse over effect on the div tag or the p tag ? I am a bit confused sorry I am really new to all this..plz help?

[EDIT]

I just made some changes and it didn't display Pragraph when the page first loaded

The following line was commented out

// text.css({ position: 'absolute', top: '57px' }).hide();

Again is the mouse over effect on DIV tag or P tag ??

[EDIT 2]

Is the following line of code containing some function of JQuery or what ?

text.css({ position: 'absolute', top: '57px' }).hide();

What is the "text.css" ???

Answer 1

Well for starters you <p> should be hidden first. <p style="display:none;">...</p>

Here is what your code should look like:

<script type="text/javascript">
    $.fn.showFeatureText = function() {
        return this.each(function(){    
            var box = $(this);
            var text = $('p',this);    
            box.hover(function(){
              text.slideDown("slow");
            },function(){
              text.slideUp("fast");
            });        
          });
    }

    $(document).ready(function() {
      $('.feature_box').showFeatureText();    
    });
</script>

<div>
    <div class="feature_box" align="right">
        <h2><a href="#">Cart Details</a></h2>
        <p style="display:none;">
        <a href="#">Excepteur sint occaecat cupidatat non proident. <BR />
        Qui officia deserunt mollit anim id est laborum<br />
        Excepteur sint occaecat cupidatat non proident. <BR />
        Qui officia deserunt mollit anim id est laborum</a></p>    
    </div>
</div>

Answer 2

Here is the working code for the shopping cart (make sure you edit the CSS to how you want it). It's the same code as on the example page, with the HTML from your question copy pasted in.

---

Ok, now let's go through the code.

Here is the original code from the example page in a
jsFiddle example

Stepping through the code...

First we call the method from inside an anonymous function using:

$('.feature_box').showFeatureText();

Since, showFeatureText is a method of $('.feature_box') we know that every time this is used insde showFeatureText, this is refering to all the elements with the feature_box class. That is one DIV in your case. The box of text.

Now let's step into `showFeatureText. It's being used as a short jQuery plugin. It is a method of jQuery:

$.fn.showFeatureText = function() {
    return this.each(function(){    
        var box = $(this);
        var text = $('p',this);

        text.css({ position: 'absolute', top: '57px' }).hide();

        box.hover(function(){
            text.slideDown("fast");
        },function(){
            text.slideUp("fast");
        });
    });
}

Ok, the return this.each(function(){...}) has to be included so that the function plays nicely with the jQuery selections. In this case our jQuery selection is one DIV with the class feature_box, but notice that this function would work even if it were added as a method to a jQuery selection that had many elements selected, since it uses return this.each(). At any rate, it's enough to know that this has to be included, and it's what allows you to chain .showFeatureText onto $('.feature_box'). Ok, moving on.

        var box = $(this);
        var text = $('p',this);

These two lines just define two local variables for our convenience. box is $(this) which in this case is the <div class="feature_box">. So it makes sense to call it box.

text are the paragraphs inside the div. This is because ('p', this) selects all the paragraphs within this, and this is the feature_box div. It's basic syntax for jQuery. To select all of this within that use: $(this, that). It's a little confusing, since to select id a and id b you would use $("#a, #b") which is completely different. Note the quotation marks.

So now box is synonymous with our big div .feature_box, and text is synonymous with the text inside.

Let's move on:

text.css({ position: 'absolute', top: '57px' }).hide();

We simply make all the paragraphs in the feature_box div invisible. text are the paragaphs. .css() assigns CSS styles to them. It positions them. Finally hide() makes them invisible. The CSS positioning will remain in effect essentially throughout the life of the page. Without it, the paragraphs would be below the photo.

Ok, so now that the text is all hidden, we're going to add some event handlers to our div. In other words we want to make it so that if we hover over this which is $('.feature_box'), the .feature_box div, then the text will appear. We also want to hide everything when we're not hovering:

    box.hover(function(){
        text.slideDown("fast");
    },function(){
        text.slideUp("fast");
    });

Notice how there are 2 functions in hover(). The first one is what happens when we mouse over the box. The second is what happens when we mouse out. When we hover over the div, the text slides down. When we stop hovering it slides back up.

And that's it. A jQuery plugin for sliding content.

You can see each at work on this jsFiddle example. Note how all three images have their own sliding text.

References:

jQuery selectors
.hide()
.hover()
.slideDown()
.slideUp()
.each()
authoring jQuery plugins