Css Konten jadi Menghilang Dengan Tombol Ex

Yang budjang maksudkan disini adalah konten dapat disembunyikan dengan menekan tombol ex, konten ini cocok digunakan untuk menampilkan informasi dan dapat di letakkan di manapun sesuai keinginan pemilik blog.

Menu Tersembunyi

Gambar diatas contoh hasil yang akan kita buat, bahan yang disiapkan seperti cabe 2kg, garam secukupnya, asam, bawang, tempe, tahu, belacan ☺ lalu bahan-bahan tersebut simpan saja di kulkas ☺ cukup menggunakan Html dan Css di bawah ini :

HTML CODE

<div class="showcontent"> <span onclick="this.parentElement.style.display='none'" class="hidecontent">x</span> <p>Klik X untuk menutup konten</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>

CSS CODE

<style> .showcontent{position:relative;border-radius:2px;color:#fff!important;text-align:justify;background-color:#3f51b5!important;padding:0.01em 16px; margin-top:16px;margin-bottom:16px} .showcontent:before,.showcontent:after{content:"";display:table;clear:both} /* tombol tutup */ .hidecontent{font-size:18px!important;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);font-weight:bold;position:absolute;right:0;top:0;border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap;border-radius:2px} .hidecontent:hover{color:#000!important;background-color:#9e9e9e!important;border-radius:2px} </style>