How can I ensure that only one accordion is open at a time across multiple sections?

UPDATE: I managed to solve this issue without using jQuery UI accordion. Here is the solution I found: Jquery toggle (Click to show one div while hiding others)

JSFiddle Demo: http://jsfiddle.net/sy34v/ (please ignore any blank space on the left, it may be due to disabled list numbering)

When I open one accordion in "List Window 1", it remains open even if I click on another accordion in "List Window 2".

Therefore, if there are 4 accordion sections, all 4 can potentially remain open at the same time. How can I modify it so that only one accordion can be open at a time across the entire page, and when a new one is opened, the previous one closes? Currently, this behavior is restricted to individual accordion sections.

Below is the jQuery code snippet used:

$(document).ready(function () {
    $(".listWindow").accordion({
        header: ".accordionHeader",
        collapsible: true,
        active: false
    });
});

Answer №1

Give this solution a try!

http://jsfiddle.net/rm7fD/

$(document).ready(function () {
var selectedTitle = "";

$(".listWindow").accordion({
    header: ".accordionHeader",
    collapsible: true,
    active: false,
    activate: function( event, ui ) {
        var title = $(this).find(".title").html(); 
        setTimeout(function(){
            if(selectedTitle == title){
                $(".listWindow").each(function(){
                    if ($(this).find(".title").html() != title){                       
                        $(this).accordion("option", "active", false);
                    }
                });
           }
        }, 100);
    }
});  

$(".siteTitle").click(function () {
    event.stopPropagation();        
});

$(".accordionWrapper").click(function(){        
    selectedTitle = $(this).closest(".listWindow").find(".title").text();
});

});

Answer №2

Have you experimented with this method?

$(function() {
    var $accordions = $(".listWindow").accordion({
        header: ".accordionHeader",
        collapsible: true,
        active: false
    }).on('click', function() {
        $accordions.not(this).accordion('activate', false);
    });
});

Referenced from: Close accordions if other accordion is open in jQuery

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

Exploring various sub-arrays within Firebase

My title doesn't quite capture the issue I'm facing. I've been delving into firebase and angularfire, learning how to work with data manipulation. Everything was going smoothly until I encountered this peculiar array structure. https://i. ...

Top method for transmitting information using React Router's <Link> component

I've developed a profile card component that features an 'edit profile' icon located in the top right-hand corner of the card. When users click this icon, they are redirected to the /editprofile endpoint. Currently, I'm using React Rout ...

Can I position two div elements next to each other, with one div partially offscreen, without utilizing display none or setting its width to zero?

Is it possible to position one div outside of the screen width while setting two divs side by side? I am looking to insert DIV2 above DIV1 with animation without adjusting its width or display. The goal is for DIV2 to enter the screen from the side alread ...

Retrieving MongoDB Records in Meteor

Currently, I am attempting to wrap my head around Meteor's method of returning database records. Here is the code snippet that I have been working with: Template.body.helpers({ items(){ return Items.find({}); }, json(){ console.log(this ...

Avoid revealing sensitive information by refraining from utilizing the Json decode() function

After successfully storing values in an HTML table to a MySQL database, I encountered an issue when trying to fetch the data using Json decode(). The HTML table did not display any data on the web page, and there were no errors thrown. Below is the PHP co ...

Identifying Whether Angular ng-repeat is Displaying Output or Not

I am trying to display a "No result" message when the search field does not have any matches. The current filter is working fine, but it does not show the message when there are no results. How can I achieve this? <div class="portfolio-list-wrap" ng-co ...

The border-radius property in Bootstrap buttons causes unwanted white border artifacts to appear

Strange anomalies in the borders of my Bootstrap buttons caught my attention recently. Upon further investigation, I realized that this issue is not linked to my custom styles or theme, as the artifacts can also be seen on the Bootstrap button documentatio ...

Adjustable text size to accommodate different cultural changes

My team is working on an MVC web application, with CSS stylesheets utilized in views. We are trying to achieve the following scenario: Whenever the language culture changes from English to another language, we want the font size of a specific class to ...

The dimensions of the body are set to 100vh in height and width. However, the div inside this body has a width of either 100vh or 100%, but it is not

I am trying to create a div element that has a width equal to the viewport of the browser. However, I am encountering issues when applying the CSS property width:100vh to the body element. Here is my code snippet: body { font-family: Staatliches; fo ...

Setting the Minimum Width of Floating Columns in HTML and CSS

Can anyone provide some assistance? I am currently using a design that I want to modify so that the columns do not compress or shrink below a certain size. I have attempted to use "min-width" without success. Any help would be greatly appreciated. Thank y ...

Creating a tooltip using JQuery for a text input field - a complete guide

Is there a way to create a tooltip for a textbox? I'm looking to achieve something similar to the image below: I would like the tooltip to be located near the right of the textbox, with some added animation. Any ideas or suggestions are welcome. ...

Nested navigation in Bootstrap

I am currently working on creating a multilevel menu using Twitter Bootstrap. Check out the code here Below is the snippet of HTML code: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ...

Bring in resources without specifying

Is there a way to directly import an image into a JSX tag in React without having to declare it at the top of the file using import img from './this/is/file.png'? I attempted to do so with <img src={import './this/is/file.png'} alt= ...

Tips for implementing a regular expression in JavaScript to parse tags from a Docker image?

I recently came across this regex for parsing docker image tag in Python. ^(?P<repository>[\w.\-_]+((?::\d+|)(?=/[a-z0-9._-]+/[a-z0-9._-]+))|)(?:/|)(?P<image>[a-z0-9.\-_]+(?:/[a-z0-9.\-_]+|))(:(?P<tag>[\w.&bs ...

The font-face declaration is not in accordance with the correct syntax outlined by fontspring, generating an error

I've been attempting to change my font using the font-face rule, but it's not working. Every time I try, it displays an error saying "@font-face declaration doesn't follow the fontspring bulletproof syntax". I've searched online for a s ...

Issues observed when integrating Axios custom instance with Next.js

Initially, I created a custom axios instance with a baseURL and exported it as shown below: import axios from 'axios'; const instance = axios.create({ baseURL: process.env.BACKEND_URL, }); instance.defaults.headers.common['Authorization& ...

Updating Rails record using Ajax with select_tag and onchange functionality

I'm working on an index view where I want to update a table data dynamically using select_tag onchange feature without the need to refresh the page. Do I need to use Coffeescript to detect the onchange event, capture the new value, and then send it to ...

Unable to retrieve data from CKEditor using Ajax

Having some issues with my AJAX implementation in PHP, specifically trying to retrieve data from CKEditor but encountering difficulties. Here are my codes: <form> <textarea id="editor" name="Content" required></textarea&g ...

"Disabling Dropzone.js functionality once a file has been selected - here's how

When using my dropzone, I typically choose a file to save first and then click the save button. However, I am facing an issue: how can I disable the dropzone area after selecting a file? I attempted the following approach: accept: function (file, done) { ...

Enabling the option to follow a link once the script has completed execution

Is there a way to make the second link clickable only after a specific function has executed successfully? I have an EJS template with two links inside paragraphs. When the first link ("Run python") is clicked, a script is activated that takes some time to ...