Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

collapse.js: For multiple triggers targeting the same element, collapsed class/aria-expanded attribute is not applied to all triggers #15741

Closed
ijcheung opened this issue Feb 3, 2015 · 7 comments · Fixed by #15941

Comments

@ijcheung
Copy link
Contributor

ijcheung commented Feb 3, 2015

http://jsbin.com/guyuhemico/1/

@zacechola
Copy link

Same is true for the first example at http://getbootstrap.com/javascript/#collapse

Only the first of the elements that is clicked is given the changes. For example using the jsbin above: Clicking link 1 will change the class and aria attributes for link 1. Then, clicking link 2 to collapse the well updates link 1's attributes.

@ijcheung
Copy link
Contributor Author

ijcheung commented Feb 3, 2015

Well, yes. Part of this issue is asking whether this is even considered a bug.

@zacechola
Copy link

As far as the use of ARIA goes, I would say yes, but that's up to @patrickhlauke to make the call. The issue here is that you have two controls saying opposite things about the element's current state.

@cvrebert cvrebert added the js label Feb 3, 2015
@patrickhlauke
Copy link
Member

interesting...my gut feeling just on reading this was "well, this is only meant for single buttons that control something, like basic show/hide disclosure widgets"...but then you're absolutely right that the documentation currently shows two controls controlling the same well.

i think in the short term, i'd tend to change the bad example in the docs. longer term, this will require some fundamental reengineering of the collapse plugin (to update all controls that explicitly point to the same element in their aria-controls). @cvrebert ?

@ijcheung
Copy link
Contributor Author

ijcheung commented Feb 4, 2015

This is being caused by the clicked element passing itself in as the trigger option:

// COLLAPSE DATA-API
// =================

$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
  var $this   = $(this)

  if (!$this.attr('data-target')) e.preventDefault()

  var $target = getTargetFromTrigger($this)
  var data    = $target.data('bs.collapse')
  var option  = data ? 'toggle' : $.extend({}, $this.data(), { trigger: this })

  Plugin.call($target, option)
})

This overwrites the default:

Collapse.DEFAULTS = {
    toggle: true,
    trigger: '[data-toggle="collapse"]'
}

What is the purpose of the trigger option? There's no documentation on it, so I guess it's not suppose to be public API. And all it seems to do is cause this issue.

@ijcheung
Copy link
Contributor Author

ijcheung commented Feb 4, 2015

Workaround:

$("#dd").collapse("hide");

http://jsbin.com/berafobube/1/edit

@cvrebert
Copy link
Collaborator

cvrebert commented Feb 4, 2015

shrugs This is @fat's territory. Though given that we've had that example in the docs so long, I'd favor fixing the JavaScript.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment