0

過去に、ユーザーがアコーディオンを個別に開閉したい場合に、アコーディオンを開閉する方法について尋ねました。これは問題を解決した例です:

http://jsfiddle.net/JoshuaWaheed/JhndX/

<!DOCTYPE html>

<html>
<!--* Created using jsbin.com by roXon 29/10/2012
* Source can be edited via http://jsbin.com/uleloy/2/edit
* -->
<head>
<meta charset="utf-8" />
<title>JS Bin</title>
<style id="jsbin-css">
        *{margin:0;padding:0;}
    .accordion h3{ background:#eee; padding:10px; }
    .accordion div{ background:#999;   }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>

<body>
<div class="accordion">
    <h3>Title 1</h3>
    <div>Content 1...</div>
    <h3>Title 2</h3>
    <div>Content 2...</div>  
    <h3>Title 3</h3>
    <div>Content 3...</div>  
    <h3>Title 4</h3>
    <div>Content 4...</div>  
</div>

<script>
    var $accordionIO = $('.accordion h3');
    $accordionIO.next('div').hide();

    $accordionIO.click(function(){
        $(this).next('div').slideToggle();
    });
</script>

ボタンの下に開いて垂直に下に展開する通常のセクションではなく、ボタンの上に展開して上方向に展開するセクションを持つことは可能でしょうか?

4

0 に答える 0