<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
      “What a relief it must be for Blair to get out of England. It is said that the Queen has come to love the Commonwealth, partly because it supplies her with regular cheering crowds of flag-waving piccaninnies.” <em>– <a href="http://www.theguardian.com/politics/2008/jan/23/london.race">Boris Johnson</a></em>
  </div>
</div>
 
<select name="effects" id="effectTypes">
  <option value="blind">Blind</option>
  <option value="bounce">Bounce</option>
  <option value="clip">Clip</option>
  <option value="drop">Drop</option>
  <option value="explode">Explode</option>
  <option value="fade">Fade</option>
  <option value="fold">Fold</option>
  <option value="highlight">Highlight</option>
  <option value="puff">Puff</option>
  <option value="pulsate">Pulsate</option>
  <option value="scale">Scale</option>
  <option value="slide">Slide</option>
</select>

 
/* base styles */

body {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  color: #333;
  font-size: 20px;
  line-height: 1.5;
  
  background: #fafafa;
  padding: 50px 0;
} 

a {
  color: #2098d1;
}

a:hover {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

.toggler { 
  width: 80%; 
  max-width: 550px;
  text-align: left;
  position: relative;
  margin: 0 auto 6% auto;
}

#effectTypes {
  background: #e1e1e1;
  height: 2.5em;
  font-size: 1em;
  font-weight: normal;
  text-decoration: none;
  color: #666;
  box-shadow: -3px 5px 0px rgba(0,0,0,0.2);
  border: none;
  border-radius: none;
  cursor: pointer;
}

#effect {  
  position: relative; 
}
// from https://jqueryui.com/effect/


  $( function() {
    // run the currently selected effect
    function runEffect() {
      // get effect type from
      var selectedEffect = $( "#effectTypes" ).val();
 
       // Most effect types need no options passed by default
      var options = {};

      // Run the effect
      $( "#effect" ).effect( selectedEffect, options, 500, callback );
    };
 
    // Callback function to bring a hidden box back
    function callback() {
      setTimeout(function() {
        $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
      }, 1000 );
    };
 
    // Set effect from select menu value
    $( "#effectTypes" ).on( "change", function() {
      runEffect();
      return false;
    });
  } );



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js