Slidedown the div on hover of another div

Question

I want to slidedown the nth div on hover of another div. I have made a function but it is not working. I want to slidedown on hover the child div of parent div on respective basis. With this function nothing is slidedown on hover. Please help me out.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
  myfunction();

  });

  function myfunction(index) {
    var x = [];
    $(".check").each(function() {
       x.push($(this).text());
    });
    $("#demo1").text(x[0]); // We can use x[1 or 2 or 0] in the same id to get the value.
    $("#demo2").text(x[1]);
    $("#demo3").text(x[2]);
  }
});
</script>
</head>
<body>
<div id="main">
<p class="check">If you click on the "Hide"</p>
<p class="check">button, I will disappear.</p>
<p class="check">If you click on the "Hide" button</p>
</div>
<p id="demo1">"Hide" button</p>
<p id="demo2">"Hide"</p>
<p id="demo3">button</p>
<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

Answer 1

You can achieve it by using slideToggle

 var isShow = false; $("#toggle").click(function(){ $('.check').slideToggle(); $(this).text(isShow? "Hide" : "Show"); isShow = !isShow; });

 <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <div id="main"> <p class="check">If you click on the "Hide"</p> <p class="check">button, I will disappear.</p> <p class="check">If you click on the "Hide" button</p> </div> <p id="demo1">"Hide" button</p> <p id="demo2">"Hide"</p> <p id="demo3">button</p> <button id="toggle">Hide</button>

If you still want to 2 buttons, you can try this way

 $("#hide").click(function(){ $(".check").hide(500); }); $("#show").click(function(){ $(".check").show(500); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="main"> <p class="check">If you click on the "Hide"</p> <p class="check">button, I will disappear.</p> <p class="check">If you click on the "Hide" button</p> </div> <p id="demo1">"Hide" button</p> <p id="demo2">"Hide"</p> <p id="demo3">button</p> <button id="hide">Hide</button> <button id="show">Show</button>

Slidedown the div on hover of another div

Question

1 answers

solution1
0 2020-02-03 07:34:11

Slidedown the div on hover of another div

Question

1 answers

solution1 0 2020-02-03 07:34:11

solution1
0 2020-02-03 07:34:11