Conceal an element from view upon clicking on it

Question

Conceal an element from view upon clicking on it

Task at Hand :

Implement a smooth element hiding effect upon clicking, similar to the behavior on this website , where the letter A fades away smoothly when clicked.
Is it possible to achieve this effect using only HTML, CSS, and JavaScript?

    var targetElement = document.getElementById('target-element');

document.getElementById('hide-button').onclick = function () {
    targetElement.className = 'hidden';
};

document.getElementById('show-button').onclick = function () {
    targetElement.className = '';
};

       #target-element {
    transition-property: visibility, opacity;
    transition-duration: 0s, 1s;
}

#target-element.hidden {
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: 1s, 0s;
    transition-delay: 0s, 1s;
}

<a href="#" id="target-element">Text</a>
<button id="hide-button">Hide</button>
<button id="show-button">Show</button>

javascript html css animation hide

Answer 1

Answer №1

To implement this feature, utilize jQuery's fadeOut function as demonstrated in the code snippet below:

jQuery Example

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>FadeOut Demo</title>
  <style>
    .hide {
      font-size: 150%;
      cursor: pointer;
      text-align: center;
    }
    
    h1 {
      text-align: center;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>

  <div class="hide">
    <h1>A</h1>
    <p>
      Clicking on this paragraph will cause it to fade away.
    </p>
  </div>
  <script>
    $(".hide").click(function() {
      $(".hide").fadeOut("slow");
    });
  </script>

</body>

</html>

JavaScript Implementation

function fadeOutEffect() {
  var fadeTarget = document.getElementById("hide");
  var fadeEffect = setInterval(function() {
    if (!fadeTarget.style.opacity) {
      fadeTarget.style.opacity = 1;
    }
    if (fadeTarget.style.opacity > 0) {
      fadeTarget.style.opacity -= 0.1;
    } else {
      clearInterval(fadeEffect);
    }
  }, 200);
}

document.getElementById("hide").addEventListener('click', fadeOutEffect);

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>FadeOut Demo</title>
  <style>
    #hide {
      font-size: 150%;
      cursor: pointer;
      text-align: center;
    }
    
    h1 {
      text-align: center;
    }
  </style>
</head>

<body>

  <div id="hide">
    <h1>A</h1>
    <p>
      Clicking on this paragraph will make it fade away.
    </p>
  </div>

</body>

</html>

Answer 2

To implement this feature, utilize jQuery's fadeOut function as demonstrated in the code snippet below:

jQuery Example

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>FadeOut Demo</title>
  <style>
    .hide {
      font-size: 150%;
      cursor: pointer;
      text-align: center;
    }
    
    h1 {
      text-align: center;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>

  <div class="hide">
    <h1>A</h1>
    <p>
      Clicking on this paragraph will cause it to fade away.
    </p>
  </div>
  <script>
    $(".hide").click(function() {
      $(".hide").fadeOut("slow");
    });
  </script>

</body>

</html>

JavaScript Implementation

function fadeOutEffect() {
  var fadeTarget = document.getElementById("hide");
  var fadeEffect = setInterval(function() {
    if (!fadeTarget.style.opacity) {
      fadeTarget.style.opacity = 1;
    }
    if (fadeTarget.style.opacity > 0) {
      fadeTarget.style.opacity -= 0.1;
    } else {
      clearInterval(fadeEffect);
    }
  }, 200);
}

document.getElementById("hide").addEventListener('click', fadeOutEffect);

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>FadeOut Demo</title>
  <style>
    #hide {
      font-size: 150%;
      cursor: pointer;
      text-align: center;
    }
    
    h1 {
      text-align: center;
    }
  </style>
</head>

<body>

  <div id="hide">
    <h1>A</h1>
    <p>
      Clicking on this paragraph will make it fade away.
    </p>
  </div>

</body>

</html>

Answer 3

Answer №2

If you want to make something disappear smoothly on a webpage, consider using the jQuery fadeOut() effect. Check out the reference from W3Schools below:

https://www.w3schools.com/jquery/eff_fadeout.asp

By clicking on the "try it yourself>" button, you can tweak the code to suit your needs.

For another practical example, take a look at this working demo:

https://jsfiddle.net/kag4jqyh/

Answer 4

If you want to make something disappear smoothly on a webpage, consider using the jQuery fadeOut() effect. Check out the reference from W3Schools below:

https://www.w3schools.com/jquery/eff_fadeout.asp

By clicking on the "try it yourself>" button, you can tweak the code to suit your needs.

For another practical example, take a look at this working demo:

https://jsfiddle.net/kag4jqyh/

Answer 5

Answer №3

Give this a shot:

