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

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.

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);
        });
          });

Önerilen Yazı

JavaScript vs TypeScript