Inertia-React | Misty Accordion, why the CSS hack?

I've converted NiceAdmin HTML template [1] to Laravel-React. To make it working I had to add a JS workaround for the Accordion menu on the sidebar. Still don't know why, because the Accordion in the original HTML version works just fine.

HTML version : when I click the Accordion-menu, the menu-items expands as expected.
Laravel-React version (Not OK): when I click the Accordion-menu, the menu-items expand, but they are invisible.
React-Accordion component for Bootstrap? Yes, done. Same problem . [2]
Laravel 11 with Breeze-React
Bootstrap 5 template [1]

Why the workaround is needed for Laravel? Thanks

Accordion | HTML OK


<li class="nav-item">
    <a class="nav-link collapsed" data-bs-target="#tables-nav" data-bs-toggle="collapse" href="#">
      <i class="bi bi-layout-text-window-reverse"></i><span>Tables</span><i class="bi bi-chevron-down ms-auto"></i>
    </a>
    <ul id="tables-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
      <li>
        <a href="tables-general.html">
          <i class="bi bi-circle"></i><span>General Tables</span>
        </a>
      </li>
      <li>
        <a href="tables-data.html">
          <i class="bi bi-circle"></i><span>Data Tables</span>
        </a>
      </li>
    </ul>
</li>

Accordion | React version -not OK


<li className="nav-item">
        <Link className="nav-link collapsed" data-bs-target="#tables-nav" data-bs-toggle="collapse" href="#">
        <i className="bi bi-layout-text-window-reverse"></i><span>Tables</span><i className="bi bi-chevron-down ms-auto"></i>
        </Link >
        <ul id="tables-nav" className="nav-content collapse " data-bs-parent="#sidebar-nav"  >
            <li>
                <Link href="tables-general.html">
                <i className="bi bi-circle"></i><span>General Tables</span>
                </Link >
            </li>
            <li>
                <Link href="tables-data.html">
                <i className="bi bi-circle"></i><span>Data Tables</span>
                </Link >
            </li>
        </ul>
</li>

Laravel workaround | setting the class 'collapse' {visibility: 'visible'} in JS. Without this hack, the property 'visibility' is set to 'collapse', which in Laravel, makes the menu-items invisible.


useEffect(() => { 
    var elements =document.getElementsByClassName("collapse");
    for (let i = 0; i < elements.length; i++) {
        elements[i].style.visibility = 'visible';
    }
}, []);

[1] NiceTemplate B5

[2] React Accordion B5

RemiM

1 year ago

Best Answer

Level 16

I tested the React Accordion locally and didn't encounter any issues.

I created a component based on their basic example.

Here’s what I did:

Created a new file with their basic Accordion example:

import Accordion from 'react-bootstrap/Accordion';

function ReactAccordion() {
  return (
    <Accordion defaultActiveKey="0">
      <Accordion.Item eventKey="0">
        <Accordion.Header>Accordion Item #1</Accordion.Header>
        <Accordion.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Accordion.Body>
      </Accordion.Item>
      <Accordion.Item eventKey="1">
        <Accordion.Header>Accordion Item #2</Accordion.Header>
        <Accordion.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Accordion.Body>
      </Accordion.Item>
    </Accordion>
  );
}

export default ReactAccordion;

Import the component in the Welcomepage:

import ReactAccordion from "@/Components/ReactAccordion";

Displayed the component:

  <ReactAccordion />

No special steps were needed, except for adding the Bootstrap minified CSS at the top of app.jsx, which is all documented:

import 'bootstrap/dist/css/bootstrap.min.css';

I also commented out all Tailwind-related files in app.css to avoid potential conflicts.

You might want to start with their basic example first, then gradually build on it to achieve your desired functionality.

alex32

1 year ago

Level 2

@RemiM Thanks for testing. I created the same component in React and didn't work. Until I commented out Tailwind imports in app.css as you said.

Indeed, it was the amazing Tailwind messing up with the Accordion menu. Now I'm keeping my hack because Breeze loves Tailwind whereas I prefer B5, at least until L12 which Taylor should be rolling out next week. :-)

Please or to participate in this conversation.