This is the code I have used. The idea is to have a "back button." I have tried using show() and hide() as well.

The requirement is to show the previous screen when clicked on the back button, but for some reason nothing is being shown.

Whenever I click on the "go back" button it is supposed to show the previous screen but it is not working. I used the show() and hide() function at first that didn't work so I used the display:block and display:none properties but in both cases the result is the same.

I can't seem to notice what am I missing.

ps: I'm new to jquery.

function showmeme() {
  $("#b_game").css("display", "none");
  $("#b_meme").css("display", "none");
  $("#memes").css("width", "100%");
  $("#game").css("width", "0%");
  $("#memes").css("transition", "width 0.5s");
  $("#game").css("transition", "width 0.5s");
  document.getElementById('memes').innerHTML =
    `<p >You opened meme section<p>
  <br >
  <button  style="width:200px; height:50px" onclick=back()>go back</button>`;
}

function showgame() {
  $("#b_game").css("display", "none");
  $("#b_meme").css("display", "none");
  $("#memes").css("width", "0%");
  $("#game").css("width", "100%");
  $("#memes").css("transition", "width 0.5s");
  $("#game").css("transition", "width 0.5s");
  document.getElementById('game').innerHTML =
    `<p >You opened meme section<p>
  <br >
  <button  style="width:200px; height:50px" onclick=back()>go back</button>`;
}

function back() {
  $("#memes").css("width", "49%");
  $("#game").css("width", "49%");
  $("#memes").css("transition", "width 0.5s");
  $("#game").css("transition", "width 0.5s");
  $("#b_game").css("display", "block");
  $("#b_meme").css("display", "block");
  $(".display").css("display", "none");

}

.body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.memes {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid black;
  width: 49%;
  height: 560px;
  overflow: hidden;
}

.game {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid black;
  width: 49%;
  height: 560px;
  overflow: hidden;
}

.butn {
  width: 200px;
  height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div  id="memes">
    <button id="b_meme"  onclick="showmeme()">
          make a meme
        </button>
  </div>
  <div  id="game">
    <button id="b_game"  onclick="showgame()">
          play meme games
        </button>
  </div>
</div>

CodePudding user response：

While I think it would be easier and better to use pure css for the animation part and hide/show part. But you can do it by using .insertAdjacentHtml()

document.getElementById('b_meme').insertAdjacentHTML('afterend', `<p >You opened meme section<p>
  <br >
  <button  style="width:200px; height:50px" onclick=back()>go back</button>`);

Demo

function showmeme() {
  $("#b_game").css("display", "none");
  $("#b_meme").css("display", "none");
  $("#memes").css("width", "100%");
  $("#game").css("width", "0%");
  $("#memes").css("transition", "width 0.5s");
  $("#game").css("transition", "width 0.5s");
  document.getElementById('b_meme').insertAdjacentHTML('afterend', `<p >You opened meme section<p>
  <br >
  <button  style="width:200px; height:50px" onclick=back()>go back</button>`);
}

function showgame() {
  $("#b_game").css("display", "none");
  $("#b_meme").css("display", "none");
  $("#memes").css("width", "0%");
  $("#game").css("width", "100%");
  $("#memes").css("transition", "width 0.5s");
  $("#game").css("transition", "width 0.5s");
  document.getElementById('b_game').insertAdjacentHTML('afterend',
    `<p >You opened meme section<p>
  <br >
  <button  style="width:200px; height:50px" onclick=back()>go back</button>`);
}

function back() {
  $("#memes").css("width", "49%");
  $("#game").css("width", "49%");
  $("#memes").css("transition", "width 0.5s");
  $("#game").css("transition", "width 0.5s");
  $("#b_game").css("display", "block");
  $("#b_meme").css("display", "block");
  $(".display").css("display", "none");

}

.body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.memes {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid black;
  width: 49%;
  height: 560px;
  overflow: hidden;
}

.game {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid black;
  width: 49%;
  height: 560px;
  overflow: hidden;
}

.butn {
  width: 200px;
  height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div  id="memes">
    <button id="b_meme"  onclick="showmeme()">
          make a meme
        </button>
  </div>
  <div  id="game">
    <button id="b_game"  onclick="showgame()">
          play meme games
        </button>
  </div>
</div>