web-dev-qa-db-ja.com

jQuery Simple Collapsible Div？

次のことを行うための適切でシンプルな小さなコードを探しています。

  • クラスが適用された要素をクリックします。

  • DIV.CLASS-隠されたコンテンツを展開して表示します。 （slideDown-トグル）

  • DIV.CLASS-以前に表示されていたコンテンツを折りたたんで非表示にします。 （slideUp-トグル）

ここにjsFiddleを作成しました： http://jsfiddle.net/Q4PUw/1/

したがって、あいまいで簡単にするために、同じページの要素にCLASSが適用されると、DIV CLASSを非表示にして表示する方法を知る必要があります。そして、デフォルトで非表示にする必要があります。

私はインターネット全体を見て、非常に複雑なスクリプトのみを見つけましたが、単純なものは見つかりませんでした。私は単純なアコーディオンを見つけました...しかし、それらは決して閉じず、ただ別のものを開きます。

助けてくれてありがとう、そして私は他の多くの人々のためにこの同じ質問に答えることができるかもしれないと思います...

注：JavaScriptやjQueryをほとんど知っていません。

javascriptjqueryhtmlexpandcollapse
25
Aaron Brewer
$('.expand-one').click(function(){
    $('.content-one').slideToggle('slow');
});

デモ： http://jsfiddle.net/Q4PUw/2/

66
AlienWebguy

私はこれを見ていましたが、すでにスタイルが設定された折りたたみ可能なdivが必要でした。それから私は、私が望んでいるのは単一のペインjquery-uiアコーディオンであることに気付きました。

<div id="collapse">
   <h3>Collapse and Expand</h3>
   <div>Content</div>
</div>
<script>
$( "#collapse" ).accordion({
    collapsible: true,
    active: false
});
</script>

http://jsfiddle.net/MB4ch/1/

8
Biff MaGriff

私はこれを複数のdivで、それぞれ独自のトリガーで実行したかったのです。上記のAlienWebguyの回答に基づいて：

HTML

<div>
    <p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
    <p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
    <p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
    <p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>

Javascript

$('.expand').click(function(){
    target_num = $(this).attr('id').split('-')[1];
    content_id = '#expandable-'.concat(target_num);
    $(content_id).slideToggle('fast');
});

CSS

.expand {
    font-weight: bold;
    font-style: italic;
    font-size: 12px;
    cursor: pointer;
}
.expandable {
    display:none;
}
div {
    margin: 10px;
}

https://jsfiddle.net/Q4PUw/3767/

3
Tom Milligan

アコーディオンを使用するのは悪い考えです。ベターは、独自の折りたたみ可能なブロックを作成することです。

例：

function InitSpoilBlock(idClicked)
    {
        $(idClicked).on('click', function(e){
            var textArray = ['blind','slide'];//here you can add other effects

            var randomEffect = textArray[Math.floor(Math.random()*textArray.length)];

            $(e.target).parent().children(".HiderPanel").toggle(randomEffect);
        });
    }

したがって、このようなhtmlを作成する場合：

<div class="HiderContainer">
    <a href="#" class="Hider">More</a>
    <div class="HiderPanel">
        Spoiled block of html
    </div>
</div>

そして、ページのロード後に呼び出します

InitSpoilBlock('.Hider');

すべてのブロックは、ランダムなアニメーションで折りたたんで非表示にすることができます。または、1つの正確なアニメーションを使用することもできます。

0
Andrew