Code Mở rộng thu gọn chi tiết cực đẹp

Hôm nay lang thang trên mạng để tìm kiếm một số mã nguồn Visual Studio hay thì Hùng Coder thấy có trang web sữ dụng mã nguồn này khá hay nên xem xét view source và đem về viết bài chia sẽ cho anh em :D


Ngày nay, bạn có thể tìm một thư viện JS cho mọi tính năng mà bạn cần trong một trang web. Nhưng nhiều khi điều đó trở thành sự lạm dụng quá mức khi mà HTML cũng có thể làm được điều tương tự. Hơn nữa, việc sử dụng thư viện JS thừa thãi sẽ làm chậm trang web của bạn, ảnh hưởng tới trải nghiệm người dùng.

Chúng ta bắt đầu nhé.

HTML
<h1>Detail and Summary</h1>

<h2>Read more about the wizarding schools:</h2>

<section>
    <details open>
        <summary>Beauxbatons Academy of Magic</summary>
        <p>
            If you like your magic served with a dash of savoir faire, this school is for you. Beauxbatons welcomes a multitude of students of different nationalities, mainly French, but also Spanish, Portuguese, Dutch, Luxembourgian and Belgian.
        </p>
    </details>

    <details>
        <summary>Durmstrang Institute</summary>
        <p>You’ll certainly hear a few interesting stories at Durmstrang, seeing as this is the school that Dark wizard Gellert Grindelwald was expelled from. </p>
    </details>

    <details>
        <summary>Ilvermorny School of Witchcraft and Wizardry
        </summary>
        <p>If you fancy living a Hogwarts-style life across the pond. The founder of Ilvermorny, Isolt Sayre, always wished she could go to Hogwarts, and the school definitely seems to embody some of its traditions. </p>
    </details>

    <details>
        <summary>Hogwarts School of Witchcraft and Wizardry
        </summary>
        <p>Because you love it. But also because of its detailed history, secret passages, eccentric professors, wisecracking ghosts, lovely house-elves, talking portraits and much, much more besides. Most importantly, Hogwarts seems to have a sense of humour
            about itself, and round every corner is a new delight. </p>
    </details>
</section>


CSS
/* Only for styling, not required for it to work */
body {
    background-color: lightsteelblue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1 {
    font-size: 3rem;
    color: #fff;
    font-family: "Berkshire Swash", cursive;
    text-align: center;
}

h2 {
    font-size: 1.2rem;
    font-family: sans-serif;
    text-align: center;
}

details {
    margin-bottom: 20px;
    width: 100%;
    font-family: sans-serif;
}

details p {
    padding: 20px;
}

summary {
    padding: 20px;
    background-color: #9fb6ce;
    border: 1px solid #9fb6ce;
    outline: none;
}

summary:hover,
summary:focus {
    border: 1px solid lightslategray;
}

details[open] summary {
    background-color: lightslategray;
    border: 1px solid lightslategray;
}

details[open] {
    background: #fff;
}

section {
    max-width: 80%;
    width: 100%;
}

DEMO
DEMO
Quá tốt phải không các bạn, với 1 đoạn code đơn giản trên mà bạn đã có một thủ thuật khá hay cho website or blog của bạn rồi :D
Chúc các bạn có một thủ thuật hay.


Mật Khẩu Mặc Định Để Tải Template Hoặc Apps Nếu Có :
hungcoder.com Hoặc Smile92@

Related Posts

Comments