Script menyisipkan segitiga untuk menampilkan dan menyembunyikan konten

Artikel

Berita Terupdate

Baca Selengkapnya

Detail Berita :  Script menyisipkan segitiga untuk menampilkan dan menyembunyikan konten?
Anda dapat mengonversi elemen HTML apa pun pada halaman sebagai akordeon hanya dengan menambahkan kelas ke dalamnya dan elemen berikutnya sebagai penampungnya. Halaman ini berisi kode lengkap dari dua jenis akordeon yang berbeda. Satu-satunya persyaratan untuk menggunakan kode-kode ini adalah jQuery. Pilih jenis akordeon sesuai pilihan Anda, gunakan kode di situs web Anda dan nikmati. Anda dapat menyesuaikan kode sesuai kebutuhan Anda.

Setiap akordeon tidak bergantung pada akordeon lain di halaman.

Akordeon dan penampungnya dapat berupa elemen HTML apa pun.

Script menyisipkan segitiga pada pemuatan halaman dengan arah sesuai visibilitas set elemen konten akordeon dan juga menambahkan atribut judul 'Klik / Ketuk untuk Menampilkan / Sembunyikan Konten'.

Pada klik / ketuk pada akordeon, skrip menyembunyikan / menampilkan isinya dan mengubah arah segitiga

Lihat HTML  Demo:

Copy scriptnya kemudian pastekan..

<style>

/* For accordion and span containing up / down triangle */

.acc1{width:100%;font-weight:400;background:#00f;color:#fff;margin:20px 0 0 0;padding:5px 10px;cursor:pointer;}

.triangle1 {float:right}

/* For accordion content elements */

.acc1 + * {padding:5px 10px;margin:0;border:1px solid #00f}

</style>

<script>jQuery(function(){

//function to insert a span with class 'triangle1' in each accordion containing up or down triangle.

jQuery.each(jQuery('.acc1'),function(){jQuery(this).prepend('<span class=triangle1 ></span>');jQuery(this).attr('title','Click / Tap to Show / Hide Content');

//function to change the triangle as per the visibility of content set on page load.

if(jQuery(this).next().css('display')=='block'){jQuery(this).children('.triangle1').html('▲');} else {jQuery(this).children('.triangle1').html('▼');}});

//function to show hide content of accordion and change direction of triangle on click.

jQuery('.acc1').bind('click',function(){if(jQuery(this).next().css('display')=='none'){jQuery('.acc1').next().hide();jQuery(this).next().slideDown();jQuery('.trangle1',this).html('▲');} 

else {jQuery(this).next().slideUp();jQuery('.triangle1',this).html('▼');}});

})

</script>

HTML of Accordions shown in Demo:

<h3 class='acc1'>Accordion 1</h3>

<div>I am content of Accordion  1.</div>

<p class='acc1'>Accordion 2 (Content Hidden on page load)</p>

<p style='display:none'>I am content of Accordion  2.</p>

<div class='acc1'>Accordion  3</div>

<p>I am content of Accordion  3.</p>

Accordion 2

I am content of Accordion 2.

Accordion 3

I am content of Accordion 3.

1. Istillah-istilah dan Defenisi yang digunakan dalam RDTR dan PZ Kawasan Prioritas
2. Cara membuat Artikel Berkualitas