CODEWITHSUNDEEP
javascriptjquery
Lim
Lim

Reputation: 779

jquery fadein() not working with hide() and display:none

This seems to be so easy to do. But, I can't make it work....! So frustrated...

I googled this problem and tried to solve it for a few hours. (I read a number of posts on StackOverflow.) But, I still can't solve this problem...

The following posts cover similar issues. So, I tried to solve my problem by trying answers in the posts. But, nothing worked for me...

Please keep in mind: If you think it's a duplicate of another question, please let me know which one and how I can apply solution(s) in that question to my problem. I am new to JavaScript and it is still difficult for me to apply solutions that worked for same/similar issues to my problem. Thanks in advance! :-)

I am using Bootstrap 4.1.2. & jQuery 3.3.1.
(* you can't see the part I used Bootstrap in the following code snippet.)

Error Message:
I didn't see this error message when I wrote this code in JSFiddle. But, in this code snippet, the following code shows up when Press this! is clicked: "message": "Uncaught TypeError: $(...).fadein is not a function".

What I'm trying to do:
1. When the page loads up, only Press this! is shown.
2. Show the 1st sentence when clicking Press this!.
3. Show the 2nd sentence when clicking the 1st sentence.
4. Show the 3rd sentence when clicking the 2nd sentence.
5. Show the 4th sentence when clicking the 3rd sentence.

$(document).ready(function(){

  $("#tutorialPages").hide();

  $('#test').click(function(){
    $("#tutorialFirst").fadein();
  });
  
  $('#tutorialFirst').click(function(){
    $("#tutorialSecond").fadein();
  });
  
  $('#tutorialSecond').click(function(){
    $("#tutorialThird").fadein();
  });
  
  $('#tutorialThird').click(function(){
    $("#tutorialFourth").fadein();
  });
  
});
/* #tutorialPages{
  display: none; 
}  
 */
#tutorialGreen{
  color:black;
  font-weight: bold;
  font-size: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
   <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 4.1.x -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

    <!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

    <script type="text/javascript" src="script.js"></script>

</head>
<body>
  
  <p id="test">Press this!</p>


<div id="tutorialPages">
  <p id="tutorialFirst">This is 1st sentence.</p>
  <p id="tutorialSecond">This is 2nd sentence.</p>
  <p id="tutorialThird">This is 3rd sentence.</p>
  <p id="tutorialFourth">This is 4th sentence.</p>
</div>

</body>

Upvotes: 1

Views: 1124

Answers (2)

Programmer
Programmer

Reputation: 2123

You Hide the parent element - $("#tutorialPages"), so it doesn't matter what will happen to its child elements, they won't be shown.

$("#tutorialPages") should always be shown, and show/hide only the children elements, or add $("#tutorialPages").show() to the first click event.

Upvotes: 2

DSCH
DSCH

Reputation: 2366

It should be .fadeIn() with a capital I

Upvotes: 1

Related Questions