jQuery UI akordeon yang membuat banyak bagian terbuka?

Jawaban:

94

Ini awalnya dibahas dalam dokumentasi jQuery UI untuk Accordion :

CATATAN: Jika Anda ingin beberapa bagian terbuka sekaligus, jangan gunakan akordeon

Akordeon tidak mengizinkan lebih dari satu panel konten terbuka pada saat yang sama, dan perlu banyak upaya untuk melakukannya. Jika Anda mencari widget yang memungkinkan lebih dari satu panel konten terbuka, jangan gunakan ini. Biasanya dapat ditulis dengan beberapa baris jQuery, seperti ini:

jQuery(document).ready(function(){
  $('.accordion .head').click(function() {
      $(this).next().toggle();
      return false;
  }).next().hide();
});

Atau animasi:

jQuery(document).ready(function(){
  $('.accordion .head').click(function() {
      $(this).next().toggle('slow');
      return false;
  }).next().hide();
});

"Saya mungkin idiot" - Anda bukan idiot jika Anda tidak membaca dokumentasinya, tetapi jika Anda mengalami masalah, biasanya mempercepat menemukan solusi.

— MvanGeest
sumber
9
Solusi ini tidak melakukan penataan akordeon apa pun.
— forresto
12
Selain itu, ini sama sekali bukan solusi untuk pertanyaan tersebut. Dokumen akordeon dan daftar opsi, acara, dll. Sangat buruk. Dan alih-alih memberi tahu pengguna "jika kami tidak memiliki opsi untuk Anda - jangan gunakan!" mereka harus mengatakan "maaf belum ada pilihan untuk itu, tapi kami menyambut setiap kontributor yang menambahkan fungsionalitas ke plugin hebat kami"
— artgrohe
Teks yang saya kutip telah dihapus dari dokumentasi. Saya menambahkan link ke versi yang diarsipkan.
— MvanGeest
1
Perlu diingat bahwa jQuery UI Accordion melakukan lebih dari sekadar membuat efek akordeon yang sebenarnya. Itu juga menambahkan banyak markup aksesibilitas untuk pembaca layar.
— Brian
2
Ini tidak masuk akal. Akordeon dapat memiliki semua lipatan terbuka jika lengan musisi berjauhan, semua lipatan tertutup jika instrumen menjadi satu, atau ada sesuatu di antaranya. Jika kata-kata berarti apa-apa, maka kontrol UI perangkat lunak akordeon harus mengizinkan kombinasi panel terbuka dan tertutup.
— birdus
119

Cukup mudah:

<script type="text/javascript">
    (function($) {
        $(function() {
            $("#accordion > div").accordion({ header: "h3", collapsible: true });
        })
    })(jQuery);
</script>

<div id="accordion">
    <div>
        <h3><a href="#">First</a></h3>
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    </div>
    <div>
        <h3><a href="#">Second</a></h3>
        <div>Phasellus mattis tincidunt nibh.</div>
    </div>
    <div>
        <h3><a href="#">Third</a></h3>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>
— 2upmedia
sumber
1
Bekerja dengan baik. Saya menambahkan create: function(event) { $(event.target).accordion( "activate", false ); }untuk mulai runtuh.
— forresto
2
Hebat. Senang itu berhasil untuk Anda. :) Saya suka membuat semuanya sesederhana mungkin.
— 2upmedia
7
di jquery-ui 1.10, untuk mulai runtuh, alih-alih create: function(event) { $(event.target).accordion( "activate", false ); }Anda mengatur opsi:{active: false}
— damko
16
(facepalm) akordeon terpisah untuk setiap blok.
— Paul Annekov
2
Inilah jsFiddle yang saya gunakan untuk mengujinya jsfiddle.net/txo8rx3q/1 Saya juga menambahkan beberapa CSS untuk menghentikan bagian akordeon yang terbuka terlihat dipilih saat diperluas
— Matthew Lock
77

Memposting ini di utas yang serupa, tetapi menurut Anda mungkin relevan di sini juga.

