<!DOCTYPE html> 
<html>
  <head>
    <style>
        /* Spoiler Box Pure CSS by Twentytwo-aio */
.KodeOprator {
    display:block; margin:10px 0px; border:1px solid #3498db; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.KodeOprator .tombol {
    background:#3498db; /* Warna tombol */
    color:#fff; /* Warna tulisan di tombol */
    display:inline-block; cursor:pointer; font:normal 600 14px Tahoma,sans-serif; padding:0px; border:none; outline:none; line-height:20px; border-radius:3px; -moz-border-radius:3px;
}
.KodeOprator .tombol:focus {
    pointer-events:none;
}
.KodeOprator .tombol:before {
    content:'Klik untuk melihat kode all oprator'; /* Tulisan untuk membuka tombol */
    display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.KodeOprator .tombol:focus::before {
    content:'Klik dimana saja untuk menutup'; /* Tulisan untuk menutup tombol */
    background:#cc0000; /* Warna tombol ketika spoiler terbuka */
}
.KodeOprator .isi {
    background:#e4e4e4; /* Warna background isi spoiler */
    pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .5s ease;
}
.KodeOprator .tombol:focus + .isi {
    visibility:visible; opacity:1; height:auto; margin:10px 0px 5px; padding:10px 15px; transition:all .5s ease;
}
    </style>
  </head>
  <body> 
  <div class="KodeOprator">
    <div class="tombol" tabindex="0"></div>
    <div class="isi">
        <!-- Isi Spoiler -->
        <h3><bold>TELKOMSEL</bold><br></h3>
        - 0811 <i>hallo</i><br>
        - 0812 <i>simpati</i><br>
        - 0813 <i>simpati</i><br>
        - 0821 <i>simpati</i><br>
        - 0822 <i>simpati</i><br>
        - 0823 <i>as</i><br>
        - 0851 <i>as</i><br>
        - 0852 <i>as</i><br>
        - 0853 <i>as</i><br>
        <br>
        <h3><bold>INDOSAT</bold><br></h3>
        - 0814 <i>m2 broadband</i><br>
        - 0815 <i>matrix & mentari</i><br>
        - 0816 <i>matrix & mentari</i><br>
        - 0855 <i>matrix</i><br>
        - 0856 <i>im3</i><br>
        - 0857 <i>im3</i><br>
        - 0858 <i>mentari</i><br>
        <br>
        <h3><bold>XL</bold><br></h3>
        - 0817 <br>
        - 0818 <br>
        - 0819 <br>
        - 0859 <br>
        - 0877 <br>
        - 0878 <br>
        <br>
        <h3><bold>AXIS</bold><br></h3>
        - 0838 <br>
        - 0831 <br>
        - 0832 <br>
        - 0833 <br>
        <br>
        <h3><bold>3 (THREE)</bold><br></h3>
        - 0895 <br>
        - 0896 <br>
        - 0897 <br>
        - 0898 <br>
        - 0899 <br>
        <br>
        <h3><bold>SMARTFREN</bold><br></h3>
        - 0881 <br>
        - 0882 <br>
        - 0883 <br>
        - 0884 <br>
        - 0885 <br>
        - 0886 <br>
        - 0887 <br>
        - 0888 <br>
        - 0889 <br>
        <br>
        
    </div>
</div> 
  </body>
</html>