İlginizi Çekebilir
  1. Ana Sayfa
  2. Nasıl Yapılır?

jQuery göster ve gizle yapılışı

jQuery göster ve gizle yapılışı
+ - 0

JQuery kullanarak öğeler nasıl gösterilir ve gizlenir?

 Bir HTML öğesinin üzerine fareyle tıkladığınızda, daha fazla bilgi görünecektir ve tekrar tıkladığınızda bilgi gizlenecektir. JQuery web sitenize yararlı javascript öğeleri eklemeyi kolaylaştıran güçlü bir Javascript kitaplığıdır.

Bu yazıda, show(), hide(), toggle(), fadeIn() ve fadeOut() işlevlerini kullanarak jQuery ile bir öğenin nasıl gösterilip gizleneceğini inceleyeceğiz.

JQuery Göster Gizle

Bir öğeyi jQuery ile gizlemenin en basit yolu, onu tekrar göstermek için .hide() ve ardından .show() öğesini çağırmaktır. Bu, öğenin anında gösterilmesini veya gizlenmesini sağlar.

Şimdi aşağıdaki pratik örneği görelim.

HTML Kodu:

<script src='https://code.jquery.com/jquery-1.7.2.js'></script>
<div class="soft">
<button id="#show" class="soft-toggle">Show</button>
</div>
<div id="show" style="display:none">
<p>Something is hidden By webolog.net</p>
</div>

CSS Kodu:


.soft{text-align:center;}
.soft-toggle {
border: 1px solid #eee;
font-size:30px;
background:#000;
color:#fff;
width:200px;
height:100px;
border-radius:30px;
}
#show{text-align:center;}

JavaScript Kodu:

 $(document).ready(function () {
        $(".soft-toggle").click(function(){
          $("#show").toggle(1000);
        });
          });

See the Pen jQuery Göster / Gizle by Webolog (@webolog) on CodePen.0

jsvsts
Önerilen Yazı
JavaScript vs TypeScript

Yazar Hakkında

Bu Yazıyı Yorumla