       mediaObj:  result.media_obj
 
 
-  mainRow: (result) ->
+  toggleJPlayer: (index) ->
+    rowNo = if @state.rowNoShowingPlayer is index then null else index
+    @setState(rowNoShowingPlayer: rowNo)
+
+
+  mainRow: (result, index) ->
     corpusHasSound = @props.corpus.has_sound
     `<tr>
       {this.idColumn(result)}
       {corpusHasSound
         ? <td className="span1">
-            <button className="btn" AAaction="" togglejplayerBB=""><i className="icon-volume-up" /></button>
+            <button className="btn" onClick={this.toggleJPlayer.bind(null, index)}><i className="icon-volume-up" /></button>
           </td>
         : null}
       {this.textColumns(result)}

  propTypes:
    resultPage: React.PropTypes.array
    corpus: React.PropTypes.object.isRequired
    rowNoShowingPlayer: React.PropTypes.number

  componentDidUpdate: (prevProps) ->
    # Create tooltips after a new result page is displayed

      <table className="table table-striped table-bordered">
        <tbody>
        {results.map(function(result, index) {
          var mainRow = this.mainRow(result, index),
              extraRows = extraRowAttrs.map(this.extraRow);
              rows = [mainRow, extraRows];
          if(this.state.rowNoShowingPlayer === index) {
            rows.push(
              <tr>
                <td colSpan="10">
