Accordion is having trouble expanding fully

My accordion is causing some trouble. When I try to open one section, both sections end up opening. I want it to toggle, so that only one section opens at a time based on my click.

Switching the display from flex to column fixes the issue, but I don't understand why it behaves differently in row mode. Can someone explain the logic behind this?

  $(document).ready(function(){
$('.accordion-list > li > .answer').hide();

$('.accordion-list > li').click(function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active").find(".answer").slideUp();
} else {
$(".accordion-list > li.active .answer").slideUp();
$(".accordion-list > li.active").removeClass("active");
$(this).addClass("active").find(".answer").slideDown();
}
return false;
});

});
ul.accordion-list {
position: relative;
display: flex;
flex-direction: row;
width: 100%;
height: auto;
padding: 20px;
margin: 0;
list-style: none;
background-color: #f9f9fa;
}
ul.accordion-list li {
position: relative;
display: block;
width: 100%;
height: auto;
background-color: #F36F20;
padding: 20px;
margin: 0 auto 15px auto;
border: 1px solid #eee;
border-radius: 5px;
cursor: pointer;
color: #fff;
}
ul.accordion-list li.active h3:after {
transform: rotate(45deg);
}
ul.accordion-list li h3 {
font-weight: 700;
position: relative;
display: block;
width: 100%;
height: auto;
padding: 0 0 0 0;
margin: 0;
font-size: 15px;
letter-spacing: 0.01em;
cursor: pointer;
}

