Cara Membuat Kode HTML Button Close List Items

Pages/Halaman:

Dapatkan berita terupdate dari SAFAHAD.MY.ID di:

Advertisement

Swipe Up

Tangkapan Layar

SAFAHAD - Contoh Button Close List Items. Klik simbol "x" di sebelah kanan item daftar untuk menutup/menyembunyikannya. Untuk contoh, Klik Demo

Cara Membuat Item Daftar yang Dapat Ditutup

Langkah 1, Tambahkan HTML:

<ul id="myULclose">

<li><a href="javascript:void(0)">Adele</a></li>

<li><a href="javascript:void(0)">Agnes<span class="closeulb">&times;</span></a></li>

<li><a href="javascript:void(0)">Billy<span class="closeulb">&times;</span></a></li>

<li><a href="javascript:void(0)">Bob<span class="closeulb">&times;</span></a></li>

<li><a href="javascript:void(0)">Calvin<span class="closeulb">&times;</span></a></li>

<li><a href="javascript:void(0)">Christina<span class="closeulb">&times;</span></a></li>

<li><a href="javascript:void(0)">Cindy</a></li>

</ul>

Langkah 2, Tambahkan CSS:

<style>
#myULclose {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#myULclose li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 17px;
  color: black;
  display: block;
  position: relative;
}
#myULclose li a:hover:not(.header) {
  background-color: #eee;
}
#myULclose .closeulb {position: absolute;
    top: 50%;
    right: 0%;padding:12px 16px;
    transform: translate(0%,-50%);}
    .closeulb:hover {background:#bbb}
</style>

Selanjutnya, Langkah 3 Tambahkan JavaScript...

Langkah 3, Tambahkan JavaScript:

<script>
var closeULbtns = document.getElementsByClassName("closeulb");
var i;
for (i = 0; i < closeULbtns.length; i++) {
    closeULbtns[i].addEventListener("click", function() {
        this.parentElement.style.display='none';
    });
}
</script>

Lihat Artikel Seputar Blog Lainnya DISINI

Kontributor: Abdul Hamid

Sumber: w3schools