Topic: Why is not expand/collapse working as the demo?

patlar free asked 5 months ago


Expected behavior Expand/collapse is not working. Running development on a Docker container with Nginx and PHP (richarvey/nginx-php-fpm). The browser's development tools do write out the hidden div:s but expanding the row to view them does not work

Actual behavior Expand/collapse functioning as intended

Resources (screenshots, code snippets etc.) Followed guide: https://mdbootstrap.com/snippets/jquery/cam/979615#html-tab-view

Running the code from the linked guide with this header (and of course closing HTML tags):

<html>
  <head>
    <meta http-equiv="refresh" content="<?php echo $sec?>;URL='<?php echo $page?>'">
    <title>DevEnv</title>

    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet"/>
    <!-- MDB -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet"/>
    <!-- MDB -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.js"></script>
    <link href="stylesheet.css" rel="stylesheet"/>
  </head>

patlar free answered 5 months ago


Ah, I see. Many thanks for your help!


Grzegorz Bujański staff answered 5 months ago


This example does not work because it was created for MDB4 jQuery but you are using MDB5. You need to update the data attributes. For example, in MDB5, the data-toggle="collapse" attribute it also has mdb and looks like this: data-mdb-toggle="collapse"



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 4.2.0
  • Device: Macbook Pro
  • Browser: Google Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: Yes