امثلة عن ال hide/show في JQUERY

جي كويري | JQUERYاكواد برمجية جي كويرياكواد برمجية

2021-03-27

مشاهدات: 474

مثال عن استخدام التوابع show/hide

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

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

مثال عن استخدام التوابع show/hide باستخدام التابع Toggle

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>Toggle between hiding and showing the paragraphs</button>

<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>

</body>
</html>

مثال عن استخدام التابع hide مع motion

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".ex .hide").click(function(){
    $(this).parents(".ex").hide("slow");
  });
});
</script>
<style> 
div.ex {
  background-color: #e5eecc;
  padding: 7px;
  border: solid 1px #c3c3c3;
}
</style>
</head>
<body>

<h3>Island Trading</h3>

<div class="ex">
  <button class="hide">Hide me</button>
  <p>Contact: Helen Bennett<br> 
  Garden House Crowther Way<br>
  London</p>
</div>

<h3>Paris Specialities</h3>

<div class="ex">
  <button class="hide">Hide me</button>
  <p>Contact: Marie Bertrand<br> 
  265, Boulevard Charonne<br>
  Paris</p>
</div>

</body>
</html>