hide and show a divs on button clicks using jquery

January 31, 2022

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 class="display">You opened meme section<p>
  <br class="display">
  <button class="display" 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 class="display">You opened meme section<p>
  <br class="display">
  <button class="display" 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 class="body">
      <div class="memes" id="memes">
        <button id="b_meme" class="butn" onclick="showmeme()">
          make a meme
        </button>
      </div>
      <div class="game" id="game">
        <button id="b_game" class="butn" onclick="showgame()">
          play meme games
        </button>
      </div>
    </div>

>Solution :

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 class="display">You opened meme section<p>
  <br class="display">
  <button class="display" 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 class="display">You opened meme section<p>
  <br class="display">
  <button class="display" 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 class="display">You opened meme section<p>
  <br class="display">
  <button class="display" 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 class="body">
  <div class="memes" id="memes">
    <button id="b_meme" class="butn" onclick="showmeme()">
          make a meme
        </button>
  </div>
  <div class="game" id="game">
    <button id="b_game" class="butn" onclick="showgame()">
          play meme games
        </button>
  </div>
</div>