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

data-bs-target doesn't support complex css selector with id #40997

Open
3 tasks done
chatelain opened this issue Oct 30, 2024 · 1 comment
Open
3 tasks done

data-bs-target doesn't support complex css selector with id #40997

chatelain opened this issue Oct 30, 2024 · 1 comment

Comments

@chatelain
Copy link

chatelain commented Oct 30, 2024

Prerequisites

Describe the issue

The data-bs-target css selector doesn't works with complex selector like "#myDiv:not(.show)".
I have checked it with the dropdown and collapse components.
It works in version 5.2, but not 5.3.3

This is useful if you want a button to open a collapse, without being able to close it when you click again.

Reduced test cases

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#myDiv:not(.show)">Open</button>
<div id="myDiv" class="collapse">Hidden message</div>

If you rename the div id to <div id="myDiv:not(.show)"></div> (what is a wrong thing to do), it toggle the collapse again.

bootstrap_example.txt

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.3

@chatelain
Copy link
Author

chatelain commented Oct 31, 2024

Edit: It works using class, but not id, for example:
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".myDiv:not(.show)">Open</button>

<div class="collapse myDiv">Hidden message</div>

@chatelain chatelain changed the title data-bs-target doesn't support complex css selector data-bs-target doesn't support complex css selector with id Oct 31, 2024
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

1 participant