Spoiler di Postingan

by Arlina Fitriyani

HTML

<body>  
  <div class='post-body'>
    <h2 class='post-title'>Contoh Penerapan Spoiler</h2>
<div id="flippy"><button>Cekidot</button></div>
<div id="flippanel">
<p class="texty">Konten spoiler ini dapat anda isi dengan text :</p>
<p>Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam. Aliquam leo ante, posuere id suscipit et, varius quis metus. Aenean tincidunt pellentesque facilisis.</p>    
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.</p>     
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>  
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem. Ut id ultricies metus, sed pharetra ipsum. Donec egestas, mi a sagittis rhoncus.</p>
<p class="texty">Gambar :</p>
<p><img src='http://1.bp.blogspot.com/-BnrlmHbJO20/VDCttPEb8KI/AAAAAAAABck/Pssj8W9TdUg/s1600/Arlina%2BDesign%2B2.png'></p>
<p class="texty">Video :</p>
<p class="vidv"><iframe width="560" height="315" src="//www.youtube.com/embed/84NI5fjTfpQ" frameborder="0" allowfullscreen></iframe></p>
<p class="texty">Ataupun konten lainnya.</p></div> 
</div>   
</body>

CSS

body {
    background-color: #f9f9f9;
    font-size: 16px;
    color: #444;
}

.post-body h2 {
    color: #e25633;
    text-align: center;
}

.post-body {
    max-width: 680px;
    margin: 20px auto;
    border: 10px solid #f0f0f0;
    padding: 15px 20px;
    background-color: #fff;
    color: #444;
}

.post-body img {
    max-width: 100%;
    height: auto;
}

.post-body iframe, iframe {
    max-width: 100%;
    margin: 0 auto;
}

p.vidv {
    text-align: center;
}

p.texty {
    font-weight: bold;
    font-size: 18px;
    color: crimson;
    text-align: center;
    margin: 10px auto;
}

#flippy {
    text-align: center;
}

#flippy button {
    background: #aa65c7;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    border: none;
    border-radius: 3px;
    padding: 8px 16px;
    margin: 10px auto;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0px 3px 0px 0px #883da7;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    transition: background 0.1s ease-in-out;
}

#flippy button:hover {
    background: #9e4fbf;
    outline: none;
}

#flippy button:focus {
    background: #9e4fbf;
    outline: none;
}

#flippanel {
    padding: 1px;
    text-align: left;
    background: #f5f5f5;
    border: 0px;
}

#flippanel {
    padding: 24px;
    display: none;
}

JavaScript

$(document).ready(function() {
    $("#flippy").click(function() {
        $("#flippanel").slideToggle("normal");
    });
});