Collapse the accordion by sliding it back to the top position

I have successfully implemented the Flexible Slide-to-top Accordion on my webpage.

Initially, I struggled with the functionality to have only one accordion open at a time due to my limited knowledge of jQuery. However, after overcoming this challenge, I noticed that the slide-to-top feature was not functioning properly on iOS devices, particularly when there was a lot of content.

As a solution, I decided that if one accordion is open, the others should not collapse, resulting in a smoother animation.

However, a new issue arose when trying to close the accordion after scrolling down the page - I had to scroll all the way back up. I am seeking a more user-friendly solution that allows the accordion to be closed from anywhere within its content, without the need for an additional button.

My question is: How can I bind the closing function to any part of the accordion's content? If using a button is easier, I am open to that option, but I have envisioned a custom cursor feature that enables users to close the accordion anywhere they desire.

Apologies for the lengthy post, and thank you in advance for your help!

jqueryhtmlioscssaccordion

Answer №1

I linked theaccordion-content to a click event, feel free to check out the Fiddle, where I utilized code from your website.

  // opening / closing item
  this.$items.find('a:first, .theaccordion-content').bind('click.accordion', function (event) {

     var $item = $(this).parent();

     // closing any opened item if oneOpenedItem is true
     if (instance.options.oneOpenedItem && instance._isOpened() && instance.current !== $item.index()) {

          instance._toggleItem(instance.$items.eq(instance.current));

     }

     // opening / closing item
     instance._toggleItem($item);

     return false;

   });

Hint: It is recommended to change:

<section id="themargin"></section>

to

<section class="themargin"></section>

as having duplicate ID's is not valid in HTML.

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

Can you please explain the process of converting a JSON object into a PHP variable and transferring it to a PHP script?

Is there a way to handle the json object received from an Ajax call in a PHP file instead of a js file (using jquery)? Imagine I have a phonebook table with name and phone number columns. My index file includes an input text field where users can type som ...

jqueryajax

Utilize AngularJS to create a concealed input field

Currently utilizing angularjs, you can find the code at this link Desired Outcome: When the add button is clicked, I want the value of $scope.todotest to appear along with the text in the textbox. Issue Faced: Upon adding for the first time, the date d ...

javascriptjqueryangularjs

Exploring the possibilities of applying CSS to customize the color of various elements

Is there a way to set the color of elements in CSS so that it applies to everything such as fonts, borders, and horizontal rules when applied to the body? How can I accomplish this effectively? ...

htmlcsscolors

Update the header by changing the background of all elements within it, while keeping the rest of the page as is

I am currently creating a Gatsby site with a layout and header component to construct pages. Each component has its own stylesheet (layout.module.scss and header.module.scss). Below is the code snippet: /* layout.js */ import React from "react" ...

htmlreactjssassgatsby

The Analog Clock is unable to access the property of null

I'm struggling to understand what's wrong here. The querySelector doesn't seem to be functioning correctly as I keep encountering the error "cannot read the property of null" on line 10 of my JavaScript code. const deg = 6; const hr = docum ...

javascripthtml

Arranging my HTML text fields for optimal organization

I am struggling to format my text fields the way I envision. Here's what I want: - Username field at the top - First and last name underneath each other - Password and confirm password next to each other below names As a newcomer to HTML, I'm fi ...

htmlcsspopup

Incapable of composing text using the MUI SearchBar

I'm having trouble with my Material UI search bar - it's not letting me type anything into it. How can I resolve this issue? Despite trying the suggested code snippets from other answers, I keep encountering errors when integrating them into my ...

javascripthtmlreactjsmaterial-ui

Optimal methods for creating large files using jQuery or Java

I am currently working on a web application using jQuery and Java, and one of my tasks involves generating a report from database records. This report should be downloadable in csv, xls, and txt formats. The number of records in the file can vary, sometime ...

javajquerycsvfilexls

Implementing a Response to an AJAX POST Request with Servlets

I have a unique situation where I need to validate a username input in a text box. The process involves sending the entered username to a server for checking if it has already been taken by another user. If the username is available, I want to change the b ...

javascriptjqueryajaxservlets

In-line divs are known for their rebellious nature, refusing to conform to traditional

I'm in need of some assistance with taming my unruly HTML. It seems to be misbehaving lately. The content area on the page I'm currently designing has a two-column layout. Instead of using separate containing divs for each column, I opted for a ...

htmlcssstyles

Loop through individual divs containing radio buttons and check them one by one with a slight delay

I have implemented HTML tabs using radio buttons, similar to the demo showcased at https://css-tricks.com/examples/CSSTabs/radio.php. Here's the basic markup: <div class="tab"> <input type="radio"> <p>Content displayed when radio bu ...

javascriptjqueryhtmltabsradio-button

Ways to display Div contents based on selected options in an Angular 2/4 list

"Struggling with dynamically displaying div contents" Situation:- I have a list of 3 items: *Menu1 *Menu2 *Menu3 and I have separate div contents for each of these menu items. Requirement :- By default, Menu1 should be displayed. When Menu2 is clicked, ...

javascriptjqueryhtmlcssangular

The presence of the !doctype html tag completely messes up my

I am currently working on a code snippet that is supposed to provide the screen coordinates of a given object: <!DOCTYPE HTML> <html> <head> </head> <body style="margin:0px;padding:0px;"> <div id="help" style="top:100px;r ...

javascripthtmlcss

Steps for styling an AngularJS Popup:1. Determine the desired appearance for

I have some code that displays a popup when clicked, along with its automatically generated CSS. I want to be able to make changes to the CSS by adding IDs or classes to it. How can I assign IDs or classes to this element so that I can easily target them f ...

javascriptcssangularjspopup

Accessing querySelector for elements with numerical values in their name

Here is a URL snippet that I need to work with: <h1 id="header_2" title="mytitle" data-id="header_title" class="sampleclass " xpath="1">mytitle<span aria-label="sometest" class="sa ...

javascriptjqueryangularqueryselector

Challenges with dropdown menus in the sub navigation area

I am currently working on a navigation system that includes three levels of sub-navigation elements. While the functionality is fine up to the third level, it only displays one subcategory instead of multiple categories as intended. I suspect there might ...

jqueryhtmlcssnavigation

Please refrain from altering the color of my flag on hover

I am working with a table that has rows marked with flags. Below is the CSS I have used: <table class="hovered no-border" data-url="@Url.Action("General", "Transport")"> <tbody> <tr> <td><input type="che ...

htmlcss

Using the $ajax method for receiving and handling JSON data

Trying to implement AJAX in my Django app to validate the existence of a username and display an error message if necessary. Below is the code snippet: HTML: <form method="post" id='my_form'> {% csrf_token %} <input id='us ...

jqueryajaxdjango

Could this truly be jQuery in action?

Once more, here is some code snippet: audioElement.addEventListener('ended', function() { $('span#pause').fadeOut('slow'); $('span#play').delay(1500).fadeIn('slow'); }); I believe that "addEventLi ...

javascriptjquery

How can I use Ajax to open views in Asp.net Core 3.1?

Why is the view not being displayed even though there is no error? jQuery : $('#edit_button').on("click", function () { var instance = $('#jstree').jstree("get_selected"); if (instance != 0) ...

c#jqueryasp.netajaxasp.net-core