Mencapai ini dengan satu instance jQuery-UI Accordion

Seperti yang dicatat orang lain, Accordionwidget tidak memiliki opsi API untuk melakukan ini secara langsung. Namun, jika karena alasan tertentu Anda harus menggunakan widget (misalnya Anda mempertahankan sistem yang ada), hal ini dapat dilakukan dengan menggunakan opsi beforeActivateevent handler untuk menumbangkan dan meniru perilaku default widget.

Sebagai contoh:

$('#accordion').accordion({
    collapsible:true,

    beforeActivate: function(event, ui) {
         // The accordion believes a panel is being opened
        if (ui.newHeader[0]) {
            var currHeader  = ui.newHeader;
            var currContent = currHeader.next('.ui-accordion-content');
         // The accordion believes a panel is being closed
        } else {
            var currHeader  = ui.oldHeader;
            var currContent = currHeader.next('.ui-accordion-content');
        }
         // Since we've changed the default behavior, this detects the actual status
        var isPanelSelected = currHeader.attr('aria-selected') == 'true';

         // Toggle the panel's header
        currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

        // Toggle the panel's icon
        currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

         // Toggle the panel's content
        currContent.toggleClass('accordion-content-active',!isPanelSelected)    
        if (isPanelSelected) { currContent.slideUp(); }  else { currContent.slideDown(); }

        return false; // Cancels the default action
    }
});

Lihat demo jsFiddle

— Boaz
sumber
6
Terima kasih! Ini adalah solusi terbaik karena Anda tidak memerlukan perubahan di semua lingkungan Anda yang ada.
— artgrohe
Ini membutuhkan jQuery UI 1.9.0+ (Drupal 7 macet dengan 1.8.7)
— Capi Etheriel
1
Saya percaya kelas aktif telah berubahui-accordion-header-active
— Tim Vermaelen
bekerja sangat baik untuk saya, jumlah refactoring minimal :-)
— Darkloki
solusi yang baik, satu-satunya masalah adalah solusi ini tidak akan mengambil opsi ikon :-)
— Tachyons
20

Atau bahkan lebih sederhana?

<div class="accordion">
    <h3><a href="#">First</a></h3>
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>    
<div class="accordion">
    <h3><a href="#">Second</a></h3>
    <div>Phasellus mattis tincidunt nibh.</div>
</div>         
<div class="accordion">
    <h3><a href="#">Third</a></h3>
    <div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
<script type="text/javascript">
    $(".accordion").accordion({ collapsible: true, active: false });
</script>
— Roman Gudkov
sumber
Ini bagus imho. Solusi mudah dan memecahkan masalah yang saya alami dengan kinerja set item akordeon yang besar. Mengejutkan saat menginisialisasi satu set akordeon besar akan menghasilkan performa yang baik. Terima kasih!
— Kode Novisiat
14

Saya telah melakukan plugin jQuery yang memiliki tampilan yang sama dengan jQuery UI Accordion dan dapat membuat semua tab \ bagian terbuka

Anda dapat menemukannya di sini

http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

bekerja dengan markup yang sama

<div id="multiOpenAccordion">
        <h3><a href="#">tab 1</a></h3>
        <div>Lorem ipsum dolor sit amet</div>
        <h3><a href="#">tab 2</a></h3>
        <div>Lorem ipsum dolor sit amet</div>
</div>

Kode Javascript

$(function(){
        $('#multiOpenAccordion').multiAccordion();
       // you can use a number or an array with active option to specify which tabs to be opened by default:
       $('#multiOpenAccordion').multiAccordion({ active: 1 });
       // OR
       $('#multiOpenAccordion').multiAccordion({ active: [1, 2, 3] });

       $('#multiOpenAccordion').multiAccordion({ active: false }); // no opened tabs
});

UPDATE: plugin telah diperbarui untuk mendukung opsi tab aktif default

PEMBARUAN: Plugin ini sekarang tidak digunakan lagi.

