CODEWITHSUNDEEP
javascriptjquery
Kyle
Kyle

Reputation: 119

How to display hidden div after mouse out or hover

Hi guys can someone help me here I want to make a hidden div being displayed after I trigger the event to display and I remove the mouse on that div here is my code 

<div id='MainContainer'>
  <div id='btn-img' onmouseover='DisplayHidden()'>content 1</div>
  <div id='container2'>content 2</div>
</div>

function DisplayHidden()
{
  $('#container2').show();
}

is it possible?

Upvotes: 0

Views: 107

Answers (5)

Dipak
Dipak

Reputation: 2308

I preferred this way because if you want to add more attributes and comparisons parameters you may add it easily and attribute binding is dynamical.

    $(document).ready(function(){
        $("#MainContainer > div").on("click",function(e){      
            if(false === !!$(this).attr('data-click')){    	
                $(this).attr("data-click", true);
                alert('No');
            }else{        
                alert('Clicking on same div');
            }
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='MainContainer'>
        <div id='container1'>content 1</div>
        <div id='container2'>content 2</div>
    </div>

Upvotes: 1

Sreekanth
Sreekanth

Reputation: 3130

Here is what you could do, using pure javascript.

Bind the click event on the container element and use event.target attribute to check the previous click element and take appropriate action.

Event.target documentation on MDN

document.addEventListener("DOMContentLoaded", function() {
  var prevElement = null;
  document.querySelector("#MainContainer").addEventListener("click", function(event) {
    if (prevElement === event.target) {
      console.log("Yes")
    } else {
      console.log("No");
    }
    prevElement = event.target;
  });
});
<div id='MainContainer'>
  <div id='container1'>content 1</div>
  <div id='container2'>content 2</div>
</div>

Upvotes: 1

brk
brk

Reputation: 50346

Create a common class & use querySelectorAll to select the desirable elements.

Then loop through it attach eventListener method to it.Create a variable to store the id of the currently clicked element. On subsequent click check if the variable value and id is same. If it is same then throw an alert.

var getElements = document.querySelectorAll(".elem");
var clickedElem = "";
getElements.forEach(function(item) {
  item.addEventListener('click', function() {
    if (item.id === clickedElem) {
      alert('Clicking on same div')
    } else {
      clickedElem = item.id
    }

  })
})
<div id='MainContainer'>
  <div id='container1' class="elem">content 1</div>
  <div id='container2' class="elem">content 2</div>
</div>

Upvotes: 0

Marco
Marco

Reputation: 7277

Here a simple solution with plain javascript:

var g_lastTarget = null

var g_handleClick = function(e) {
  var target = e.currentTarget

  if (g_lastTarget === target) {
    alert('You clicked the container twice. Container ID = ' + target.id)
  }

  g_lastTarget = target
}

var c1 = document.getElementById('container1')
var c2 = document.getElementById('container2')

c1.addEventListener('click', g_handleClick)
c2.addEventListener('click', g_handleClick)

Upvotes: 0

A. Iglesias
A. Iglesias

Reputation: 2675

var lastClick = null;

$('div#MainContainer div').click(function() {

    var clickedId = $(this).attr('id');

    if (clickedId == lastClick) {
        alert('Clicked the same div');
    }
    else {
        alert('Clicked on a different div'); 
        lastClick = clickedId;
    }
});

Upvotes: 0

Related Questions