How to fadein and fadeout a Div with a close button?

Question

Hello fellow Brainiacs!

I've tried everything I possibly can. Hopefully one of the many JQuery experts out there can help me out.

Take a look at my JsFiddle

HTML:

<button type="button" id="aboutbutton" class="btnblue">About</button>

<br /><br />


<div id="contentboard">
      <button type="button" id="closebutton" class="btnclose">X</button>

      <p>
          Hello World!<br />
          Hello World!<br />
          Hello World!<br />
        Hello World!
      </p>
</div>

JS:

$('#aboutbutton').on('click', function() {
    if($('#contentboard').css('display') == 'none') {
      $('#contentboard').html(strAboutUs);
      $('#contentboard,#closebutton').fadeIn(1000);
    }
    else {
      $('#contentboard,#closebutton').toggle();
      $('#contentboard').html(strAboutUs);
      $('#contentboard,#closebutton').fadeIn(1000);
    }

  });


$('#closebutton').on('click', function() {
      $('#contentboard').fadeOut(1000);
});

Here's what I'm trying to do:

By default, the contentboard div is visible with some content and the div contains a closebutton. When I click the closebutton, the div fades out - perfect. When I click the blue "about" button, I want the div to fade back in - perfect. But upon fadein, the close button does not appear.

I don't understand why this is happening. I tried using multiple selectors so that the div and the closebutton can fadein together, but that didn't work either.

How do I get the closebutton to appear and disappear with the div?

Any help is deeply appreciated.

Thanks!

Answer 1

Your #closebutton is inside your #contentboard, thus, it is erased when you call $('#contentboard').html(strAboutUs);

Try this instead :

Instead of calling .html(...) on $('#contentboard') I called it on $('#contentboard>p') so it will only replace the <p> content and your #closebutton won't disappear !

var strAboutUs = "<p>Hello World!<br>" +
        "Hello World!<br>" +
        "Hello World!<br>" +
        "Hello World!<br>" +
        "Hello World!</p>";



$('#aboutbutton').on('click', function() {
    if($('#contentboard').css('display') == 'none') {
      $('#contentboard>p').html(strAboutUs); // Changed
      $('#contentboard,#closebutton').fadeIn(1000);
    }
    else {
      $('#contentboard,#closebutton').toggle();
      $('#contentboard>p').html(strAboutUs); // Changed
      $('#contentboard,#closebutton').fadeIn(1000);
    }

  });


$('#closebutton').on('click', function() {
      $('#contentboard').fadeOut(1000);
});

#contentboard {
 width:300px;
 height:auto;
 left:10;
 position:relative;
 background-color:#E0F5FF;
 -webkit-border-radius: 10;
 -moz-border-radius: 10;
 border-radius:10px;
 -webkit-box-shadow: 10px 10px 10px #666666;
 -moz-box-shadow: 10px 10px 10px #666666;
 box-shadow: 10px 10px 10px #666666;
 margin = 25px;
 padding = 25px;
}


.btnblue {
 background: #52baff;
 background-image: -webkit-linear-gradient(top, #52baff, #2980b9);
 background-image: -moz-linear-gradient(top, #52baff, #2980b9);
 background-image: -ms-linear-gradient(top, #52baff, #2980b9);
 background-image: -o-linear-gradient(top, #52baff, #2980b9);
 background-image: linear-gradient(to bottom, #52baff, #2980b9);
 -webkit-border-radius: 10;
 -moz-border-radius: 10;
 border-radius: 10px;
 text-shadow: 1px 3px 3px #000000;
 -webkit-box-shadow: 0px 2px 3px #666666;
 -moz-box-shadow: 0px 2px 3px #666666;
 box-shadow: 0px 2px 3px #666666;
 font-family: Arial;
 color: #ffffff;
 font-size: 24px;
 padding: 25px;
 text-decoration: none;
 margin-top:25px;
 margin-left:25px;
 margin-right:25px;
 width:250px;
}



.btnclose {
 background-color: #E5E5E5;
 color: #000000;
 font-weight: bold;
 position: absolute;
 right:1px;

 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 border-radius:5px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="aboutbutton" class="btnblue">About</button>

<br><br>


<div id="contentboard">
      <button type="button" id="closebutton" class="btnclose">X</button>

      <p>
        Hello World!<br>
        Hello World!<br>
        Hello World!<br>
        Hello World!
      </p>
    </div>