Materialize.css - How to disable ripple effect/ waves effect on a specified element (anchor tag)?

Question

I'm trying to remove the ripple effect/ waves effect only from a specified anchor tag but unable to achieve it. Any ideas?

Anchor tag:

    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span>My Policies</span>
       <i class="fa fa-angle-down" aria-hidden="true"></i><i class="fa fa-plus"></i>
    </a>

The class "waves-effect waves-light" gets added dynamically like this:

<a class="nav-link dropdown-toggle waves-effect waves-light" href="#" id="navbarDropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  <span>My Policies</span>
  <i class="fa fa-angle-down" aria-hidden="true"></i><i class="fa fa-plus"></i>
</a>

Answer 1

You can use .addClass() and .removeClass() method of jQuery to add or remove class from elements.

In your case you want to add Ripple Effect to an anchor tag. So assign an id to that anchor tag and use .addClass() method to add or .removeClass() to remove the Ripple Effect.

So you can trigger an event like button click, page load to add/remove your class (waves-effect waves-light)

I have created a jsfiddle take a look:

Demo: https://jsfiddle.net/Tirth_Patel/s52ko6eo/

Example:

HTML

<a class="blue nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    <span>My Policies</span>

    <i class="fa fa-angle-down" aria-hidden="true"></i>
    <i class="fa fa-plus"></i>

</a>

<br><button id="btn" class="btn">Add Ripple</button>

<br><br><button id="btn2" class="btn">Remove Ripple</button>

jQuery

$(document).ready(function(){

    // Adds `waves-effect wave-light` class to `anchor`
    $('#btn').click(function(){

        $('#navbarDropdownMenuLink3').addClass('waves-effect waves-light');
    });


    // Removes `waves-effect wave-light` class from `anchor`
    $('#btn2').click(function(){

        $('#navbarDropdownMenuLink3').removeClass('waves-effect waves-light');

    });

});