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

Added documentation for using checkboxes to toggle collapse #39767

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

TommasoAllegretti
Copy link
Contributor

@TommasoAllegretti TommasoAllegretti commented Mar 9, 2024

Description

The Collapse documentation only talks about buttons and elements as toggles. However, using checkboxes also works fine. Therefore, it should be pointed out in the docs that you can also use checkboxes as collapse toggles.

Motivation & Context

As requested in issue #39728

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Related issues

Closes #39728

@julien-deramond
Copy link
Member

I'd say that we shouldn't mention checkboxes specifically but rather make it understandable that collapse can be used with basically everything. For example, you can also use it with basic HTML elements such as <code>, <div>, etc.

<code data-bs-toggle="collapse" data-bs-target="#collapseExample">Test from code</code>
<div data-bs-toggle="collapse" data-bs-target="#collapseExample" class="w-100 h-100 bg-warning">Test from div</div>
<div class="collapse" id="collapseExample" style="">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Maybe we can make it clearer in "How it works" that it works with everything and that buttons and links are used on this page because they would be the most common elements as triggers 🤷

@XhmikosR
Copy link
Member

Agreed, we are better off documenting the above. Let alone that the checkbox in this PR is hard to notice next to the buttons.

@TommasoAllegretti
Copy link
Contributor Author

Sorry for the delayed response, I followed your feedback and changed the documentation accordingly.
Please let me know if the documentation is now clear enough in explaining the possibility of using various different elements to toggle a collapse.

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

Successfully merging this pull request may close these issues.

Docs: No info about the collapse plugin supporting checkboxes as toggles
4 participants