Bu konuyu çok ihtiyaç duyulması sebebi ile yazmaktayım. Bu özellikten faydalanmak için Pages ve BBCode Details eklentilerinin sitenizde kurulu olması gerekmektedir. Anlatacağım adımları aynen takip ederseniz aşağıdaki görünümü elde edeceksiniz. Konuyu bu iki eklentiyi indirdiğinizi varsayarak anlatmaya başlıyorum.

Pages

  1. Pages eklentisine ilerleyin.
  2. Sayfa Oluştur butonuna tıklayın.
  3. Başlık ve Adres Kısa Adı alanını kendinize göre doldurun.
  4. İçerik kısmına aşağıdaki şablona uygun bir şekilde içerik ekleyin veya nasıl göründüğüne bakmak için aşağıdaki kodu İçerik kısmına ekleyin. 
    [details title="Açılır Pencere"]
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
[/details]
[details title="Açılır Pencere"]
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
[/details]
[details title="Açılır Pencere"]
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
[/details]
[details title="Açılır Pencere"]
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
[/details]
[details title="Açılır Pencere"]
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
[/details]
[details title="Açılır Pencere"]
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
[/details]
  5. Kaydet butonuna tıklayın.

Özel CSS

  1. Yönetim alanında bulunan Görünüm alanına ilerleyin.
  2. Özel Stiller alanına aşağıdaki kodu ekleyin. 
    /* Details */
details {
    border: 1px solid @muted-color;
    border-radius: 4px;
    padding: .5em .5em 0;
    color: @muted-color!important;
    background-color: @body-bg!important;
}

summary::-webkit-details-marker {display: none; }

details summary::before { 
    font-family: 'Font Awesome\ 5 Free';
    content: "\f105"; /* FontAwesome Unicode */
    font-weight: 900;
    padding: .5em .5em 0;
}

details[open] summary::before { 
    font-family: 'Font Awesome\ 5 Free';
    content: "\f106"; /* FontAwesome Unicode */ 
    padding: .5em .5em 0;
}
/* End Details */

    Doğal olarak unuttuğum kilit noktalar olabilir. Herhangi bir sorun olursa buradan belirtebilirsiniz.

    emeğiniz için çok teşekkürler bayadır arıyordum.
    Ok işaretleri biraz bozuk çıkıyor bende ve sayfa genişliğinden olabilirmi acaba? Sayfayı sizin gönderdiğiniz resimdeki nasıl gibi genişletebilirim ?

    • Can bunu yanıtladı.

      Burakcnnar Temadan kaynaklanıyor olabilir tam emin değilim. Genişlik konusunda ise monitörüm biraz büyük.

        FontAwesome yedirmeye çalışacağım. Yer ise kodu güncelleyeceğim.

          Güncelleme

          Burakcnnar Ok işaretleri biraz bozuk çıkıyor bende ve sayfa genişliğinden olabilirmi acaba? Sayfayı sizin gönderdiğiniz resimdeki nasıl gibi genişletebilirim ?

          Bu isteğe karşılık simge için FontAwesome kullanımı örneği. Aşağıdaki kodu CSS alanında bulunan benzer kodunuz ile güncelleyin.

          details summary::before { 
    font-family: 'Font Awesome\ 5 Free';
    content: "\f105"; /* FontAwesome Unicode */
    font-weight: 900;
    padding: .5em .5em 0;
}

details[open] summary::before { 
    font-family: 'Font Awesome\ 5 Free';
    content: "\f106"; /* FontAwesome Unicode */ 
    padding: .5em .5em 0;
}

              Can düzeldi ve çalışıyor emeğinize sağlık

              • Can bunu beğendi.
                bir ay sonra

                Can Bu paylasiminiz gorunce aklima ilk su soru geldi fof pages te html kullananlar html sayfada bu ozelligi nasil kullancaklar ?
                fof pages eklentisinde ilk olarak html ozelligini acip sonra asagidaki gibi page kismina ekleme yapilabilir

                <div>
        <details><summary>Açılır Pencere</summary><div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500′lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960′larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
</div></details>
<details><summary>Açılır Pencere</summary><div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500′lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960′larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
</div></details>
<details><summary>Açılır Pencere</summary><div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500′lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960′larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
</div></details>
<details><summary>Açılır Pencere</summary><div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500′lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960′larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
</div></details>
<details><summary>Açılır Pencere</summary><div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500′lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960′larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
</div></details>
<details><summary>Açılır Pencere</summary><div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500′lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960′larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
</div></details>


    </div>

                ayni zamanda asagaki gibi gorunum elde etmek isterseniz de yukaridaki csslere ek asagidaki cssyi de ekleyebilirsiniz

                details summary {
                display: flex;
                justify-content: space-between;
                padding: 1em;
                background: #eee;
                font-weight: bold;
                cursor: pointer;
                }

                • Can bunu yanıtladı.
                    Hadımköy Kombi Servisi Minecraft Türk Sunucular