Show / Hide - Göster / Gizle - Aç / Kapat Yazısı

Sitelerde veya bloglarda içeriği daha iyi aktarmak ve gerekli olduğunda açılabilecek bir bölüm oluşturmak sayfa içi düzeninde oldukça faydalı oluyor. Özellikle uygulama paylaşan bloglar için oldukça faydalı bir kod düzenledim.

Show / Hide - Göster / Gizle - Aç / Kapat - On / Off yazısı oluşturan kodlar :

<style type="text/css">
 dd { display: none; }
 </style>
<dl>
    <dt>
        İlgli Açıklama <a href="javascript:return false;" class="closed">Tılanınca Açılacak Metin</a>
    </dt>

    <dd>
        Bu bölüme açılacak metin geliyor.    </dd>

    <dt>
        İlgli Açıklama 2  <a href="javascript:return false;" class="closed">Detaylar</a>
    </dt>

    <dd>
        Bu bölüme açılacak metin geliyor.    </dd>

    <dt>
        İlgli Açıklama 3 <a href="javascript:return false;" class="closed">Detaylar</a>
    </dt>

    <dd>
        Bu bölüme açılacak metin geliyor.    </dd>
</dl>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
</script><script type="text/javascript">
$(document).ready(function(){
        $("dt").click(function(){
                $(this).next("dd").slideToggle("fast");
                $(this).children("a").toggleClass("closed open");
        });
});
 </script>


Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

Meraklısına js kodları :

0 yorum: