javascript - どうすれば自分のjQueryアコーディオンを簡単に作成できますか？

Question

どうすれば自分のjQueryアコーディオンを簡単に作成できますか？他の非標準のjQueryUIアコーディオンを適応させようとして時間を無駄にしないようにしたいと思います。

Answer 1

HTML：

<div>
    <h2 class="h2toggle">title</h2>
    <div class="cont">content here</div>
</div>

jQuery：

$('.h2toggle').click(function() {
    var $el = $(this).next('.cont');  
    var vis = $el.is(":visible");
    $('.cont').slideUp();
    $el[ vis ? "slideUp" : "slideDown"]();
}).next('.cont').hide();

+/-アイコン付きのjsBinデモ

Answer 2

最初に：jQueryライブラリを取得します

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>

2番目：これをページに配置します

<!-- NOTE: You MUST give a unique id to ALL the menu items -->
<div id="item1" class="menuItem">
    First Item
</div>
<div>text</div>
<div id="item2" class="menuItem">
    Second Item
</div>
<div>text</div>

3番目：スクリプトを好きな場所に配置します

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('.menuItem').next().css({ display: 'none' });

        $('.menuItem').click(function (event) {
            if ($('#' + event.target.id).next().css('display') == 'none') {
                collapseAll();
                $('#' + event.target.id).next().slideDown(500);
            }
        });
    });

    function collapseAll() {
        $('.menuItem').next().slideUp(500);
    }
</script>

ボーナス：頭痛を避けていくつかの画像を配置することができます

<div id="item1" class="menuItem">
    <img src='@Url.Content("~/Content/icon.png")' alt="" />
    <span>First Item</span>
</div>
<div>text</div>
<div id="item2" class="menuItem">
    <img src='@Url.Content("~/Content/icon.png")' alt="" />
    <span>Second Item</span>
</div>
<div>text</div>

テキストの左側に画像を正しく表示するには、css形式が必要です。

.menuItem img { float: left; }
.menuItem span { float: left; }
/* Avoided further styling for simplicity */