Jquery slideTrigger has me stumped

  • I’m trying to add a slideToggle to a paragraph in my blog. The following code works for triggering an alert, but when I replace the alert with the slideToggle, nothing happens.

    Here’s the alert:

    jQuery.noConflict();
    jQuery(document).ready(function() {
    jQuery(“#principles”).mouseover(function() {
    alert(“Hello world!”);
    });
    });

    And here’s the slideTrigger:

    jQuery.noConflict();
    jQuery(document).ready(function() {
    jQuery(‘#principles’).mouseover(function() {
    jQuery(‘#p-principles’).slideToggle(‘slow’, function() {
    // Animation complete.
    });
    });

    I have checked, double checked, and quadruple checked the spelling of principles and p-principles, and the code is copied from the jQuery website. The #principles is the id of a span of text at the top of the paragraph with id = “p=principles”.

    Any suggestions are much appreciated.

    Bruce

Viewing 4 replies - 1 through 4 (of 4 total)

  • at the top of the paragraph with id = "p=principles"

    Make sure that id="p-principles".

    Notice:
    If you write HTML like this:

    <p id="p-principles">
<span id="principles">text</span> text text
</p>

    When you mouse over #principles, the paragraph #p-principles slides up and is hidden. And #p-principles will never be able to slide down and be shown.

    Thread Starter Bruce

    (@bnowthen)

    I don’t think id=”p-principles” would make any difference, but I did take out the spaces and it still doesn’t work.

    I was mistaken in writing that the span is at the top of the paragraph. The span is just above the paragraph, so no problem with showing it again after it is hidden. That is, if I can get it was actually working.

    Bruce

    p=principles: Is the equal sign between p and principles a typo?

    So, I think it is the fast way to solve the probrem that you tell us the URL.

    Thread Starter Bruce

    (@bnowthen)

    I changed the #principles to .principles. Either one works with the corresponding change in the style sheet and html. But it turns out I didn’t quite have the code completed.

    Query.noConflict();
    jQuery(document).ready(function() {
    jQuery(“.principles”).mouseover(function() {
    jQuery(“#p-principles”).slideToggle(‘slow’, function() {
    // Animation complete.
    });
    });
    });

    That Works.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Jquery slideTrigger has me stumped’ is closed to new replies.

Tags