— Anas Nakawa
sumber
Solusi hebat yang pernah ada.
— Solusi Perangkat Lunak Trimantra
6

Sebenarnya sedang mencari solusi di internet untuk ini untuk sementara waktu. Dan jawaban yang diterima memberikan jawaban "menurut buku" yang baik. Tetapi saya tidak mau menerimanya jadi saya terus mencari dan menemukan ini:

http://jsbin.com/eqape/1601/edit - Contoh Langsung

Contoh ini menarik gaya yang tepat dan menambahkan fungsionalitas yang diminta pada saat yang sama, lengkap dengan ruang untuk menulis menambahkan fungsionalitas Anda sendiri pada setiap klik tajuk. Juga memungkinkan beberapa div berada di antara "h3".

 $("#notaccordion").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
  .find("h3")
    .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
    .hover(function() { $(this).toggleClass("ui-state-hover"); })
    .prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
    .click(function() {
      $(this).find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()


        .next().toggleClass("ui-accordion-content-active").slideToggle();
        return false;
    })
    .next()
      .addClass("ui-accordion-content  ui-helper-reset ui-widget-content ui-corner-bottom")
      .hide();

Kode HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Toggle Panels (not accordion) using ui-accordion  styles</title>

<!-- jQuery UI  |  http://jquery.com/  http://jqueryui.com/  http://jqueryui.com/docs/Theming  -->
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>


</head>
<body>

<h1>Toggle Panels</h1>
<div id="notaccordion">
  <h3><a href="#">Section 1</a></h3>
  <div class="content">
    Mauris mauris  ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus  nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a  nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur  malesuada. Vestibulum a velit eu ante scelerisque vulputate.
  </div>
  <h3><a href="#">Section 2</a></h3>
  <div>
    Sed non urna. Donec et ante. Phasellus eu ligula.  Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet,  mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo.  Vivamus non quam. In
    suscipit faucibus urna.
  </div>
  <h3><a href="#">Section 3</a></h3>
  <div class="top">
  Top top top top
  </div>
  <div class="content">
    Nam enim risus, molestie et, porta ac, aliquam ac,  risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede.  Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed  commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo  purus venenatis dui.
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item  three</li>
    </ul>
  </div>
  <div class="bottom">
  Bottom bottom bottom bottom
  </div>
  <h3><a href="#">Section 4</a></h3>
  <div>
    Cras dictum. Pellentesque habitant morbi tristique  senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante  ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae;  Aenean lacinia
    mauris vel est.
    Suspendisse eu nisl. Nullam ut libero. Integer  dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per  conubia nostra, per
    inceptos himenaeos.
  </div>
</div>

