Achieving this result in HTML using a jQuery accordion component

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.

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>
                    <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&amp;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
    });
});

Answer №1

Take a look at this demo on jsFiddle showcasing an accordion without any plugins

View the demo here: JsFiddle Accordian without plugin

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing a group query for Mongoose in a node.js/express route

Hey there, I have a query that works perfectly fine in Robomongo. Here's the code: db.av.group( { key: { roomId: 1}, cond: { dateOfDay: { $gte: new Date('12/01/2014'), $lt: new Date('12/30/2014') } }, reduce: function( curr, re ...

Version 1.0 and higher of Ionic do not display the side menu when using tabs

I have developed an app using Ionic that includes a side menu with tabs feature. The side menu displays correctly when using Ionic version 0.9.27, but it does not show up when the version is 1.0 or higher. What could be causing this issue? HTML Layout & ...

Instead of only one menu icon, now there are three menu icons displayed on the screen. (Additionally, two more divs containing

When visiting on a smartphone browser, you may notice that instead of one menu icon, three icons appear. Upon inspecting the elements, you will find that there are three div's that look like this: <div class="responsive-menu-icon">&l ...

Guide to positioning a div in the center while implementing animations through transition and transformation using scale

Creating a popup for my React app without relying on external libraries is my current project. I am experimenting with using transition and transform with scale to size the popup dynamically based on screen size and content, then center it on the screen. ...

The performance of Three.js is directly influenced by the quantity of objects present

Just completed a project in WebGL using Javascript and the 3D library known as three.js Unfortunately, the performance of the project is less than impressive - slow from the start with occasional moments of adequacy. In this game, there are: 1 car, 6 ora ...

Why is it important to have specific property names?

Here is some code and HTML for triggering a radio button. It seems to work fine without any issues, but I'm wondering if the presence of a name property is necessary. When I remove the name property, it stops working. Can someone explain why? <inp ...

The layout is completely wrecked by the Android Jquery Listview Filter

I am attempting to create a simple listview with a filter in Android 4.1.2, but it seems to be affecting the fixed layout elements such as header/footer. When tapping into the filter box, the listview no longer fits on the screen properly. Could this be a ...

Using jQuery to drag a div and drop it to swap out an image in a different

I am looking to implement a drag and drop function where I can move elements from one div to another, each containing different images. However, I want the image displayed in the second div to change based on the element being dragged. For example: When d ...

Vue failing to update when a computed prop changes

As I work with the Vue composition API in one of my components, I encountered an issue where a component doesn't display the correct rendered value when a computed property changes. Strangely, when I directly pass the prop to the component's rend ...

Adding retrieved ejs elements

Aim: I am struggling with a button that triggers a function to fetch more items from my Mongoose DataBase and display them in a table row dynamically. I am using the get method to retrieve data from the server side. Despite referring to advice from this po ...

Add a hyperlink to a div element without directly editing the HTML code

Is it possible to add a link to the div using JavaScript instead of changing the HTML and inserting an <a>-tag? <div class="some-class">Some content</div> ...

Material-UI's JSS does not adhere to the justify content property

Having trouble aligning elements in my React app using material-ui 1.0 and its JSS solutions. The code I've written below should center justify, but it's not working no matter how I configure it. I suspect there might be a naming issue since mat ...

Binding Events to Elements within an AngularJS-powered User Interface using a LoopIterator

I am working with an Array of Objects in AngularJS that includes: EmployeeComments ManagerComments ParticipantsComments. [{ "id": "1", "title": "Question1", "ManagerComment": "This was a Job Wel Done", "EmployeeComment": "Wow I am Surprised", ...

The functionality of $(selector).css() seems to be malfunctioning

I currently have an html div element stored in a variable var rows = ""; rows += "<div>1111 : Hi there</div>"; Despite multiple attempts, I have failed to add a background color to this div using the following methods: 1. $(rows).css({&apos ...

Prevent form submission once all tasks have been finalized

Hey there, I've been racking my brain for hours trying to solve this issue... I'm looking to disable my form after it's been submitted to prevent multiple submissions. However, every method I try seems to disable the button but also interfe ...

Phonegap app developer encounters issue with sending ajax requests

Recently, I encountered an issue with Ajax in my Phonegap development. Previously, it worked perfectly but now when I call the Ajax function, nothing happens. Here are the steps I have taken to troubleshoot: 1) I edited the config.xml file and added the f ...

I am looking to preload a separate webpage prior to the HTML loading in AngularJS

I am looking to implement a feature in my AngularJS app where a different webpage (e.g. google.com) will be loaded based on the response of a REST API before any default HTML content is displayed. I have attempted to make a REST service call within a fact ...

Tips on importing anime js after it has been successfully installed through npm

Today, I added anime js as a dependency to my package.json file. The version 3.0.1 is visible in the dependencies list. I used npm to install it. Next step was creating a folder and a JavaScript file in the public directory. I set up a simple event liste ...

AngularJS framework may encounter an issue where changes in $scope data do not reflect in the view

I have noticed that when I reload the data using my function, the view does not change. After some research, I found that adding $scope.$apply() should solve this issue. However, I am encountering an error when trying to implement this solution. https://d ...

What is the procedure for obtaining an Observable for an Event?

How can I obtain an Observable of an Event in Angular 2? For instance, is it possible to subscribe to a click event but only trigger after two clicks? Can we create an Observable of MouseClick event objects? If I want to filter by button or ctrlKey, or h ...