Why is not expand/collapse working as the demo?

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

patlar asked 3 years 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>

Add comment

Grzegorz Bujański answered 3 years ago

0 0 Best answer

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"

Add comment

patlar answered 3 years ago

0 0 Best answer

Ah, I see. Many thanks for your help!

Add comment