I'm having issues with my JS Accordion, it seems to be behaving erratically and jumping around unexpectedly

Struggling to implement a JavaScript accordion I came across, and encountering some issues. The expected behavior is for the titles to smoothly slide up to the top of the page and reveal the content below. However, there seems to be some noticeable jerkiness in the animation that's far from seamless. As someone with limited knowledge of JavaScript, please provide detailed explanations in your responses. Thank you!

UPDATE: Even after replacing the JavaScript code with the default one from the original source, no improvements were observed. Here's a link to a JSFiddle showcasing the issue:

http://jsfiddle.net/imakeitpretty/ruwjn/

cssaccordionjquery-ui-accordion

Answer №1

Take a look at this: http://jsfiddle.net/luissanchezm86/ruwjn/4/

The issue wasn't with the .js file, and you don't need to include everything on jsfiddle when using JQuery UI. You can simply check it to include any external resources, refer to fiddle's documentation for guidance.

In addition to that, there were multiple duplicated classes in your CSS markup which made the fiddle messy.

The main reason for the jumping effect was due to:

.st-accordion ul li.st-open > a{
    margin-top: 70px;
}

I removed the margin-top: 70px; property and it resolved 75% of the problem. I suggest using the CSS provided in the jsfiddle.

I hope this information is helpful!

UPDATE

If you want to scroll all the way up like in http://jsfiddle.net/luissanchezm86/ruwjn/5/, you will need to increase the height of the body:

body {
    height: 2000px; 
}

Answer №2

Upon reviewing your code, it seems that you are utilizing the following plugin:

http://tympanus.net/codrops/2011/10/12/flexible-slide-to-top-accordion/

By visiting that webpage, you will find the javascript settings necessary to adjust the animation speeds, along with a demo that showcases smoother transitions compared to what you currently have implemented.

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

Attempting to design the appearance of the form fields within a Mat-Card

As someone new to UI development and lacking in-depth knowledge of css, I have been searching for examples to style a login page using Angular Material. My main struggle right now is getting the form fields to expand the width of the card (minus the paddin ...

cssangularangular-material

When the height of the html and body is set to 100%, ScrollY/ScrollTop is unable to function properly

Utilizing height: 100% and overflow: auto on html/body has helped me fix a scrolling issue in Chrome. However, I've noticed that ScrollY and ScrollTop always return 0 now. Is there a way to determine the scroll position in this scenario? Here is the ...

javascriptjqueryhtmlcss

Some CSS styles are not displaying correctly within an iframe

Let me start by clarifying that I am not looking to add extra CSS to the contents of an iframe from the parent document. My issue lies with a document that normally displays correctly but experiences styling issues when shown in an iframe. Whenever I searc ...

htmlcssiframe

Sidebar navigation text shifting during transition

I attempted to modify the CSS and JavaScript, but unfortunately, it had no effect and actually caused more issues. I adjusted the position and display properties in the CSS, but it seems that wasn't the root of the problem. If anyone could offer assis ...

javascripthtmlcssbootstrap-5

Creating stunning visuals with the power of SVG

I need to create a graphics editor similar to Paint using SVG for a school project. I have JavaScript code for drawing shapes like circles and lines, but when I try to add them to an onClick function for a button, it doesn't seem to be working. funct ...

javascripthtmlcsssvg

Contrasting element.setAttribute and element.style.setProperty differences

I am trying to dynamically change the value of a custom CSS variable using JavaScript. I initially attempted to use element.style.["--my-custom-var"] = value, but realized that it did not work for custom variables. After some research, I discover ...

javascriptcss

Having trouble displaying labels alongside inputs in Bootstrap 5.1.3

<form> <div class="row mb-3"> <label for="name" class="col-sm2 col-form-label col-form-label-sm">Name</label> <div class="col-sm-10"> <input type="text" clas ...

htmlcssbootstrap-5

Add a new row to a table using auto increment feature in Javascript

I am having issues with inserting rows using a button in Javascript. When I click the button, rows are being inserted unexpectedly as shown in the images below. Additionally, I also need a delete row button to work in a similar manner. Thank you for any he ...

javascripthtmlcssdom

One of the paragraphs refuses to align with the others by floating left

Greetings everyone! This is my first time posting here, although I have been a regular visitor looking for answers on this site. Hopefully, someone can assist me with my current issue. Let me explain my problem: I've been attempting to align all the ...

htmlcsscss-float

The image has max-height within a max-height container inside a fixed-height container

Here's the scenario: Can an image's max-height property be made to respect the fixed height of an ancestor element that is not its direct parent? I am aware that max-height requires a fixed height for calculation, so this query is distinct from ...

cssheight

Looking for a solution to a problem with your vertical CSS/jQuery dropdown menu

My web app features a vertical CSS menu that is working correctly except for one minor issue. When I mouse out on all elements with the class a.menutoggle, the last dropdown menu remains open. I am struggling to find a solution to hide it. Can someone plea ...

javascriptjquerycssdrop-down-menu

Switch the hover effect to be activated by clicking

Recently, I discovered an incredible plugin created by the talented developer janko. It has been a fantastic addition to my project. The only issue I've encountered is that I do not want the default hover style. Is there a way to transform it into a ...

jqueryhtmlcsshoverdock

The specified font is not loading despite being correctly defined

I have a font stored locally in resources/fonts/ and I'm correctly linking to it, but for some reason, it's not loading. Here is the <style> section in my html: <style> @font-face{ font-family:"franklin_gothic_condensed"; ...

htmlcssfonts

Can an unordered list be nested inside an inline list item in HTML or XHTML?

Take note that the li with child ul is set to display:inline - example code provided below <style type="text/css"> ul.nav_main li { display: inline } ul.nav_submenu li { display: block } </style> <ul class="nav_main"> <li>I ...

htmlcss

Eliminate the empty spaces from concealed objects in a grid

I have been working on creating a catalog for a website that showcases different items in a grid layout. Currently, I have implemented a function that allows users to hide specific items by clicking an image. However, when an item is hidden, the remaining ...

javascripthtmlcssgrid-layout

Height transition animation in Angular 2 - maintaining state consistency

I am currently working with an animation code that is linked to my component. animations:[ trigger('slide', [ state('show', style({ height: '*' })), state('hide ...

cssangularanimation

Having trouble implementing absolute css positioning on my custom composite button

I encountered a peculiar issue that I have managed to work around, but I am still curious about why it is happening. Below is the code for my Composite class: import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.clie ...

cssgwt

Styles and CSS have been successfully loaded, however, the content is not appearing

After attempting to import a web HTML CSS template into my self-made MVC, I encountered an issue. While the template works properly on its own, it fails to connect to the CSS files and display proper styles when accessed through my controller. Instead, onl ...

phphtmlcssimport

How can I design a horizontal navigation bar using only CSS and CSS tables?

As a newcomer, I am attempting to create the navigation bar that I described. I came across a tutorial at . However, it uses SCSS which I am not familiar with, rather than pure CSS. Here is my code - http://codepen.io/rsing4dev/pen/LNqvVN <p>Please ...

htmlcss

Form with input fields arranged horizontally

I am working on an HTML form that is currently arranged vertically, but I am struggling to figure out how to place two text fields on the same line. Specifically, I would like to have the First Name and Last Name fields next to each other on one line rat ...

htmlcssforms