Yalnızca HTML ve CSS ile basit F&Q

Yalnızca CSS kullanarak yapılan şeyleri sevdiğimi birçok defa söylemiştim, sadece HTML ile yapılan şeyleri de seviyorum. Aslında ek JavaScript gerekmeksizin uygulama veya web sitesinde birçok şey yapılabiliyor ancak çoğu developer çok daha kolay yazabildiği ve CSS’in karmaşasına girmemek için JavaScript tercih ederler, fakat bu elbette sitenin çalışma hızından ödün vermek anlamına gelmektedir.

Bu yazımda <details> ve <summary> HTML etiketlerini kullanarak akordiyon şeklinde bir soru/cevap veya daha sık kullanımıyla kısaca F&Q sayfası oluşturmayı örnek olarak göstereceğim.

HTML’imiz şu şekilde:

<section id="f&q">
        <div class="faq text-center">
            <h1>F&Q</h1>
            <p>Latest Question answer</p>
        </div>
        <div class="faq-main">
            <div class="container">
                <details>
                    <summary>What is get wave.com?</summary>
                    <p class="text">
                        As a Premium user you will be able to download licenses that will
                        allow you to use all those resources included in Freepik Selection
                        without attribution.
                    </p>
                </details>
                <details>
                    <summary>How our service works?</summary>
                    <p class="text">
                        This is vey important think in the web development
                    </p>
                </details>
                <details>
                    <summary>
                        Can I use downloaded content to create work for a client?
                    </summary>
                    <p class="text">
                        This is vey important think in the web development
                    </p>
                </details>
                <details>
                    <summary>What are the benefits of a Premium Membership?</summary>
                    <p class="text">
                        This is vey important think in the web development
                    </p>
                </details>
                <details>
                    <summary>What is get wave.com?</summary>
                    <p class="text">
                        This is vey important think in the web development
                    </p>
                </details>
            </div>
        </div>
    </section>

CSS’imiz şu şekilde:

.faq{
 text-align: center;
}

.faq h1:before{
    content: '';
    position: absolute;
    top: 100;
    background-color: #EC6EAD;
    height: 3px;
    width: 120px;
    margin-left: -20px;
    margin-top: 50px;
    margin-bottom: 10px;
}

.faq{
margin-top: 70px;
}

.faq-main{
    padding: 50px 50px;
    margin-left: 40px;
}

::-webkit-details-marker{
    float: right;
    margin-top: 3px;
}

details{
    padding: 5px 20px;
    border-radius: 7px;
    margin-top: 15px;
    cursor: pointer;
    letter-spacing: 1px;
}

summary{
    font-size: 20px;
    font-weight: 500;
}

details p{
    padding: 20px 20px;
    font-size: 17px;
    font-weight: 500;
}

Sonuç:

Kaynak: @developer_nikhil27(Nikhil Bobade)