WordPress.org

1. Bruce
   Member
   Posted 9 months ago #

   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

2. kz
   Member
   Posted 9 months ago #

   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.

3. Bruce
   Member
   Posted 9 months ago #

   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

4. kz
   Member
   Posted 9 months ago #

   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.

5. Bruce
   Member
   Posted 9 months ago #

   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.

Reply

You must log in to post.