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

Bootstrap 5 #21

Open
ScotsScripts opened this issue Jan 11, 2021 · 5 comments
Open

Bootstrap 5 #21

ScotsScripts opened this issue Jan 11, 2021 · 5 comments

Comments

@ScotsScripts
Copy link

Just a quick note on bootstrap 5 usage. All that needs to be done is change data-toggle to data-bs-toggle in the js and this plugin works for bs5. Great plugin, wish I would have found it sooner!

@dkarelov
Copy link

dkarelov commented May 5, 2021

Not only - also data-target to data-bs-target

@ghost
Copy link

ghost commented May 8, 2021

Thanks for the workaround for bootstrap v5! I can confirm these 2 changes have fixed it.

data-toggle -> data-bs-toggle
data-target -> data-bs-target

Any ETA on a new release ?

@asticore
Copy link

asticore commented May 15, 2021

Not really. You need to remove Jquery to be satisfactory

@Khuthaily
Copy link

Please check my pull request. @m-peterman, the issue is not in jQuery. As @ScotsScripts and @k3kc suggested, it is because Bootstrap 5 uses data-bs-* instead of data-*. So, this pull request simply checks for the Bootstrap version and then uses the right attribute names based on the version. It works fine for me on both Bootstrap 4 and Bootstrap 5.

@Khuthaily
Copy link

Till the pull request is merged, you can do these steps to provide support for Bootstrap 4 and Bootstrap 5:

  1. add
/**
* Define Bootstrap 4 attributes
*/
let dataToggleAttr = 'data-toggle';
let dataTargetAttr = 'data-target';
/**
* get Bootstrap version
*/
let bootstrapVersion = (bootstrap.Tooltip.VERSION).charAt(0);
/**
* If Bootstrap 5, redefine attributes
*/
if (bootstrapVersion === '5') {
    dataToggleAttr = 'data-bs-toggle';
    dataTargetAttr = 'data-bs-target';
}

before the var templates line.

  1. replace the line
treeviewItem: '<div role="treeitem" class="list-group-item" data-toggle="collapse"></div>',

with

treeviewItem: '<div role="treeitem" class="list-group-item" ' + dataToggleAttr + '="collapse"></div>',
  1. replace the line
.attr('data-target', "#" + _this.itemIdPrefix + node.nodeId)

with

.attr(dataTargetAttr, "#" + _this.itemIdPrefix + node.nodeId)

Done! Enjoy.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants