Home

Make Accordion Or Readmore CSS3

Diposting oleh Unknown di 06.31
Berikut ini langkah membuat Accordion menggunakan CSS3. Accordion sendiri akan menampilkan text per block atau seperti readmore tetapi per block.

Insert Tag HTML

 Ini merupakan file html yang di simpan dengan nama "index.html". 

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Accordion</title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
    </head>
    <body>

    <div id="wrap">

        <div class="accordion">

            <h2>Accordion Demo</h2>

            <div id="one" class="section">
                <h3> <a href="#one">Heading 1</a></h3>
                <div>
                    <p>Content, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolor ipsa laborum maiores tenetur velit iure voluptates eaque perferendis non expedita consequuntur id nihil ut!</p>
                </div>
            </div>

            <div id="two" class="section">
                <h3><a href="#two">Heading 2</a></h3>
                <div>
                    <p>Content, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci libero doloremque animi delectus ipsam dicta quas a.</p>
                </div>
            </div>

            <div id="three" class="section">
                <h3><a href="#three">Heading 2</a></h3>
                <div>
                    <p>Content, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci libero doloremque animi delectus ipsam dicta quas a.</p>
                </div>
            </div>

        </div>
        
    </div>
        
    </body>
</html>

Insert CSS

 Style yang digunakan oleh file "index.html".

body {
    background: #F1EBE2;
}

#wrap {
    width: 300px;
    margin: 10px auto 50px auto;
    padding: 20px;
    border: 1px solid #999999;
    border-radius: 15px;

    /* To show rounded*/
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;

    /* To show shadow*/
    -moz-box-shadow: 10px 10px 5px #888;
    -o-box-shadow: 10px 10px 5px #888;
    -ms-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
}

#wrap .accordion div div {
    background: #dddddd;
    padding: 10px;
}

#wrap .accordion h3 + div {
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.3s ease-in;
    -moz-transition: height 0.3s ease-in;
    -o-transition: height 0.3s ease-in;
    -ms-transition: height 0.3s ease-in;
    transition: height 0.3s ease-in;
}

#wrap .accordion :target h3 + div {
        height: 100px;
}

#wrap .accordion .section.large:target h3 + div {
        overflow: auto;
}

Demo

 Berikut ini adalah hasilnya :




Label:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)