使用jQuery手風琴在html中復制此效果

Question

嗨，我需要從底部到頂部制作一個完全高度的手風琴，類似於該網站http://www.chequerscapital.com/ （我在手風琴下面也有一個頁腳）。

內容是在頁面加載時加載的，因此沒有涉及ajax，我嘗試使用jQuery手風琴插件，但在使用它時遇到了問題-第一個問題是使其高度達到100％，第二個問題是jquery將所有div隱藏在其中父節

這是我的問題的jsfiddle鏈接，感謝您提供任何信息，也許我需要重新考慮使用的工具或頁面結構？ 該代碼僅適用於主要的新瀏覽器（來自IE 10）

http://jsfiddle.net/4Cm4j/2/

---

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <div class="accordion">
            <header> <a href="#">Leistungen</a>

            </header>
            <section>
                <article id="post-4" class="post-4 page type-page status-publish hentry">
                    <header class="entry-header">
                            <h1 class="entry-title">Leistungen</h1> 
                    </header>
                    <!-- .entry-header -->
                    <div class="entry-content"></div>
                    <!-- .entry-content -->
                    <footer class="entry-footer">   <span class="edit-link"><a class="post-edit-link" href="http://localhost/c4v/wp-admin/post.php?post=4&amp;action=edit">Edit</a></span>  
                    </footer>
                    <!-- .entry-footer -->
                </article>
                <!-- #post-## -->
            </section>
            <header> <a href="#">Team</a>

            </header>
            <section>test</section>
            <header> <a href="#">Track record</a>

            </header>
            <section>
                <article id="post-6" class="post-6 page type-page status-publish has-post-thumbnail hentry">
                    <header class="entry-header">
                            <h1 class="entry-title">Track record</h1>   
                    </header>
                    <!-- .entry-header -->
                    <div class="entry-content">
                        <img width="1200" height="230" src="trackrecord.jpg" class="attachment-full wp-post-image" alt="trackrecord">
                    </div>
                    <!-- .entry-content -->
                    <footer class="entry-footer">   <span class="edit-link"><a class="post-edit-link" href="http://localhost/c4v/wp-admin/post.php?post=6&amp;action=edit">Edit</a></span>  
                    </footer>
                    <!-- .entry-footer -->
                </article>
                <!-- #post-## -->
            </section>
            <header> <a href="http://localhost/c4v/?page_id=13">Kontakt</a>

            </header>
            <section>
                <article id="post-13" class="post-13 page type-page status-publish hentry">
                    <header class="entry-header">
                            <h1 class="entry-title">Kontakt</h1>    
                    </header>
                    <!-- .entry-header -->
                    <div class="entry-content"></div>
                    <!-- .entry-content -->
                    <footer class="entry-footer">   <span class="edit-link"><a class="post-edit-link" href="http://localhost/c4v/wp-admin/post.php?post=13&amp;action=edit">Edit</a></span> 
                    </footer>
                    <!-- .entry-footer -->
                </article>
                <!-- #post-## -->
            </section>
        </div>
    </main>
    <!-- #main -->
</div>

---

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.accordion {
    z-index: 100;
    position: fixed;
    bottom: 3em;
    width: 100%;
    left: 0;
}
.accordion header {
    background-color: #ccc;
    border-top: 2px solid #fff;
    margin: 0;
    padding: 0;
    padding: .4em 0;
}
.accordion header a {
    display: block;
    text-transform: uppercase;
    font-size: 1em;
    color: #fff;
    text-decoration: none;
    font-family:'Arial';
}
.accordion>section {
    margin:0 auto;
    width:1000px
}

---

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

Answer 1

在沒有任何插件的情況下在jsFiddle上檢查此演示

jsFiddle Accordian沒有插件

$(".accordian-heading").click(function () {
    $(".accordian-content").slideUp();
    $(this).next(".accordian-content").slideToggle();
})