材料设计和 Jquery

Question

http://codepen.io/alcoven/pen/XJeEQy

I'm trying to get each one of these circles to activate itself without changing the rest of the circles on click. I was using $(this)('button') and $this.children('blub') when clicked on $('button') Now not only are these not working, but the material circle growth from the center isn't working either. The script above the click function script that slides in content is supposed create a span that slowly fills the bg and fades out.

HTML

<button class="blup active">Define<div class="button-text">This is test copy this is test copy this its test copy this is test copy this is test copy.This is test copy this is test copy this its test copy this is test copy this is test copy.</div></button>

<button class="blup active">Describe</button>
<button class="blup active">Discover</button>
<button class="blup active">Design</button>
<button class="blup active">Develop</button>
<button class="blup active">Deliver</button>

JS

var addRippleEffect = function (e) {
    var target = e.target;
    if (target.tagName.toLowerCase() !== 'button') return false;
    var rect = target.getBoundingClientRect();
    var ripple = target.querySelector('.ripple');
    if (!ripple) {
        ripple = document.createElement('span');
        ripple.className = 'ripple';
        ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
        target.appendChild(ripple);
    }
    ripple.classList.remove('show');
    var top = e.pageY - rect.top - ripple.offsetHeight / 4 - document.body.scrollTop;
    var left = e.pageX - rect.left - ripple.offsetWidth / 4 - document.body.scrollLeft;
    ripple.style.top = top + 'px';
    ripple.style.left = left + 'px';
    ripple.classList.add('show');
    ripple.classList.add('grow');
    return false;
}

document.addEventListener('click', addRippleEffect, false);

function morph(){
  var morphSniff = $('button').css('border-radius'); 
  if(morphSniff == "100%"){
    $('button').css('border-radius':'0%');
    $('.button-text').slideToggle();
  }
  else{
    $('button').css('border-radius':'100%');
    $('.button-text').slideToggle();
  }
};
$('button').click(function(){
    morph();
    return false; 
  });

Answer 1

Try to change only clicked circle by providing this context:

function morph() {
    var morphSniff = $(this).css('border-radius');
    if (morphSniff == "100%") {
        $(this).css('border-radius': '0%');
        $('.button-text').slideToggle();
    } else {
        $(this).css('border-radius': '100%');
        $('.button-text').slideToggle();
    }
};

$('button').click(morph);

Demo: http://codepen.io/anon/pen/myBLwm