HTML'de JavaScript ile DIV Gösteme/Gizleme

Eğer bir <div>'in içerisindeki içeriği belirli bir aksiyona göre değiştirmek istiyorsanız bunun en kolay yollarından birisi, ilgili alanı tamamen gizlemek veya göstermektir. JavaScript ile bu kolayca gerçekleştirilebilir.

HTML

<nav class="subnav" id="paket">
 <ul>
  <li><a href="a.html">Referans A</a></li>
  <li><a href="a.html">Referans B</a></li>
  <li><a href="a.html">Referans C</a></li>
 </ul>
</nav>

<nav class="subnav" id="sektorel" style="display:none;">
 <ul>
  <li><a href="1.html">Referans 1</a></li>
  <li><a href="1.html">Referans 2</a></li>
  <li><a href="3.html">Referans 3</a></li>
 </ul>
</nav>

<input type="button" id="bir" value="Paket" />
<input type="button" id="iki" value="Sektörel" />

Öncelikle elementlerimize belirli ID'ler vererek JavaScript tarafından kolayca seçilebilir hale getiriyoruz. Elimizde aynı DIV'in iki farklı kopyası olduğu için birine açılış değeri olarak "display: none;" stilini vererek görünmez hale getiriyoruz.

JavaScript

$(document).ready(function(){
    $("#bir").click(function(){
        $("#sektorel").hide();
        $("#paket").show();           
    });
    
    $("#iki").click(function(){
        $("#paket").hide();
        $("#sektorel").show();           
    });
});

Yukarıdaki JavaScript ise "bir" ve "iki" ID'sini taşıyan elemntlerimize gizleme ve gösterme fonksiyonlarını atayacak...

Yazılan scriptin demosunu buradan görebilirsiniz.

Not: Bu script için jQuery 1.9.1 kütüphanesi kullanılmıştır.