ul.accordion-list li div.answer {
position: relative;
display: block;
width: 100%;
height: auto;
margin: 0;
padding: 0;
cursor: pointer;
}
ul.accordion-list li div.answer p {
position: relative;
display: block;
font-weight: 300;
padding: 10px 0 0 0;
cursor: pointer;
line-height: 150%;
margin: 0 0 15px 0;
font-size: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="accordion-list">
&l...

Answer №1

It appears that the issue lies within CSS rather than jQuery.

After some experimentation on JSFiddle, adjusting the LI height from auto to min-content seems to resolve the problem:

height: min-content;

Visit this link for demonstration

You can observe the impact by disabling the jQuery script.

Answer №2

The issue lies within the CSS styling. Since the parent element is using flex, it is causing the li element to take up all available space when set to auto. To resolve this, simply adjust the height of the li element to either fit-content, min-content, or max-content:

ul.accordion-list li {
  height: fit-content;
}

Answer №3

Include the CSS rule margin-bottom: auto for ul.accordion-list li. This particular rule showcases exceptional compatibility across various web browsers!

Not only does it perform effectively, but it also enhances the design.

The revised code should look something like this:

ul.accordion-list li {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    background-color: #F36F20;
    padding: 20px;
    margin: 0 auto 15px auto;
    border: 1px solid #eee;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;

    margin-bottom: auto;
}

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

Using regular expressions in JavaScript to extract the value following a colon, without including the colon itself

I've attempted using the tool, along with a similar stackoverflow question, but I'm still unable to solve or comprehend it. I hope someone here can shed some light on what I might be missing. I've provided as detailed and step-by-step examp ...

Number Stepper Reverse

Could the HTML5 number stepper be reversed so that pushing down increases the number and vice versa? In Response to any 'Why?' inquiries: Consider batting order in sports like cricket or baseball. As you move down the order, your batting positio ...

What is the best way to loop through an array of objects and visually represent each object in a chart?

I'm currently working on developing a React-based dashboard. The initial step involves displaying data from my local API. This information is retrieved from the front end using ComponentDidMount and then filtered to include only the METRIC = SPEND cat ...

Ensure that the tooltip remains visible within the confines of the page

In my Angular application, I have successfully implemented a versatile tooltip feature that goes beyond just displaying text. The tooltip is a div element that has the ability to contain various contents: .tooltip-master { position: relative; .tooltip ...

Is there a way to customize Angular's number filter?

I'm trying to achieve a consistent number format with Angular's number filter, regardless of the localization selected. After inspecting the Angular source code on GitHub, I found the implementation of the filter to be like this: function number ...

Can you confirm if the content-type of this SOAP response is valid?

While trying to utilize a third-party WebService within Visual Studio 2008, I received a unique response from the server. This particular response contained two content-type tags. HTTP/1.0 200 OK Server: SMBDK_1/2.3.0 Date: Thu, 09 Aug 2012 18:59:14 G ...

How does webpack identify the index.html file as the entry point for loading the bundle.js file?

I've noticed that without specifying a command to load index.html, webpack is automatically loading the page whenever I make changes in a file. Below are the attached files: webpack.config.js and package.json webpack.config.js var config = { entry: ...

Including a CSS link in a .css file is an essential step in styling

Can someone guide me on how to reference the Bootstrap link (https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css) in a .css file within an Angular project? ...

The Angular component is failing to display the template

After following a tutorial on UI-Router () I have implemented the following states in my Angular application: angular .module('appRoutes', ["ui.router"]) .config(['$stateProvider', '$urlRouterProvider', function($sta ...

When activated, JavaScript is producing an undefined response

This is a function with the following designer code. I have made updates to include the latest answer. function OnClientLoBChecked(sender, args) { var ChkBoxLOB = document.getElementById("<%= cbFLoB.ClientID %>"); var ChkBoxDis = document ...

When using ReactJS, hovering over a row in a table should trigger a change in the background color of the corresponding row in another table with the same index

I need to create a feature where hovering over a row in the first table will highlight a corresponding row in the second table. The highlighting should be based on the index of the hovered row. Here is an example: <div> <table> < ...

Learning to retrieve JSON data from an API using JavaScript

Greetings! I am currently facing an issue while trying to retrieve JSON data from an API. Whenever I attempt to extract data from the API, everything works smoothly except for when I try to access the distance value, which results in undefined. Any assista ...

JSON data cannot be transmitted using AJAX

I created a function that tracks the time spent on a specific page and where the user came from. The data is collected and saved into a JSON object, but I encountered an issue when trying to send this JSON via ajax. Upon successful sending, I receive an em ...

Showing various records dynamically with AngularJS

I have some AngularJS Code below where I am currently adding four records to roleList. However, I would like to be able to add any number of records to roleList. Is there a way for me to achieve this? $scope.roleList = [ {"companyName": "Company 01" ...

Angular and dropdowns: a perfect match

Imagine having a controller like this: myApp.controller('testCtrl', function ($scope) { $scope.cars = [ { carId: '1', carModel: 'BMW', carOwner: 'Nader' }, { carId: '2', carModel: &apos ...

Event Triggering in CakePHP

I am struggling with the onChange event in this code snippet. I must have overlooked something because it's not functioning as expected. Can someone please point out my mistake? Your assistance is greatly appreciated: <td class="cellInput"> & ...

Page flickers when jQuery is used to scroll to an element

One issue I have encountered is with a link that, when clicked, should scroll down to a specific element on the page. However, every time I test this feature, there seems to be an inconsistency where the page may momentarily flash before scrolling as inte ...

Trigger event listener of AngularJS directive on click and send information to it

During my exploration of AngularJS directives, I encountered a task that required me to activate the directive's listener upon clicking a button and passing data from the controller to it. Sample Directive app.directive('graphVisualization&apos ...

What steps should I take to transform this into an ajax form?

I'm struggling with converting this code into an Ajax form. Can someone guide me on the process? @using (Html.BeginForm("", "CollaborativeProjects", FormMethod.Post, new {enctype="multipart/form-data"})) { <input type="file" name="FileUpload1 ...

Steps to align table next to the paragraph tag

I am facing an issue trying to align a table inline with the p tag in my HTML code. I have attempted to make minimal changes to achieve this, but it is not working as expected. Here is the code I have tried: <p>ABCD</p> <table style = displ ...