Trouble adding/removing classes on footer and icon

Question

I'm trying to animate a footer so that when you click it, it grows to reveal information and hides information that was there before. To close the footer back to its original state I'm using an icon that when you click it, the footer will return to its original size and display time information again.

I've tried using jquery to change the CSS and to add/remove classes but it still won't work.

<div class="footer" onclick="showTimes()">
  <i class="fas fa-times-circle hidden" onclick="hideTimes()"></i>
  <div id="timeDiv" class="time"></div>
</div>

function showTimes(){
  $(".footer").css("height", "40%");
  $("#timeDiv").addClass( "hidden" );
  $(".fa-times-circle").removeClass( "hidden" );
}

function hideTimes(){
  $("#timeDiv").removeClass( "hidden" );
  $(".fa-times-circle").addClass( "hidden" );
  $(".footer").animate({height:'10%'},400);
}

.footer {
  background-color: #211f20;
  width: 70%;
  height: 10%;
  right: 10px;
  position: fixed;
  bottom: 0px;
  z-index: 1;
  opacity: 0.7;
  cursor: pointer;
}

.footer:hover {
  height: 12.5%; !important;
  webkit-transition:height 0.5s; /* Safari */ !important;
  transition:height 0.5s; !important;
}

.time {
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 2vh;
  position: absolute;
  bottom: 20%;
  width: 100%;
  text-align: center;
  display: inline-block;
}

.fa-times-circle {
  color: white;
  font-size: 5vh;
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px 20px 0px 0px;
}

I expected the button to be hidden when clicked and for "timeDiv" to be shown again with the footer in its original size.

Answer 1

 $(".footer").on("click",function(){ $(".footer").css("height", "40%"); $("#timeDiv").addClass( "hidden" ); $(".fa-times-circle").removeClass( "hidden" ); }) $(".fa-times-circle").on("click",function(){ $("#timeDiv").removeClass( "hidden" ); $(".fa-times-circle").addClass( "hidden" ); $(".footer").animate({height:'10%'},400); }) 

 .footer { background-color: #211f20; width: 70%; height: 10%; right: 10px; position: fixed; bottom: 0px; z-index: 1; opacity: 0.7; cursor: pointer; } .time { background: pink; font-family: 'Montserrat', sans-serif; height: 100%; width: 20%; position: absolute; top: 0%; left: 50%; text-align: center; display: inline-block; } .time.hidden { display: none; } .fa-times-circle { background: #8BC34A; font-size: 5vh; position: absolute; top: 0px; right: 0px; margin: 20px 20px 0px 0px; z-index: 99999999999; width: 30px; height: 30px; } .fa-times-circle.hidden { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="footer"> <i class="fas fa-times-circle hidden"></i> <div id="timeDiv" class="time">My time</div> </div> 

Is this what you need?

Answer 2

There are few issues as to why this isn't working.

• .footer:hover should probably be .footer:active
• The properties within the above have two semi-colons - before and after !important on each line within
• showTimes() will always execute, even when clicking on the icon to execute hideTimes()

Furthermore, it may be best to wrap the icon and #timeDiv in a container div .

Below you may see my solution.

The key takeaways are:

• stopPropagation() on the hideTimes() function
• fix the semi-colon issue in the CSS
• add a wrapper div while changing the .hidden class from the icon to the wrapper and updating each function to show/hide the class on the wrapper.

 function showTimes(){ $(".footer").css("height", "40%"); $(".time__container").removeClass( "hidden" ); } function hideTimes(event) {; event.stopPropagation(); $(".time__container").addClass( "hidden" ); $(".footer").animate({height:'10%'},400); } 

 /* Added `.hidden` class to simulate your 3rd party css */ .hidden { display: none; } .footer { background-color: #211f20; width: 70%; height: 10%; right: 10px; position: fixed; bottom: 0px; z-index: 1; opacity: 0.7; cursor: pointer; } .footer:active { height: 12.5% !important; webkit-transition:height 0.5s /* Safari */ !important; transition:height 0.5s !important; } .time { color: white; font-family: 'Montserrat', sans-serif; font-size: 2vh; position: absolute; bottom: 20%; width: 100%; text-align: center; display: inline-block; } .fa-times-circle { color: white; font-size: 5vh; position: absolute; top: 0; right: 0; margin: 20px 20px 0px 0px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <div class="footer" onclick="showTimes()"> <div class="time__container hidden"> <i class="fas fa-times-circle" onclick="hideTimes(event)">X</i> <div id="timeDiv" class="time">lorem ipsum</div> </div> </div> </body> </html>