Sidebar accordion not workin [MDB JQuery]

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Sidebar accordion not workin [MDB JQuery]

agustrom_mar pro asked 6 years ago

I 'm working with MDB 4.5.7 Pro Version. I 've bought this version because it has all the features i need. Besides, i 'm working with Vue js in my web site. When i create a component for the sidebar, it works correctly until i click on collapsible-header class to open the collapsible-body. That body does not appear in the bar and i don't know why. Can anyone tell me why and how to solve it? I let you some code here. 
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect arrow-r"">
<i class="fa fa-chevron-right"></i> Buscar <i class="fa fa-angle-down rotate-icon"></i>
</a>
<div class="collapsible-body" >
<ul class="list-unstyled">
<li><a :href="url_buscar_aporte" class="waves-effect">
<i class="fa fa-search"></i> Buscar aporte
</a></li>
<li><a :href="url_buscar_usuario" class="waves-effect">
<i class="fa fa-search"></i> Buscar compañero
</a></li>
</ul>
</div>
</li>

Jakub Mandra staff premium answered 6 years ago

Hello,
It’s an unusuall aproach 🙂
I tested your code with JQuery and it worked ok, after cleaning some typos.

<a class="collapsible-header waves-effect arrow-r"">

->

<a class="collapsible-header waves-effect arrow-r">

Can I ask you how do you connect both libraries? It will help with further support.
Also I must tell you, that we do not support use-cases of libraries in other frameworks, but we will do as much as we can to help.
Regards,
Jakub from MDB

agustrom_mar pro commented 6 years ago

Thanks for the answer. I have noticed that when i click on collapsible-header, the mdbootstrap js is not setting to class "active" the li tag inside the ul with class="collapsible collapsible-accordion"

agustrom_mar pro answered 6 years ago

I have a laravel blade layout where i load all libraries of MDBootstrap (jquery, bootstrap, mdbootstrap, popper).
I load both css and js.

I also load vuejs library from cdn and i have a app-core.js where i have the main Vue object thats includes the other vue components.

I let you a sample code...

I hope you can help me. Thanks for now

Start your code here

<body style="margin:0px">

@yield("content")

<div id="app" class="yb">
<header>
<sidebar url_log = "{{URL::asset('logo/3.0/logo.letras blancas.compressed.png')}}"> </sidebar>
<navbar url_log = "{{URL::asset('logo/3.0/logo.letras blancas.compressed.png')}}"> </navbar>
</header>
<main class="" id="content_yield">
<div class="container">
@yield("vue_content")
</div>
</main>

</div>

<!-- Carga de Estilos -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

{{-- Material Design Bootstrap --}}
<link rel="stylesheet" href="{{URL('MDB-Pro-4.5.7/css/mdb.min.css')}}">

<!-- Bootstrap core CSS -->
<link href="{{ elixir('bootstrap-4-sectorizado/bootstrap-4-sectorizado.css') }}" rel="stylesheet">

<!-- FIN Carga de Estilos -->

<!-- Carga de Scripts -->
@if(get_from_env('APP_PRODUCTION'))
{{-- Vue 2 from CDN - version produccion --}}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
@else
{{-- Vue 2 from CDN - version desarrollo --}}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
@endif

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js" charset="utf-8"></script>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="{{URL('MDB-Pro-4.5.7/js/jquery-3.3.1.min.js')}}"></script>

<!-- Tooltips -->
<script type="text/javascript" src="{{URL('MDB-Pro-4.5.7/js/popper.min.js')}}"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="{{URL('MDB-Pro-4.5.7/js/bootstrap.min.js')}}"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="{{URL('MDB-Pro-4.5.7/js/mdb.min.js')}}"></script>

 

Jakub Mandra staff premium answered 6 years ago

It actually looks properly. We have never supported Laravel and it looks like there is no need to use Vue with it. I suggest you to try pure Laravel + JQuery, mayby there are some conflicts in events bindings which prevent the collapsible element from being clicked. Or if u can, send me the whole project in zipp file or repostiory, so i can look deeper into it. Here is my e-mail: j.mandra@mdbootstrap.com Best regards, Jakub from MDB

agustrom_mar pro answered 6 years ago

Hi! Finally I could resolver my problem. It was the fact that i load Vuejs Javascript before Mdboostrap.js. I have swapped them and it all works! Thanks for all

Jakub Mandra staff premium answered 6 years ago

Hi there, Great to hear! Sometimes you have to ask someone to step in on the answer yourself... :) Thanks for posting what was wrong. Keep hacking! Jakub from MDB
Write
Create snippet
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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
agustrom_mar
Pro User
10Support score
1Questions 2Answers
0Snippets likes 0Snippets