CODEWITHSUNDEEP
jqueryclickhidetoggle
Artroing
Artroing

Reputation: 31

.hover and .click, different functions on same div, Jquery

I want to Show "1" when hovering "Toggle 1", and show "2" when I click "Toggle 1". I also want to create a rule, where "Toggle 2" would show "3" on hover and "4" on click. I put the closing div for "hover (toggle 1) behind "front (2)" to be able to click 2 to toggle as well. 

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="hover">Toggle 1
<div class="front" style="display:none">2</div></div>
<div class="back" style="display:none">1</div>

<div class="hover">Toggle 2
<div class="front" style="display:none">4</div></div>
<div class="back" style="display:none">3</div>

<script>

$("div.hover").click(function () {
$("div.front").toggle( );
});

$("div.hover").hover(
function() { $(this).children("div.back").show(); },
function() { $(this).children("div.back").hide(); }
});
</script>

</body>
</html>

Upvotes: 0

Views: 1349

Answers (2)

Jonny Burger
Jonny Burger

Reputation: 921

Your code doesn't make any sense.

$("div.hover").hover(
function() { $(this).children("div.back").show(); },
function() { $(this).children("div.back").hide(); }
});

What are you trying? Hiding and showing at the same time?

Greg B. is right, but it doesn't fix the problem.

Try this code:

     <!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="hover">Toggle 1
<div class="front" style="display:none">2</div>
<div class="back" style="display:none">1</div>
</div>
<div class="hover">Toggle 2
<div class="front" style="display:none">4</div>
<div class="back" style="display:none">3</div>
</div>
<script>


hoverdiv = $("div.hover")

hoverdiv.on("hover", function() {
    $(this).children(".front").show()
});
hoverdiv.on("mouseleave", function() {
    $(this).children(".front").hide()
})
hoverdiv.on("click", function() {
    $(this).children(".back").toggle()
})
</script>

</body>
</html>

Upvotes: 0

Greg B
Greg B

Reputation: 813

Your closing div are in the wrong spot and it's screwing it up I think.

<div class="hover">Toggle 1
  <div class="front" style="display:none">2</div>
  <div class="back" style="display:none">1</div>
</div>

<div class="hover">Toggle 2
  <div class="front" style="display:none">4</div>
  <div class="back" style="display:none">3</div>
</div>

Try that.

Upvotes: 4

Related Questions