Search code examples
javascriptjqueryhtmlcssmaterialize

change overflow of materializeCSS card-reveal on clicking an element contained within the card

I want to have a dropdown button inside the card-title which upon clicking should display a dropdown of options like this:

image of card-reveal with list

I know this can be done by setting the overflow of the card as overflow: visible !important. But this leads to bad animation of card-reveal upon clicking. you can check the animation here: https://jsfiddle.net/506ubrxh/2/

I want the card-reveal's reveal animation to animate normally like this: https://jsfiddle.net/su23or05/

So i want to dynamically change the overflow property of the card upon clicking the list icon so that it changes to overflow: visible !important when the user clicks the list button and reverts back to overflow: hidden when the user closes the dropdown. I have written the jQuery to perform this action but the code doesn't seem to work. Below are my html, css and jquery codes.

html code:

<div class="card">
  <div class="card-image waves-effect waves-block waves-light">
    <img class="activator" src="http://materializecss.com/images/office.jpg">
  </div>
  <div class="card-content">
    <span class="card-title activator grey-text text-darken-4">Card Title</span>
    <i class="material-icons right dropdown-button" data-activates="dropdown1">list</i>
  </div>
  <div class="card-reveal">
    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right listExpand">close</i></span>
    <p>Here is some more information about this product that is only revealed once clicked on.</p>
  </div>
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
  </ul>
</div>

css code:

.card {
  width: 60%;
  overflow: visible !important;
}

jQuery code:

$(document).ready(function(){
  $('.listExpand').click(function(){
    if($(this).hasClass('active'))
      $('.card').css("overflow", "visible !important");
  });
});

JSFiddle link: https://jsfiddle.net/506ubrxh/2/

It would be awesome if someone could help!

Solution

  • While CSS frameworks like Twitter Bootstrap and Zurb Foundation provide APIs for their components, unfortunately the MaterializeCSS framework mostly suffers from lack of public APIs to set custom event handlers to the components, especially for the dropdowns.

    Hence we have to set the handlers manually until they provide the APIs – Example Here:

    .card--visible-overflow {
  overflow: visible !important;
}

    $(document)
  // remove the visibility class from all cards
  // if the target of the click event is not a dropdown button
  .on('click', function(e) {
    if (! $(e.target).hasClass('dropdown-button')) {
      $('.card').removeClass('card--visible-overflow');
    }
  })

  // add the visibility class to the closest card
  // by clicking on each dropdown button inside the card
  .on('click', '.card .dropdown-button', function() {
    var $card = $(this).closest('.card'),
        openedClass = 'card--visible-overflow',
        dropDownIsOpened = $card.hasClass(openedClass);

    if (! dropDownIsOpened) {
      $card.addClass(openedClass); 
    }
  });