Need to hide the clicked div and reappear after 10 seconds

Question

Need to hide the clicked div.

I tried with an example in jsfiddle. As i am new to js i want a better solution.

<div class="t1">1</div>
<div class="t2">2</div>
<div class="t3">3</div>
<div class="t4">4</div>
<div class="t5">5</div>

https://jsfiddle.net/5Lh3yfov/

@raj, when you say *better solution*, it implies that you have tried something and you want better than that. — Rajesh, Nov 08 '16 at 11:18
Please refer [How to add click on div](http://stackoverflow.com/questions/20772954/add-click-event-on-div-tag-using-javascript) and [How to execute a function after X seconds](http://stackoverflow.com/questions/8252638/executing-javascript-after-x-seconds) — Rajesh, Nov 08 '16 at 11:21

score 3 · Accepted Answer · answered Nov 08 '16 at 11:32

3

Pls find the working snippet added below

$('body').on('click','.t11',function(){
    $(this).hide();
    var that = $(this);
    setTimeout(function() {
        that.show();
    }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="t1 t11">1</div>
<div class="t2 t11">2</div>
<div class="t3 t11">3</div>
<div class="t4 t11">4</div>
<div class="t5 t11">5</div>

answered Nov 08 '16 at 11:32

Rajesh Grandhi

378
3
13

Thanks for the snippet.it works... – Nov 08 '16 at 11:33

score 0 · Answer 2 · answered Nov 08 '16 at 11:21

0

do do something like,

function hideAndShow(element, timeout){
  element.style.display = "none";
  setTimeout(function(){
      element.style.display = "block";
    },timeout);
}

hideAndShow(document.getElementById("myDiv"), 10000)

div#myDiv{
  width:100px;
  background-color: #f00;
  height:100px;
  }

<div id="myDiv">
  <div>

answered Nov 08 '16 at 11:21

A.T.

24,694
8
47
65

Thanks...it works too – Nov 08 '16 at 11:33

Pranav C Balan · Answer 3 · 2016-11-08T11:37:16.790

0

Use setTimeout() method for that.

// get all div and iterate over them 
// for newer browser you can use Array.from 
// to convert NodeList to array
[].slice.call(document.querySelectorAll('.t')).forEach(function(e) {
  // attach event listener to the element
  e.addEventListener('click', function() {
    // hide the element
    this.style.display = 'none';
    // set timer
    setTimeout(function() {
      // show the element
      this.style.display = 'block';
      // bind the this context or you can use `e` 
    }.bind(this), 10000);
  })
});

<div class="t">1</div>
<div class="t">2</div>
<div class="t">3</div>
<div class="t">4</div>
<div class="t">5</div>

edited Nov 08 '16 at 11:37

answered Nov 08 '16 at 11:21

Pranav C Balan

113,687
23
165
188

Note: `Array.from` is a part of ES6 and is not implemented in all browsers. You can use `[].slice.call` as an alternate or just have a `for` loop – Rajesh Nov 08 '16 at 11:22
@Rajesh : updated – Pranav C Balan Nov 08 '16 at 11:30
Well it was a note for others who read it. It was just a caveat. Even I love `array.from` – Rajesh Nov 08 '16 at 11:33
Thanks...it works too – Nov 08 '16 at 11:33

Need to hide the clicked div and reappear after 10 seconds

3 Answers3