CODEWITHSUNDEEP
javascriptjqueryhtml
DanTheDak
DanTheDak

Reputation: 3

HTML - How to make text disappear and make different text appear from a press of a button?

So I'm trying to make this little "choice game" of sorts on this website.

http://puu.sh/ncAr8/be095ee6e2.png

I got up to this but... when you click Sure, it brings you to another page. I don't want to do that.

Instead when you click Sure, I want the text and the button to disappear and different text/buttons to appear.

Here's my code. Excuse my poor HTML, I'm not so great.

<!DOCTYPE html>
<html>
<head>
<meta name="theme-color" content="#18191b">
<link rel="icon" sizes="192x192" href="assets/trans.gif">
<title>...</title>
</head>


<div class="audio">
<audio autoplay="true" src="assets/Virtual Campfire with Crackling Fire Sounds (HD).mp3"/>
</div>


<div id="test">
<center><h1 class="center2">Do you want to join the campfire?<br> There is one person there... looking sad.</h1></center>
</div>
<center><a href="join1.html" class="center3">Sure.</a></center>


<div id="test">
<center><img class="center" src="assets/trans.gif"/></center>
</div>

<style>
    img.center {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    display:block;
    position: relative;
    top: 200px;
    }
    h1.center2 {
    margin: auto;
    width: 60%;
    padding: 10px;
    color: white;
    font-family: "Myriad Pro";
    text-align: center;
    top: 70px;
    position: relative;
}
a.center3 {
    margin: auto;
    width: 60%;
    padding: 10px;
    color: white;
    font-family: "Calibri Light";
    text-align: center;
    top: 80px;
    position: relative;
    font-size: 25px;
    color: #EEB300;
}
#test h1 {
    margin-top: 25px;
    font-size: 45px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
</style>

<body style="background-color:#18191b">
</body>

</html>

Please help me, I'm pretty bad at HTML and would love some advice as well. Thanks!

Upvotes: 0

Views: 15952

Answers (3)

Mohit Sharma
Mohit Sharma

Reputation: 11

Why don't you consider jQuery? You have to do steps like this:

  1. Put the both contents into 2 separate divs and give them two different ids.
  2. Initialize the other div with attribute display:none;
  3. On the click of button, you can add attributes to both the divs.

Code:

$().ready(function(){
    $("#button").click(function(){
        $("#div-to-hide").attr("display","none");
         $("#divtodisplay").attr("display","block");
     });
});

And in the <style> tag initially, you have to set

#divtodisplaylater{
   display:none;
}

And consider jQuery for different functions, details of the function at JQuery website

http://api.jquery.com/attr/

Upvotes: 0

user5937446
user5937446

Reputation:

You can't give more than one tag the same id, so use classes instead.
<div id="test"> → <div class="test">

Put CSS code in an external .css file, and link to it in the head element.

<head>
  <link rel="stylesheet" type="text/css" href="file_name.css"/>
  ...
</head>

As for your question, try: 

<div id="will_disappear">
  <div id="test">
  <center><h1 class="center2">Do you want to join the campfire?<br>There is one person there... looking sad.</h1></center>
  </div>
  <center><a href="#" class="center3" onclick="document.getElementById('will_disappear').style.display = 'none';for (var i=0;i<document.getElementsByClassName('will_show').length;i++){document.getElementsByClassName('will_show')[i].style.display = 'block';}">Sure.</a></center>
</div>
<div class="will_show">
  Content...
</div>

.will_show {
  display: none;
}

Upvotes: 0

MD Sultan Nasir Uddin
MD Sultan Nasir Uddin

Reputation: 158

I have created a working example from your code. You can check it here pre http://codepen.io/imanik/pen/bEyVpj

$("#confirm-btn").on("click", function() {
  $(this).hide();
  $("#test").hide();
  $("#another").fadeIn("slow");
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta name="theme-color" content="#18191b">
  <link rel="icon" sizes="192x192" href="assets/trans.gif">
  <title>...</title>
</head>


<div class="audio">
  <audio autoplay="true" src="assets/Virtual Campfire with Crackling Fire Sounds (HD).mp3" />
</div>


<div id="test">
  <center>
    <h1 class="center2">Do you want to join the campfire?<br> There is one person there... looking sad.</h1>
  </center>
</div>
<div id="another" style="display:none;">
  <center>
    <h1 class="center2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sit doloribus officiis praesentium assumenda, quod eaque illum voluptatem voluptatum distinctio.</h1>
  </center>
</div>
<center><a href="join1.html" class="center3" id="confirm-btn">Sure.</a>
</center>


<div id="test">
  <center>
    <img class="center" src="assets/trans.gif" />
  </center>
</div>

<style>
  img.center {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    display: block;
    position: relative;
    top: 200px;
  }
  h1.center2 {
    margin: auto;
    width: 60%;
    padding: 10px;
    color: white;
    font-family: "Myriad Pro";
    text-align: center;
    top: 70px;
    position: relative;
  }
  a.center3 {
    margin: auto;
    width: 60%;
    padding: 10px;
    color: white;
    font-family: "Calibri Light";
    text-align: center;
    top: 80px;
    position: relative;
    font-size: 25px;
    color: #EEB300;
  }
  #test h1 {
    margin-top: 25px;
    font-size: 45px;
    text-align: center;
    -webkit-animation: fadein 2s;
    /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s;
    /* Firefox < 16 */
    -ms-animation: fadein 2s;
    /* Internet Explorer */
    -o-animation: fadein 2s;
    /* Opera < 12.1 */
    animation: fadein 2s;
  }
  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* Firefox < 16 */
  @-moz-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* Safari, Chrome and Opera > 12.1 */
  @-webkit-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* Internet Explorer */
  @-ms-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* Opera < 12.1 */
  @-o-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
</style>

<body style="background-color:#18191b">
</body>

</html>

The way its works the content that you don't want to show at the beginning set CSS display property to none so that that will be hidden.

Then target the button using Jquery and listen for the click event. When it happened simply hide all the elements that you want to hide and show whose will be visible.

Upvotes: 2

Related Questions