1

I set up some jQuery to show a hidden paragraph when the "read more" text is clicked. However, when the text is shown, it wan't to jump up to the place where the text was that commands it to be shown.

Here's how it's set up. I have an h4 that has text that says "read more" then when it's clicked, it has a paragraph with a fadeIn effect, and the h4 has a fadeOut effect.

How do I make the paragraph stop jumping up to take the position of where the h4 was? I tried setting the paragraph in a div with a fixed position, but that caused my jQuery to not work, and then I tried to set the paragraph to have a fixed position but that doesn't work either. I even set the margin-top, but still no go.

here is my HTML:

    <div id="expanding_letter">
    <h4>Read More</h4>

    <p>text text text stuff to say etc blah bla blah lorme ipsum doler set amet....
    </p>

    </div>

my CSS

    #expanding_letter {
font-size:1.5em; 
color: #9d9d9d; 
height: 37px; 
line-height: 37px;  
    }

    #expanding_letter h4 {
color: #666; 
cursor: pointer; 
height: 37px; 
line-height: 37px;  
    }

    #expanding_letter p {
color: #666; 
height: 37px; 
line-height: 37px;
margin-top: 100px;
    }

    #expanding_letter .expanded div { 
    }

    #faqs .expanded { 
color:#666;
    }

    #expandedParagraph {
position: fixed;
    }

and the jQuery:

    $(function() {
    $("#expanding_letter p").hide();
    $("#expanding_letter h4").click(function () {
    $(this).next("#expanding_letter p").fadeIn(1000);
    $(this).fadeOut(1000);
    });
    });

Thanks for taking a look!

Cᴏʀʏ
  • 105,112
  • 20
  • 162
  • 194
abtecas
  • 279
  • 2
  • 4
  • 13
  • sorry, I don't know why this formatted with the code and such outside of the box, I did the 8 spaces in thing...even tried to set a fiddle but jsfiddle won't take my password..even when I reset it. – abtecas Nov 13 '13 at 23:53
  • thanks Cory I appreciate the fixing of the formatting :-) – abtecas Nov 13 '13 at 23:56

1 Answers1

2

What is happening is that .fadeOut() on the <h4> actually sets display: none when it reaches the end of the animation. Since display: none, it is no longer in the DOM, meaning the paragraph jumps up to take it's place.

From: The .fadeOut() method to use visibility property insted of display property

$('selector').fadeTo(500, 0, function(){
    $('selector').css("visibility", "hidden");   
}); // duration, opacity, callback
Community
  • 1
  • 1
Jacob Mulquin
  • 3,458
  • 1
  • 19
  • 22