Script menyisipkan segitiga untuk menampilkan dan menyembunyikan konten

Script menyisipkan segitiga untuk menampilkan dan menyembunyikan konten

Artikel
Jumlah
Shipping Region
Jumlah Barang
Shipping to
Harga kirim
Share

WhatsApp Form ×

Script menyisipkan segitiga untuk menampilkan dan menyembunyikan konten

Script menyisipkan segitiga untuk menampilkan dan menyembunyikan konten

Harga :
Ongkos Kirim :




Bayar di Aplikasi

Bayar di Aplikasi OVO & DANA!

Klik tombol Lihat kode QR.
Scan kodenya untuk bayar di app.
Send

Read more

Spesifikasi

Kategori
ID Produk 7585004768820537192

Deskripsi

Berita

Artikel
Berita Terupdate
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



                      Read more Sembunyikan

                      GUDANG BISNIS