Struggling with adding or removing classes from the footer and icon

Question

Struggling with adding or removing classes from the footer and icon

I'm attempting to create a dynamic footer that expands to reveal additional information when clicked, and then contracts back to its original state upon clicking a specific icon. The goal is to toggle between displaying time information and hiding it.

Even after trying to utilize jquery for altering the CSS properties and adding/removing classes, I haven't been able to achieve the desired functionality.

<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;
}

My expectation was for the button to disappear upon clicking, and for the "timeDiv" to become visible again with the footer reverting to its original size.

javascript html css

Answer 1

Answer №1

It appears there are several reasons why this functionality is not working as expected.

.footer:hover might need to be changed to .footer:active
The CSS properties mentioned above have double semi-colons - both before and after the !important declaration in each line
showTimes() seems to always trigger, even when clicking on the icon meant to execute hideTimes()

Additionally, it could be beneficial to enclose the icon and #timeDiv within a container div.

Below is my proposed solution:

The main points to note include:

Using stopPropagation() in the hideTimes() function
Fixing the semi-colon issue in the CSS code
Introducing a wrapper div, updating the reference from the icon to the wrapper for the .hidden class, and adjusting each function to show/hide the class on the wrapper accordingly.

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>

Answer 2

It appears there are several reasons why this functionality is not working as expected.

.footer:hover might need to be changed to .footer:active
The CSS properties mentioned above have double semi-colons - both before and after the !important declaration in each line
showTimes() seems to always trigger, even when clicking on the icon meant to execute hideTimes()

Additionally, it could be beneficial to enclose the icon and #timeDiv within a container div.

Below is my proposed solution:

The main points to note include:

Using stopPropagation() in the hideTimes() function
Fixing the semi-colon issue in the CSS code
Introducing a wrapper div, updating the reference from the icon to the wrapper for the .hidden class, and adjusting each function to show/hide the class on the wrapper accordingly.

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>

Answer 3

Answer №2

$(".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>

Does this meet your requirements?

Answer 4

$(".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>

Does this meet your requirements?

Struggling with adding or removing classes from the footer and icon

Answer №1

Answer №2

Similar questions

What is the functionality of an AngularJS Module?

Utilizing vue-i18n for translating the default value of a Vue component's property

Showcasing all products via the terminal using the Mailchimp API in JavaScript

Extract information from an array located inside a nested object

Issue: EMFILE - exceeding maximum number of opened files

Is there a way to retrieve the timestamp of a DOM change event when using MutationObserver for event tracking?

Modal visibility glitch: Bootstrap concealing one modal while erroneously revealing another

CSS/HTML leading to incorrect paragraph rendering

How to perfectly align an image within a button using CSS

Make the jQuery toggle() function work like a regular radio button when selecting multiple options at a time

Unable to retrieve data from the array

The datetimepicker by Trentrichardson is failing to function

Having trouble bringing my custom-built Angular module into my Angular application

Unable to locate the 'react-native' command, attempted various fixes but none were successful

Refresh the copyright year by syncing with a time server

Automatically clear out table rows once the maximum row limit is reached, then append new data using the WebSocket data in JavaScript

The CSS styling feature is not functional within the JavaMail API

Dynamic, AJAX-driven content is experiencing a 200 status code

What is the correct way to type this?

access pictures from a different directory using JavaScript