Issue with Twitter Bootstrap accordion toggle-all-button functionality malfunctioning

When I try to use a single button to toggle all accordion-elements, some of which are already open, the toggle functionality acts strangely.

If I use this code snippet:

$('.corearea-wrapper .corearea-link').click(function(e) {
    e.preventDefault();
    mywrapper = $('.corearea-wrapper #' + $(this).parent().children('.row.fixedcol').attr('id'));
    if(mywrapper.hasClass('allopen')) {
        mywrapper.find('.collapse').collapse('hide');
        mywrapper.find('article').removeClass('active');
        mywrapper.removeClass('allopen');
    } else {
        mywrapper.find('.collapse').collapse('show');
        mywrapper.find('article').addClass('active');
        mywrapper.addClass('allopen');
    }
}); 

My intended outcome is: on the first click, close all open elements; on the second click, open all elements; on the third click, close all again, and so forth.

However, what actually occurs is: on the first click, open elements close but closed ones open; on the second click, all open elements close; on the third click, all elements open, and subsequent clicks repeat this pattern.

View the demo here:

http://jsfiddle.net/Lwrhk/

Answer №1

After tackling the same issue, I stumbled upon your query and decided to experiment with your fiddle. Ultimately, I managed to make it work by specifically targeting elements that were either expanded or collapsed:

$('.corearea-wrapper .corearea-link').click(function(e) {
    e.preventDefault();
    mywrapper = $('.corearea-wrapper #' + $(this).parent().children('.row.fixedcol').attr('id'));
    if(mywrapper.hasClass('allopen')) {
        mywrapper.find('.collapse.in').collapse('hide');
        //mywrapper.find('article').removeClass('active');
        mywrapper.removeClass('allopen');
    } else {
        mywrapper.find('.collapse:not(.in)').collapse('show');            
        //mywrapper.find('article').addClass('active');
        mywrapper.addClass('allopen');
    }
});

You can access the working jfiddle here:

http://jsfiddle.net/RobbSadler/Lwrhk/12/

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

- bullet point: tabulated

I need to create an unordered list with URLs included and indented, while keeping all lines justified to the left. * line one text text ted more text text text * line two text ted more text text text * line three text ted more text text text ...

Using JavaScript, transfer files directly from a client's web browser to Google Cloud Storage

I have been exploring Google Cloud Storage for file uploads and have come across various methods. The most common method seems to involve sending the file to a server first before it is then sent to Google Cloud Storage. However, I am interested in bypass ...

Troubleshooting the lack of response when sending POST data from jQuery to PHP using Ajax

I am trying to display an Ajax response in a result div ('ajax') upon submitting a form, but I am encountering difficulties achieving this. The post request seems to be sent successfully in the network tab of the console, but the desired function ...

Issue: Unable to navigate the dependency graph: Module '@badeball/cypress-cucumber-preprocessor/steps' cannot be located

Encountering an error when running my feature file and unsure of the issue. See screenshots below: https://i.sstatic.net/Ks5Sy.png https://i.sstatic.net/BP4rl.png https://i.sstatic.net/8IoMM.png ...

How to Disable Checkbox in Ionic Framework's Ion-List

Feel free to check out my Codepen project. Within this demonstration, I am working with two list arrays - one called items and the other items1. My goals are: To display a list where certain items from the items array are already checked based on the c ...

Change the behavior of a submit button to trigger a custom JavaScript function instead

I am faced with a challenge where I need to override the default functionality of a button in code that cannot be altered. Instead, I must ensure that when the button is clicked, a custom JavaScript method is called rather than submitting the form as it no ...

Trouble with implementing an onclick event listener in a foreach loop

While generating and adding HTML in a for loop, I noticed that adding onclick events within the same loop is not functioning correctly: items.forEach(item => { itemHtml = `<div class="${item.id}">${item.id}</div>`; $(".it ...

Filtering deeply nested arrays

Hey, I'm working with this interesting array: [ { "Navn": "Long Island Iced Tea", "Nummer": "2", "Glas i ml": "250", "Instruktioner": "", "a": "Hæld is i glasset", "b": "pynt med en skive lime", ...

Retrieve tabs according to the value selected in the dropdown menu

When a value is selected from a dropdown with options 1 to 5, I want to display a corresponding number of tabs. Below is the HTML code for the select box: <select id="Week" name="Week"> <option value="1">1</option> <option val ...

Issue with Stack Divider not appearing on Chakra UI card

I'm currently designing a card element using Chakra UI. However, I've noticed that the Stack Divider in the Card Body isn't displaying as expected. Is there a specific way it needs to be structured for it to show up? For example, should I se ...

What is the best way to add an image within a triangle-shaped div?

#d1{ width: 0; height: 0; border: 500px solid blue; border-top-width: 0; border-left-width: 0; border-right-color: transparent; border-left-color: transparent; margin: 0px; float:left; } #img1 { } #img2 { } #d2{ ...

Understanding the distinction between assigning a value and setting text through JSE in Selenium using C#

Utilizing the IJavaScriptExecutor to set the attribute value can sometimes result in the text box containing the set value, but not displaying it as text. In some cases, the input is sent normally to certain text boxes, while for others, it is only setting ...

Compatibility issues between XMLHttpRequest and curl

Today, I am attempting to create a small XHR in JavaScript, Java, and C#, but it's not working for some reason... Below is the code snippet: var xhr = new XMLHttpRequest(); function init(){ xhr.open("POST","http://www.opsu.gob.ve/portal/controles/ ...

How to pass a single value using onClick event without relying on form submission

I prefer to pass a single value instead of multiple putPriority fetch calls. This value will not be inputted by the user directly, but rather passed through an onClick event. For example, I want the onClick to send a specific number to "status" in the fe ...

Maintaining the integrity of Jquery Tab even after refreshing the page is essential

I recently started using Jquery and encountered an issue with tab implementation. Whenever I refresh the page, it automatically directs me back to the initial tab setting. $(function() { var indicator = $('#indicator'), i ...

Nodemon failing to trigger auto-refresh

My journey with learning node.js using nodemon has hit a roadblock. Despite following tutorials and installing everything exactly as shown, I'm facing an issue. Whenever I enter 'nodemon index.js' in the terminal, it hosts properly but any c ...

Stop HTML <dialog> from automatically closing using Vue

I'm working on a project where I need to use Vue to programmatically prevent an HTML dialog element from closing when the close event is triggered. Here's the code snippet I am currently using: import {ref} from 'vue'; const dialogTe ...

Developing a JSP page by coding in html and css

Being a web designer, I find myself working on JSP pages to modify HTML and CSS for web application projects. However, I often feel confused by the JSP tags that I don't understand. Has anyone experienced this before? If so, how do you manage to edit ...

H1 and span elements experiencing abnormal size discrepancies

Check out this code snippet: <h1><a href="">Windows App Store<br /><span class="smallSubText">applications</span></a></h1> and here's the CSS styling: #windowsStoreApplications { float: right; width ...

Error message: TypeError - AngularJS is not a function

Currently, I am attempting to integrate jQuery Geocomplete into my AngularJS application. This is the section of code in my HTML file: <input id="destination-location-input" type="text" class="form-control" ng-model="destCtrl.destination" ng- ...