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

Show / Hide - Göster / Gizle - Aç / Kapat - Daralt / Genişlet Yazısı Kodu


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 HTML - CSS 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><!--Author: webkenti.net-->


How to make Collapse/Expand Boxes in HTML?


HTML / JAVASCRIPT EKLEMEK

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.



* Canlı Demo için :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Kod Editörünü kullanabilirsiniz.

0 yorum: