Troubles with Sluggish Accordion Loading

Upon loading the page, my Accordion containing 32 pieces of data inexplicably opens with all answers exposed for a brief 3 seconds before closing.

While I recognize the need for a Database solution, that will have to wait for a future phase of development.

This issue persists whether there are only 10 or all 32 Questions/Answers displayed.

I am able to share a JSFiddle demonstration, excluding the large dataset causing the delay.

In considering breaking the content into multiple Accordions, even with fewer Questions/Answers, the problem remains.

Is this behavior inherent to the Accordion component? Is there a way to ensure that Answers remain collapsed upon page load?

javascript

Answer №1

Include this code snippet in your CSS:

.selected{ visibility: hidden; }

Answer №2

Make sure to add the inline style display: none; to all answer main divs. This is important because many modules function best when styled inline.

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

Vue.js blocks the use of iframes

I've come across a peculiar issue where I need to embed an iframe inside a Vue template and then be able to modify that iframe later. The code snippet below shows the simplified version of the problem: <html> <body> <div id="app" ...

javascriptruby-on-railsiframevue.js

Go back to the pop-up window if an error occurs

I've implemented a modal window in front of my index page. When the model is valid, I redirect to the index view. However, when the model is not valid, I want it to stay on the modal. How can I achieve this? [HttpPost] [ValidateAntiForgeryToken] publ ...

javascriptjqueryasp.netasp.net-mvcasp.net-mvc-4

My goal is to create a script that can track and record any missing images

**1.**I have a bunch of pictures in a folder that need to be renamed according to specific rules: imagename--angle for example : TE100--front TE200--back each image will have a set number of angles. For example, the image name TE100 will have 4 angles ...

javascriptpython

Generating numerous visual scenes using the identical renderer

I've been working on rendering multiple scenes using a single renderer, but I'm facing some challenges in getting it right. Despite referring to other Stack Overflow answers, I haven't been able to achieve the desired outcome. My approach i ...

javascriptthree.js3dgltf

Tips on saving additional parameters in an API URL with AngularJS

Here is my AngularJS function code: $scope.cardcall = function (cardtype) { $scope.cityname=cityname; $http({method: 'GET',url: '/api/v1/asasas&filterBy=cardNames&filterByValue='+cardtype.key}).success(funct ...

javascriptangularjsangularjs-ng-repeatangularjs-service

Issue with Vue router: history mode fails to work on the second level

I recently added a second router to my Vue.js project, specifically for a dashboard on my website. However, I encountered an issue where if I manually tried to access a specific route like "/admin/contact" or refreshed the page, I would receive a 404 error ...

javascriptvue.jsvuejs2vue-router

Utilizing D3 for translation by incorporating data from an array within d3.js

I need assistance with drawing rectangles in an SVG where the translation data is stored in an array. Below is the code: var vis=d3.select("#usvg"); var rectData=[10,21,32,43,54,65,76,87,98,109]; vis.selectAll("rect").data(rectData).enter().append("rect ...

javascriptd3.js

Is there a YUI Custom Event available for pre-selecting the value in a Dropdown

Imagine a scenario where I have a dropdown field that automatically selects a value as soon as it is rendered (for example, a Country field in a signup form). This dropdown interacts with other components, causing the selected value to change dynamically. ...

javascriptdrop-down-menudom-eventsyuicustom-events

React - navigating with hash in routing parameter

I am facing an issue with my application, where I have implemented navigation between different cars. Each car has a unique ID, but some IDs contain a hash symbol, like 'test#car#1'. This hash symbol in the ID is causing problems with the navigat ...

javascriptreactjsroutesreact-router

My variable from subscribe is inaccessible to Angular2's NgIf

My goal is to display a spinner on my application while the data is being loaded. To achieve this, I set a variable named IsBusy to True before making the service call, and once the call is complete, I set IsBusy to false. However, I am facing an issue wh ...

javascriptangulartypescript

Customize which days are enabled in the DatePicker

I'm in the process of developing a website with Office Fabric UI, but I haven't been able to figure out how to selectively enable specific days on the DatePicker component while disabling all others. My technology stack includes Nodejs and React ...

javascriptreactjscalendaroffice-ui-fabricpickadate

Encountering issues with loading Angular formControl

I've been going through an Angular tutorial on forms, which you can check out here. In my 'datasources.component.html' file, I have the following code: <form [formGroup]="queryForm"> <label>Query: <input type="text" formCont ...

javascriptangular

Problems arising from the usage of setInterval within the useEffect hook

I have encountered an issue while trying to use setInterval within useEffect. To ensure functionality, I moved the logic to a separate function and it works perfectly; alternating between two images every 3 seconds as intended. const rotateImages = (img) ...

javascriptreactjsreact-hookssetinterval

Is it feasible to create that specific character using Google Charts?

Quick question here. Can a Char be generated in Google Charts? Also, do you have any advice on how to do this? Chart1 The blank space under the chart is crucial. ...

javascriptchartsgoogle-visualizationwhitespace

React JS: The active text object in Fabric JS canvas becomes uneditable after attaching an event listener

After implementing event listeners for copy-paste, cut-paste, and movement functionalities in different directions, I encountered an issue when trying to edit the active text object on the canvas. I am utilizing the fabricjs-react module. Below is the cod ...

javascriptreactjscanvasevent-handlingfabricjs

Modifying the src attribute of an object tag on click: A step-by

So I have an embedded video that I want to dynamically change when clicked on. However, my attempt at doing this using JavaScript doesn't seem to be working. <object id ="video" data="immagini/trailer.png" onclick="trailer()"></object> H ...

javascriptjqueryhtml

The Ajax call to the code behind successfully reaches the completion stage, however it fails to return a success response or execute the corresponding code behind

I am trying to call a code behind method using AJAX: function onEnter(key) { var lotTxt = document.getElementById("lotTxt"); if (key.keyCode == 13) { alert("in if") $.ajax({ url: 'Default.aspx/assEatinSzn', type: "POST", ...

javascriptjquery.netajaxvb.net

I am currently working on creating a drag select feature in React completely from scratch, but I'm facing some challenges with

Check out this code I created for drag selection: Here's the item generation code: const items = [ 1, 2, 3, ...94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, ].map((i) => ({ item: i, selected: i === 1 })); This is the actual code responsi ...

javascriptreactjstypescriptselectdrag

What is the recommended approach for utilizing the value from a Given step in Cucumber Js?

After considering various possibilities, I came up with the following solution: Given( `Step1`, async function() { const ObjectToUse = { A: 'a', B: 'b' } this.ObjectToUse = ObjectToUse } ) Then(`Step2`, ...

javascriptselenium-webdriverbddcucumberjs

Changing the row property value of a textarea dynamically based on text input in ReactJS

Here is what I have tried: <textarea rows='2' onChange={e => setSomething(e.target.value)} className='form-control text-area ' value={something} placeholder='write something'> </textarea> output: https://i ...

javascriptreactjstypescript