$(document).ready(function() {
    $('#spantext').on('click', function() {
      // $(this).hide();

      $(this).fadeOut("slow"); // You can slow down the hiding effect
        
    });

    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spantext">This is some text in a span element.</span>

Answer 6

Give this a shot:

$(document).ready(function() {
    $('#spantext').on('click', function() {
      // $(this).hide();

      $(this).fadeOut("slow"); // You can slow down the hiding effect
        
    });

    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spantext">This is some text in a span element.</span>

Answer 7

Answer №4

Here is a solution using plain JavaScript instead of jQuery

HTML

<a href="#" id="foo" class="foo">Text</a>
<br />
<button id="hide-button" onclick="hideButton()">Hide</button>
<button id="show-button" onclick="showButton()">Show</button>

JavaScript

const hideButton = () => {
    document.getElementById("foo").classList.add('hidden');
}

const showButton = () => {
    document.getElementById("foo").classList.remove('hidden');
}

CSS

 .foo {
  transition-property: visibility, opacity;
  transition-duration: 0s, 1s;
}

.foo.hidden {
  opacity: 0;
   visibility: hidden;
   transition-property: opacity, visibility;
   transition-duration: 1s, 0s;
   transition-delay: 0s, 1s;
}

Answer 8

Here is a solution using plain JavaScript instead of jQuery

HTML

<a href="#" id="foo" class="foo">Text</a>
<br />
<button id="hide-button" onclick="hideButton()">Hide</button>
<button id="show-button" onclick="showButton()">Show</button>

JavaScript

const hideButton = () => {
    document.getElementById("foo").classList.add('hidden');
}

const showButton = () => {
    document.getElementById("foo").classList.remove('hidden');
}

CSS

 .foo {
  transition-property: visibility, opacity;
  transition-duration: 0s, 1s;
}

.foo.hidden {
  opacity: 0;
   visibility: hidden;
   transition-property: opacity, visibility;
   transition-duration: 1s, 0s;
   transition-delay: 0s, 1s;
}

Answer 9

Answer №5

If you're looking to create a simple animation to conceal the view, there is an easy solution available.

One way to achieve this is by utilizing the following code snippet:

   <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#box").animate({opacity: 0});
            });
            $("#btn2").click(function(){
                $("#box").animate({opacity: 1});
            });
        });
    </script>

    </head>
    <body>
        <button id="btn1">Animate</button>
        <button id="btn2">Reset</button>
        <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
    </body>

Answer 10

If you're looking to create a simple animation to conceal the view, there is an easy solution available.

One way to achieve this is by utilizing the following code snippet:

   <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#box").animate({opacity: 0});
            });
            $("#btn2").click(function(){
                $("#box").animate({opacity: 1});
            });
        });
    </script>

    </head>
    <body>
        <button id="btn1">Animate</button>
        <button id="btn2">Reset</button>
        <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
    </body>

Answer 11

Answer №6

Looking to implement JavaScript instead of relying on jQuery? Give this a shot:

/******define time-delay only in s(seconds)****/
    var timeSlot = '.3s';
     function hide(obj){
        obj.style.visibility= 'hidden';
        obj.style.opacity= 0.8;
        obj.style.transition= 'visibility 0s linear'+timeSlot+', opacity '+timeSlot+' linear';
    }

.div1 {
          font-size: 1.2rem;
          cursor: pointer;
          text-align: center;
          margin-top:-100px;
       }
.logo {
         font-size: 10rem;
      }

<div class="div1" onclick="hide(this);">
    <h1 class="logo">A</h1>                 
 </div>

Answer 12

Looking to implement JavaScript instead of relying on jQuery? Give this a shot:

/******define time-delay only in s(seconds)****/
    var timeSlot = '.3s';
     function hide(obj){
        obj.style.visibility= 'hidden';
        obj.style.opacity= 0.8;
        obj.style.transition= 'visibility 0s linear'+timeSlot+', opacity '+timeSlot+' linear';
    }

.div1 {
          font-size: 1.2rem;
          cursor: pointer;
          text-align: center;
          margin-top:-100px;
       }
.logo {
         font-size: 10rem;
      }

<div class="div1" onclick="hide(this);">
    <h1 class="logo">A</h1>                 
 </div>

Conceal an element from view upon clicking on it

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

The controller remains unresponsive when attempting to activate the button on the webpage

Utilize text wrapping to ensure a fixed maximum height for content display

Exploring the Implementation of Conditional Logic Using Variables in ReactJS

Maintaining fixed panels as you scroll through a centrally aligned layout

Include a return or delete from the default IO statement

Here's a way to run JavaScript code from a <script> tag included in an AJAX response

Jasmine tests for AngularJS directive failed to invoke the link function

Changing VueJS duplicate values with v-model (:value, @input)

Tips for accessing every "results" (parameters) from an API

Node text: three.js and ngraph.tree working together

The slash character is escaped by the RegExp constructor, but the dot character is

`methods that exhibit peculiar behaviors`

Guide to creating a vertical handler that can be resized

Fetching client-side data in a Functional Component using Next JS: The proper approach

How can you insert a title or key into an array containing numerous objects using javascript?

When zooming out, Leaflet displays both tile layers

JWT authentication for restricted routes

Retrieving Data from all Rows in jQuery DataTables

Alternative to using the disabled attribute in JavaScript to make a checkbox read-only option

Interpret the ng-model data into the input field