jquery 아코디언을 사용하여 html로이 효과를 복제합니다.

Question

안녕하세요 저는이 웹 사이트와 마찬가지로 아래에서 위로 전체 높이의 아코디언을 만들어야합니다. http://www.chequerscapital.com/ (아코디언 아래에도 바닥 글이 있습니다).

내용은 페이지가로드로로드, 그래서 반군 아약스가 없다, 나는 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 without plugin

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