Hey there, I'm looking to create a full-height accordion that extends from the bottom to the top of the page, similar to what you see on this website: . I also have a footer positioned below the accordion.
The content should load when the page loads without using AJAX. I initially tried using the jQuery accordion plugin but encountered some issues: - The first challenge is achieving 100% height. - The second issue is that jQuery hides all divs inside the parent section.
If you could take a look at my problem on JSFiddle and provide any insights or suggestions for alternative tools or structure adjustments, it would be greatly appreciated. The code compatibility is needed only for modern browsers starting from IE 10.
<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>
<div class="entry-content"></div>
<footer class="entry-footer"> <span class="edit-link"><a class="post-edit-link" href="http://localhost/c4v/wp-admin/post.php?post=4&action=edit">Edit</a></span>
</footer>
</article>
</section>
// More sections...
</div>
</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
});
});