Has someone a workaround to activate 2 or multiple dropdowns with Materialize Framework?

28
July 27, 2018, at 5:30 PM

I'm trying to have to mutiple dropdowns elements in Materialize. I found out that it doesn't work, but there is a workaround stated here by singhshash:

https://github.com/Dogfalo/materialize/issues/2621

my problem is I can't activate dropdown accessing id='btndropdown1', but it is the only ID with this specific name. Has anyone a workaround other that the solution stated above?

<a id='btndropdown1' class='dropdown-trigger' href="#" data-target='dropdown1'>
  <div class="col s2 m3">
    <div class="card red darken-1">
      <div class="card-content white-text">
        <span class="card-title center">Heizen</span>
      </div>
      <div class="center">
        <i class="material-icons large white-text">hot_tub</i>
      </div>
      <ul id='dropdown1' class='dropdown-content red darken-1'>
        <li ><a href="#!" class="black-text">Heizgeräte</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Ex-Heizgeräte</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Heizgebläse</a></li>
      </ul>
    </div>
  </div>
</a>
<a  id='btndropdown2' class='dropdown-trigger' href="#" data-target='dropdown2'>
  <div class="col s2 m2">
    <div class="card cyan darken-1">
      <div class="card-content white-text">
        <span class="card-title center">Filterlüfter</span>
      </div>
      <div class="center">
        <i class="material-icons large white-text">view_headline</i>
      </div>
      <ul id='dropdown2' class='dropdown-content cyan'>
        <li ><a href="#!" class="black-text">Filterlüfter</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Outdoor-Filterlüfter</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Dach-Filterlüfter</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Lüftereinschub</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Einbaulüfter</a></li>
      </ul>
    </div>
  </div>
</a>
<script type='text/javascript'>
  $(document).ready(function(){
    $('#btndropdown1').dropdown();
    $('#btndropdown2').dropdown();
  });
</script>
READ ALSO
live Comment system with jquery ajax codeigniter php and mysql? Please Help friends [on hold]

live Comment system with jquery ajax codeigniter php and mysql? Please Help friends [on hold]

live Comment system with jquery ajax codeigniter php and mysql, Page should not reload at the form submit

20
Remove multiple elements after animation in a for loop

Remove multiple elements after animation in a for loop

I got a number of X boxes created dynamically, as I can add and remove any number of themI added a small animation ("

56
Boto3 in Python - compressing an SVG image when serving in cloudfront using an s3 bucket

Boto3 in Python - compressing an SVG image when serving in cloudfront using an s3 bucket

I want to serve a compressed SVG image (gzipped) on my websiteI have enabled compression behavior on my folder in cloudfront

60