Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Cara Simpel Membuat Accordion Seperti SekolahKoding
Salam,
Udah lama ngga nulis di perpus lagi.. hehe. Ok, pada kesempatan kali ini saya akan membagi trik cara simple membuat accordion seperti di SekolahKoding. Soure Code nya saya copas dari W3Schools dan saya terapkan pada project web music saya. Disini saya akan menjelaskan guna dari setiap elemen
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/styles.css" >
<link href="https://fonts.googleapis.com/css?family=Overlock+SC" rel="stylesheet">
</head>
<body>
<button class="accordion"> Honey, This Mirror isn't Big enough For the Two of Us </button>
<div class="panel">
<p>
The amount of pills I'm taking, counteracts the booze I'm drinking <br>
and this vanity I'm breaking, lets me live my life like this <br>
and well I find it hard to stay, with the words you say <br>
Oh baby let me in <br>
Oh baby let me in <br>
Well I'll choose the life I've taken, never mind the friends I'm making <br>
and the beauty that I'm faking lets me live my life like this <br>
And well I find it hard to stay, with the words you say <br>
Oh baby let me in <br>
Oh baby let me in <br>
</p>
<p>
And you can cry all you want to, I don't care how much
You'll invest yourself in me, we're not working out <br>
(we're not working out) <br>
We're not working out <br>
(we're not working out) <br>
And you can't touch my brother and you can't keep my friends <br>
and we're not working out, we're not working out <br>
This time I mean it, never mind the times I've seen it <br>
</p>
<p>
Well I hope I'm not mistaken by the news I heard from waking <br>
and it's hard to say I'm shaken, by the choices that I make <br>
and well I find it hard to stay, with the words you say <br>
Oh baby let me in <br>
Oh baby let me in <br>
Well I'll choose this life I've taken, never mind the friends I'm making <br>
And I get a little shaken, because I live my life like this <br>
And well I find it hard to stay, with the words you say <br>
Oh baby let me in <br>
Oh baby let me in <br>
</p>
<p>
And you can cry all you want to, I don't care how much <br>
You'll invest yourself in me, we're not working out, <br>
We're not working out <br>
And you can't keep my brother, and you won't fuck my friends <br>
and we're not working out, we're not working out <br>
This time I mean it, never mind the times I've seen it <br>
</p>
<p>
Never again, never, never again
</p>
<p>
(and you can cry all you want to, <br>
I don't care how much you'll invest yourself in me) <br>
ne.. never... never... never again <br>
(and you can cry all you want to, <br>
I don't care how much you'll invest yourself) <br>
ne.. never... never... oh baby let me.. oh baby... oh baby <br>
</p>
<p>
Oh baby let me in <br>
Oh baby let me in <br>
I'm knocking let me in <br>
Oh baby let me in <br>
Oh baby let me in <br>
I'm knocking let me in <br>
Oh baby let me in <br>
Oh baby let me in <br>
</p>
</div>
<button class="accordion">Vampire Will Never Hurt You</button>
<div class="panel">
<p>
And if they get me and the sun goes down into the ground <br>
And if they get me take this spike to my heart and <br>
And if they get me and the sun goes down <br>
And if they get me take this spike and <br>
You put the spike in my heart <br>
</p>
<p>
And if the sun comes up will it tear the skin right off our bones <br>
And then as razor sharp white teeth rip out our necks I saw you there <br>
Someone get me to the doctor, someone get me to a church <br>
Where they can pump this venom gaping hole <br>
And you must keep your soul like a secret in your throat <br>
And if they come and get me <br>
What if you put the spike in my heart <br>
</p>
<p>
And if they get me and the sun goes down <br>
And if they get me take this spike and <br>
</p>
<p>
(Come on!)
</p>
<p>
[Chorus] <br>
Can you take this spike? <br>
Will it fill our hearts with thoughts of endless <br>
Night time sky? <br>
Can you take this spike? <br>
Will it wash away this jet black feeling? <br>
</p>
<p>
And now the nightclub sets the stage for this they come in pairs she said <br>
We'll shoot back holy water like cheap whiskey they're always there <br>
Someone get me to the doctor, and someone call the nurse <br>
And someone buy me roses, and someone burned the church <br>
We're hanging out with corpses, and driving in this hearse <br>
And someone save my soul tonight, please save my soul <br>
</p>
<p>
[Chorus] <br>
Can you take this spike? <br>
Will it fill our hearts with thoughts of endless <br>
Night time sky? <br>
Can you take this spike? <br>
Will it wash away this jet black now? <br>
</p>
<p>
(Let's go! Come on!)
</p>
<p>
And as these days watch over time, and as these days watch over time <br>
And as these days watch over us tonight <br>
[x2] <br>
</p>
<p>
I'll never let them, I'll never let them <br>
I'll never let them hurt you not tonight <br>
I'll never let them, I can't forget them <br>
I'll never let them hurt you, I promise <br>
</p>
<p>
Struck down, before our prime <br>
Before, you got off the floor <br>
Can you stake my heart? Can you stake my heart? <br>
</p>
<p>
Can you stake my heart? Can you stake my heart? <br>
(And these thoughts of endless night <br>
bring us back into the light <br>
and this venom from my heart) <br>
</p>
<p>
Can you stake my heart? Can you stake my heart? <br>
(And these thoughts of endless night <br>
bring us back into the light <br>
kill this venom from my heart) <br>
</p>
<p>
Can you stake me before the sun goes down?
</p>
<p>
(And as always, innocent like roller coasters. <br>
Fatality is like ghosts in snow and you have no idea <br>
what you're up against <br>
because I've seen what they look like. <br>
Becoming perfect as if they were sterling <br>
silver chainsaws going cascading...) <br>
</p>
</div>
<button class="accordion">Drowning Lessons</button>
<div class="panel">
<p>
Without a sound I took her down <br>
and dressed in red and blue I squeezed <br>
Imaginary wedding gown <br>
That you can't wear in front of me <br>
A kiss goodbye, your twisted shell <br>
As rice grains and roses fall at your feet <br>
Lets say goodbye, the hundredth time <br>
And then tomorrow we'll do it again <br>
Tomorrow we'll do it again <br>
</p>
<p>
I dragged her down I put her out <br>
And back there I left her where no one could see <br>
And lifeless cold into this well <br>
I stared as this moment was held for me <br>
A kiss goodbye, your twisted shell <br>
As rice grains and roses fall at your feet <br>
Let's say goodbye, the hundredth time <br>
And then tomorrow we'll do it again <br>
</p>
<p>
I never thought it'd be this way <br>
Just me and you, we're here alone <br>
And if you stay, all I'm asking for is <br>
A thousand bodies piled up <br>
I never thought would be enough <br>
To show you just what I've been thinking <br>
</p>
<p>
And I'll keep on making more <br>
Just to prove that I adore <br>
Every inch of sanity <br>
All I'm asking for is, all I'm asking for is <br>
</p>
<p>
C'mon
</p>
<p>
These hands stained red <br>
From the times that I've killed you and then <br>
We can wash down this engagement ring <br>
With poison and kerosene <br>
We'll laugh as we die <br>
And we'll celebrate the end of things <br>
With cheap champagne <br>
</p>
<p>
Without, without a sound [x2] <br>
And I wish you away <br>
Without a sound <br>
And I wish you away <br>
</p>
<p>
Without a sound, without a sound <br>
And I wish you away <br>
[x3] <br>
</p>
</div>
</body>
</html>
<script>
/* Mendeklarasikan variabel
untuk akses class accordion */
var acc = document.getElementsByClassName("accordion");
var i;
/* Membuat perulangan forloop
pada accordion maksudnya
accordion diberi nilai awal 0
dan dengan increment atau tanda plus
yang
akan menambah otomatis */
for (i = 0; i < acc.length; i++)
{
acc[i].onclick = function()
{
this.classList.toggle("active");
/* this merujuk pada nama
anounymous function yaitu acc[i]
classlist menambahkan kelas pada css
dengan nama active dan
Toggle menyembunyikan dan akan
menampilkan panel yang aktif */
/* Mendeklarasikan variabel panel
this merujuk pada anounymous
function dan metode NextElemenSibling
ada memilih elemen berikutnya sebelum
class accordion*/
var panel = this.nextElementSibling;
/* panel style max-height
adalah cara javascript untuk
mengambil suatu elemen pada css*/
/* logika nya adalah ketika
panel style max-height
sesuai nilai dari css
pada kasus ini kita
beri nilai 0 lalu jika
max-height 0 maka
logika if akan digunakan
dan jika tidak maksudnya
max-height akan menambah
nilai */
if (panel.style.maxHeight)
{
panel.style.maxHeight = null;
}
else
{
panel.style.maxHeight = panel.scrollHeight + 'px';
}
}
}
</script>
CSS
*
{ font-family: 'Overlock SC', cursive; }
/* Mengatur tombol button agar ketika
digunakan untuk membuka dan
menutup panel accordion nya */
button.accordion
{ background-color: #ffe0b2;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
font-size: 25px;
text-align: left;
border: none;
outline: none;
transition: 0.4s; }
/* Menambahkan Warna latar belakang
dan warna teks untuk tombol button
jika sudah di klik akan ditambahkan
satu class .active pada
javascript dan ketika cursor
diatas tombol button*/
button.accordion.active,
button.accordion:hover
{ background-color: #ffe0a6; }
/* Mengatur panel accordion
catatan : panel tersembunyi
karena max-height diberi nilai 0
untuk memberikan efek animasi dengan
transisi dan overflow hidden
akan menyembunyikan jika ukuran
melebihi batas*/
div.panel
{ padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
background-color: #ffe0a9;
text-align: center; }
/*-- Pseudo after adalah
property setelah elemen dan
button accordion akan
melakukan sesuatu setelah itu memberikan
efek sesuai propertinya
biasanya digunakan pada clearfix
pada kasus ini kita akan menambahkan
property content biasanya isi dari content
berupa arrow dan maksud dari angka tersebut
adalah nilai dari hexadecimal dan nilai
tersebut akan menerjemahkan
sesuai dengan codenya untuk
melihat berbagai unicode bisa cari di google
*/
button.accordion:after
{ content: '\266b';
font-size: 50px;
color: rgb(60, 60, 60);
float: right;
margin-left: 5px; }
/*-- OPTIONAL --*/
div.panel p
{ line-height: 45px;
font-size: 25px; }
2
Belum ada Jawaban. Jadi yang pertama Jawaban
Login untuk ikut Jawaban