</body>
</html>`
— Donovan
sumber
5

Saya menemukan solusi yang rumit. Mari kita panggil fungsi yang sama dua kali tetapi dengan id berbeda.

Kode JQuery

$(function() {
    $( "#accordion1" ).accordion({
        collapsible: true, active: false, heightStyle: "content"
    });
    $( "#accordion2" ).accordion({
        collapsible: true, active: false, heightStyle: "content"
    });
});

Kode HTML

<div id="accordion1">
    <h3>Section 1</h3>
    <div>Section one Text</div>
</div>
<div id="accordion2">   
    <h3>Section 2</h3>
    <div>Section two Text</div>
</div>
— SpritsDracula
sumber
2
Anda lebih baik menggunakan selektor tunggal berdasarkan classseperti yang disarankan oleh orang lain, ini berarti Anda tidak mengulangi diri Anda sendiri ( KERING )
— Scotty.NET
4

Sederhana, buat beberapa div akordian yang masing-masing mewakili satu tag jangkar seperti:

<div>
<div class="accordion">
<a href = "#">First heading</a>
</div>
<div class="accordion">
<a href = "#">First heading</a>
</div>
</div>

Itu menambahkan beberapa markup. Tetapi bekerja seperti ...

— Azeem
sumber
4

Sederhana: aktifkan akordeon ke kelas, lalu buat div dengan ini, seperti contoh kelipatan akordeon.

Seperti ini:

JS

$(function() {
    $( ".accordion" ).accordion({
        collapsible: true,
        clearStyle: true,
        active: false,
    })
});

HTML

<div class="accordion">
    <h3>Title</h3>
    <p>lorem</p>
</div>
<div class="accordion">
    <h3>Title</h3>
    <p>lorem</p>
</div>
<div class="accordion">
    <h3>Title</h3>
    <p>lorem</p>
</div>

https://jsfiddle.net/sparhawk_odin/pm91whz3/

— Giovan Cruz
sumber
1
Saya mencoba semua jawaban di utas dan ini berfungsi yang terbaik. Dengan jquery dan jqueryUI terbaru, ada banyak masalah gaya dengan solusi lain sekarang. Inilah pembaruan 2017 jsfiddle.net/rambutan2000/eqbbgb7g
— Geordie
@Geordie Saya senang itu membantu.
— Giovan Cruz
2

Panggil saja setiap bagian akordeon sebagai akordeonnya sendiri. active: n akan menjadi 0 untuk yang pertama (sehingga akan ditampilkan) dan 1, 2, 3, 4, dll untuk sisanya. Karena masing-masing adalah akordeonnya sendiri, semuanya hanya akan memiliki 1 bagian, dan sisanya akan diciutkan untuk memulai.

$('.accordian').each(function(n, el) {
  $(el).accordion({
    heightStyle: 'content',
    collapsible: true,
    active: n
  });
});
— Funkodebat
sumber
Perhatikan bahwa ini telah disarankan dalam jawaban 2upmedia di bawah
— Boaz
2

Lebih sederhana lagi, beri label di setiap atribut kelas tag li dan miliki jquery untuk mengulang melalui setiap li untuk menginisialisasi akordeon.

— Mikey
sumber
1

Tanpa akordeon jQuery-UI, seseorang cukup melakukan ini:

<div class="section">
  <div class="section-title">
    Section 1
  </div>
  <div class="section-content">
    Section 1 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  </div>
</div>

<div class="section">
  <div class="section-title">
    Section 2
  </div>
  <div class="section-content">
    Section 2 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  </div>
</div>

Dan js

$( ".section-title" ).click(function() {
    $(this).parent().find( ".section-content" ).slideToggle();
});

https://jsfiddle.net/gayan_dasanayake/6ogxL7nm/

— Gayan Dasanayake
sumber
0

buka jquery-ui - *. js

Temukan $.widget( "ui.accordion", {

Temukan _eventHandler: function( event ) { di dalam

perubahan 

var options = this.options,             active = this.active,           clicked = $( event.currentTarget ),             clickedIsActive = clicked[ 0 ] === active[ 0 ],             collapsing = clickedIsActive && options.collapsible,            toShow = collapsing ? $() : clicked.next(),             toHide = active.next(),             eventData = {
                oldHeader: active,
                oldPanel: toHide,
                newHeader: collapsing ? $() : clicked,
                newPanel: toShow            };

untuk 

var options = this.options,
    clicked = $( event.currentTarget),
    clickedIsActive = clicked.next().attr('aria-expanded') == 'true',
    collapsing = clickedIsActive && options.collapsible;

    if (clickedIsActive == true) {
        var toShow = $();
        var toHide = clicked.next();
    } else {
        var toShow = clicked.next();
        var toHide = $();

    }
    eventData = {
        oldHeader: $(),
        oldPanel: toHide,
        newHeader: clicked,
        newPanel: toShow
    };

sebelum active.removeClass( "ui-accordion-header-active ui-state-active" );

Menambahkan if (typeof(active) !== 'undefined') { dan tutup}

Nikmati

— alex
sumber
-1

Anda cukup menggunakan fungsi jquery each ();

$(function() {
    $( ".selector_class_name" ).each(function(){
        $( this ).accordion({
          collapsible: true, 
          active:false,
          heightStyle: "content"
        });
    });
});
— Mamba hitam
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.