Collapsible Sections #455
Collapsible Sections #455
Conversation
Functionality to allow Collapsible sections for Mobile + Facility styles
Justinabes007
added
[Dev] CSS Styling
|
Warning CodeRabbit GitHub Action detectedThe repository is using both CodeRabbit Pro and CodeRabbit Open Source (via GitHub Actions), which is not recommended as it may lead to duplicate comments and extra noise. Please remove the CodeRabbit GitHub Action. Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
WalkthroughThis update introduces enhancements to the collapsible sections of the website, improving both functionality and aesthetics. It includes responsive design adjustments for smaller screens, improved styling for fast facts sections, and dynamic toggle buttons for expanding/collapsing sections. Changes
Uplevel your code reviews with CodeRabbit ProCodeRabbit ProIf you like this project, please support us by purchasing the Pro version. The Pro version has advanced context, superior noise reduction and several proprietary improvements compared to the open source version. Moreover, CodeRabbit Pro is free for open source projects. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Files selected (2)
- assets/css/style.css (1)
- assets/js/src/custom.js (1)
Files ignored due to filter (1)
- assets/img/tick.svg
Review comments generated (8)
- Review: 3
- LGTM: 5
Tips
Chat with 
CodeRabbit Bot (@coderabbitai)
- Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
- Invite the bot into a review comment chain by tagging
@coderabbitaiin a reply.
Code suggestions
- The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned.
- You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.
Pausing incremental reviews
- Add
@coderabbitai: ignoreanywhere in the PR description to pause further reviews from the bot.
|
|
||
| .facilities-list li::marker{display:none;} | ||
| .facilities-list{padding-left:0!important;} | ||
|
|
||
| .facilities-list li { | ||
| margin-left: 10px; | ||
| list-style: none; /* Remove default list marker */ | ||
| position: relative; /* Position for pseudo-element */} | ||
|
|
||
| .facilities-list li::before{ | ||
| content: ''; | ||
| position: absolute; | ||
| left: 0; | ||
| top: 50%; | ||
| transform: translateY(-50%); /* Center the icon vertically */ | ||
| width: 20px; /* Adjust the size of the tick icon */ | ||
| height: 20px; | ||
| background-image: url('../img/tick.svg'); /* Replace with the path to your tick.svg */ | ||
| background-size: contain; | ||
| background-repeat: no-repeat; | ||
| left:-28px | ||
| } |
There was a problem hiding this comment.
The CSS rule for .facilities-list li::before uses a relative path to the tick.svg image. This could potentially cause issues if the CSS file is moved or if the website structure changes. Consider using an absolute path or a path that starts from the root of your project.
- background-image: url('../img/tick.svg');
+ background-image: url('/path/to/img/tick.svg');|
|
||
| sections.forEach(section => { | ||
| // Locate the first <h2> within the section | ||
| const heading = section.querySelector('h2'); | ||
| // Locate the second div with the class wp-block-group | ||
| const toggleTarget = section.querySelectorAll('.wp-block-group')[1]; | ||
|
|
There was a problem hiding this comment.
The debug console.log statements should be removed from the production code. They are useful during development but can expose potentially sensitive information in a production environment.
- console.log('Processing Section:', section); // Debug
- console.log('Found Heading:', heading); // Debug
- console.log('Toggle Target:', toggleTarget); // Debug| // Insert the button after the heading | ||
| heading.insertAdjacentElement('afterend', toggleButton); | ||
|
|
||
| // Add click event listener to toggle visibility of the second wp-block-group | ||
| toggleButton.addEventListener('click', function () { | ||
| toggleTarget.classList.toggle('collapsed'); // Add or remove the collapsed class | ||
|
|
||
| // Toggle the display of the up/down icons | ||
| const iconDown = toggleButton.querySelector('.icon-down'); | ||
| const iconUp = toggleButton.querySelector('.icon-up'); | ||
|
|
||
| if (toggleTarget.classList.contains('collapsed')) { | ||
| iconDown.style.display = 'none'; | ||
| iconUp.style.display = 'inline'; | ||
| } else { | ||
| iconDown.style.display = 'inline'; | ||
| iconUp.style.display = 'none'; | ||
| } |
There was a problem hiding this comment.
This block of code is responsible for toggling the visibility of sections and changing the icon accordingly. However, it directly manipulates the style of the elements which can lead to issues with CSS specificity and maintainability. It would be better to use CSS classes to control the display of the icons.
- if (toggleTarget.classList.contains('collapsed')) {
- iconDown.style.display = 'none';
- iconUp.style.display = 'inline';
- } else {
- iconDown.style.display = 'inline';
- iconUp.style.display = 'none';
- }
+ if (toggleTarget.classList.contains('collapsed')) {
+ iconDown.classList.add('hidden');
+ iconUp.classList.remove('hidden');
+ } else {
+ iconDown.classList.remove('hidden');
+ iconUp.classList.add('hidden');
+ }In your CSS, you can then define these classes as follows:
.hidden {
display: none;
}
:not(.hidden) {
display: inline;
}
Functionality to allow Collapsible sections for Mobile + Facility styles
This update introduces collapsible sections to improve the mobile user experience and enhance the layout for facilities styles. The following changes have been made:
CSS Enhancements:
JavaScript Functionality:
New Assets:
Impact:
Testing:
Summary by CodeRabbit