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

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

Sitelerde veya bloglar da 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. kodlar açık istediğiniz gibi düzenleyebilirsiniz.

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-->

Umarız faydası olur, zaman ayırıp yazımızı okuduğunuz için teşekkürler.

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.