#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    100
    Rep Power
    0

    Script Not Working Properly !


    Code:
    $(document).ready(function() {
        $('.answer').hide();
    	$('.main h2').toggle(
    		function(){
    		$(this).next('.answer').slideDown();
    		   $(this).addClass('close');
    		},
    		function(){
    			$(this).next('.answer').fadeOut();
    	        $(this).removeClass('close');
    			});//toggle functions
    });// document ready end
    This is my JQ script !


    Code:
    <div class="main">
    <h2>I've heard that JavaScript is the long-lost fountain of youth. Is this true?</h2>
    </div>
    <div class="answer">
            <p>Why, yes it is! Studies prove that learning JavaScript freshens the mind and extends life span by several hundred years. (Note: some scientists disagree with these claims.)</p>
          </div>

    I dont know why all my text hides even i am just hiding the Answer div. Its from Javascript & Jquery The Missing Manual 2nd edition. O`reailly said they will reply soon :x
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    It's probably because your using the .toggle API on ".main h2". If you want the question; in the h2 element (within the "main" class) to be displayed (on DOM ready / window load), then just remove the .toggle(). Your ".main h2", by default; has a CSS display style of "block". So when your DOM first loads; it recognizes that the ".main h2" element is a block level element. And... since you use the .toggle() API; your ".main h2" becomes a element, where the CSS property of display is "none". That would be my guess, from looking at your code.

IMN logo majestic logo threadwatch logo seochat tools logo