Question

I’m currently creating a page at this link. I’m using this javascript in my header (below my CSS):

<script type="text/javascript" src="http://static.tumblr.com/txc9jrr/yNxmd3lq6/jquery.js">   
</script>

<script type="text/javascript">
$('.toggle').click(function(){
    var $tr = $(this).closest('tr');
    $tr.add($tr.next('.edit')).toggle();
});
$('.cancel').click(function(){
    var $tr = $(this).closest('tr');
    $tr.add($tr.prev('.view')).toggle();
});​
</script>

and this HTML:

<table>
  <tr class="view">
      <td>
          <a class="toggle" class="icon-button" href="#">Edit</a>
      </td>
  </tr>
  <tr class="edit" style="display:none">
      <td>
          hi
          <a class="cancel" href="#">Cancel</a>
      </td>
  </tr>
</table>

In theory, it should work… However when I implement it into my page, it ceases to function. Does anyone have a clue as to what my problem is?

Answer 1

change

<a class="toggle" class="icon-button" href="#">Edit</a>
   // ^--------------^---------------------Cannot define two classes like this

to

<a class="toggle icon-button" href="#">Edit</a>
 //  ^--------------------------------Try like this

DEMO