dchelimsky · May 15, 2011 18:44
diff --git a/jquery-example.html b/jquery-example.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>JQuery example</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script type='text/javascript'>
      //<![CDATA[
        $(function() {
          $('.panel').bind('showDescription', function() {
            $(this).show();
            $('#link-' + $(this).data('item_id')).text("hide description");
          });
        
          $('.panel').bind('hideDescription', function() {
            $(this).hide();
            $('#link-' + $(this).data('item_id')).text("show description");
          });
        

          $("#group-1 .description-toggle a").click(function() {
            var itemId = $(this).data("item_id");
            var panel = $("#panel-" + itemId);
            if (panel.css('display') == 'none') {
              panel.trigger('showDescription');
            } else {
              panel.trigger('hideDescription');
            }
            return false;
          });

          $("#group-2 .description-toggle a").click(function() {
            var itemId = $(this).data("item_id");
            $("#panel-" + itemId + ":visible").trigger('hideDescription');
            $("#panel-" + itemId + ":hidden").trigger('showDescription');
            return false;
          });

          $("#group-3 .description-toggle a").click(function() {
            var itemId = $(this).data("item_id");
            $("#panel-" + itemId + ":hidden").trigger('showDescription');
            $("#panel-" + itemId + ":visible").trigger('hideDescription');
            return false;
          });
        });
      //]]>
    </script>
    <style>
      .hidden {
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="group-1">
      <h2>Group 1</h2>

      <table>
        <tr>
          <td>Item 1</td>
          <td class='description-toggle'><a href="#" data-item_id="1" id="link-1">show description</a></td>
        </tr>
        <tr class='panel hidden' data-item_id='1' id='panel-1'>
          <td class='padding'></td>
          <td id='description-1'>This is the description for item 1</td>
        </tr>

        <tr>
          <td>Item 2</td>
          <td class='description-toggle'><a href="#" data-item_id="2" id="link-2">show description</a></td>
        </tr>
        <tr class='panel hidden' data-item_id='2' id='panel-2'>
          <td class='padding'></td>
          <td id='description-2'>This is the description for item 2</td>
        </tr>
      </table>
      <br>

      This ^^ uses the following javascript, which works for both links:

      <pre>
 $("#group-1 .description-toggle a").click(function() {
  var itemId = $(this).data("item_id");
  var panel = $("#panel-" + itemId);
  if (panel.css('display') == 'none') {
    panel.trigger('showDescription');
  } else {
    panel.trigger('hideDescription');
  }
  return false;
 });
      </pre>
    </div>

    <div id="group-2">
      <h2>Group 2</h2>

      <table>
        <tr>
          <td>Item 3</td>
          <td class='description-toggle'><a href="#" data-item_id="3" id="link-3">show description</a></td>
        </tr>
        <tr class='panel hidden' data-item_id='3' id='panel-3'>
          <td class='padding'></td>
          <td id='description-3'>This is the description for item 3</td>
        </tr>

        <tr>
          <td>Item 4</td>
          <td class='description-toggle'><a href="#" data-item_id="4" id="link-4">hide description</a></td>
        </tr>
        <tr class='panel' data-item_id='4' id='panel-4'>
          <td class='padding'></td>
          <td id='description-4'>This is the description for item 4</td>
        </tr>
      </table>
      <br>

      This ^^ uses the following javascript, which works for the show link, but not the hide link

      <pre>
 $("#group-2 .description-toggle a").click(function() {
  var itemId = $(this).data("item_id");
  $("#panel-" + itemId + ":visible").trigger('hideDescription');
  $("#panel-" + itemId + ":hidden").trigger('showDescription');
  return false;
 });
      </pre>
    </div>

    <div id="group-3">
      <h2>Group 3</h2>

      <table>
        <tr>
          <td>Item 5</td>
          <td class='description-toggle'><a href="#" data-item_id="5" id="link-5">show description</a></td>
        </tr>
        <tr class='panel hidden' data-item_id='5' id='panel-5'>
          <td class='padding'></td>
          <td id='description-5'>This is the description for item 5</td>
        </tr>

        <tr>
          <td>Item 6</td>
          <td class='description-toggle'><a href="#" data-item_id="6" id="link-6">hide description</a></td>
        </tr>
        <tr class='panel' data-item_id='6' id='panel-6'>
          <td class='padding'></td>
          <td id='description-6'>This is the description for item 6</td>
        </tr>
      </table>
      <br>

      This ^^ uses the following javascript, which works for the hide link, but not the show link

      <pre>
 $("#group-3 .description-toggle a").click(function() {
  var itemId = $(this).data("item_id");
  $("#panel-" + itemId + ":visible").trigger('hideDescription');
  $("#panel-" + itemId + ":hidden").trigger('showDescription');
  return false;
 });
      </pre>
    </div>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>JQuery example</title>
	<script src="jquery.js" type="text/javascript"></script>
	<script type='text/javascript'>
	//<![CDATA[
	$(function() {
	$('.panel').bind('showDescription', function() {
	$(this).show();
	$('#link-' + $(this).data('item_id')).text("hide description");
	});

	$('.panel').bind('hideDescription', function() {
	$(this).hide();
	$('#link-' + $(this).data('item_id')).text("show description");
	});


	$("#group-1 .description-toggle a").click(function() {
	var itemId = $(this).data("item_id");
	var panel = $("#panel-" + itemId);
	if (panel.css('display') == 'none') {
	panel.trigger('showDescription');
	} else {
	panel.trigger('hideDescription');
	}
	return false;
	});

	$("#group-2 .description-toggle a").click(function() {
	var itemId = $(this).data("item_id");
	$("#panel-" + itemId + ":visible").trigger('hideDescription');
	$("#panel-" + itemId + ":hidden").trigger('showDescription');
	return false;
	});

	$("#group-3 .description-toggle a").click(function() {
	var itemId = $(this).data("item_id");
	$("#panel-" + itemId + ":hidden").trigger('showDescription');
	$("#panel-" + itemId + ":visible").trigger('hideDescription');
	return false;
	});
	});
	//]]>
	</script>
	<style>
	.hidden {
	display: none;
	}
	</style>
	</head>

	<body>
	<div id="group-1">
	<h2>Group 1</h2>

	<table>
	<tr>
	<td>Item 1</td>
	<td class='description-toggle'><a href="#" data-item_id="1" id="link-1">show description</a></td>
	</tr>
	<tr class='panel hidden' data-item_id='1' id='panel-1'>
	<td class='padding'></td>
	<td id='description-1'>This is the description for item 1</td>
	</tr>

	<tr>
	<td>Item 2</td>
	<td class='description-toggle'><a href="#" data-item_id="2" id="link-2">show description</a></td>
	</tr>
	<tr class='panel hidden' data-item_id='2' id='panel-2'>
	<td class='padding'></td>
	<td id='description-2'>This is the description for item 2</td>
	</tr>
	</table>
	<br>

	This ^^ uses the following javascript, which works for both links:

	<pre>
	$("#group-1 .description-toggle a").click(function() {
	var itemId = $(this).data("item_id");
	var panel = $("#panel-" + itemId);
	if (panel.css('display') == 'none') {
	panel.trigger('showDescription');
	} else {
	panel.trigger('hideDescription');
	}
	return false;
	});
	</pre>
	</div>

	<div id="group-2">
	<h2>Group 2</h2>

	<table>
	<tr>
	<td>Item 3</td>
	<td class='description-toggle'><a href="#" data-item_id="3" id="link-3">show description</a></td>
	</tr>
	<tr class='panel hidden' data-item_id='3' id='panel-3'>
	<td class='padding'></td>
	<td id='description-3'>This is the description for item 3</td>
	</tr>

	<tr>
	<td>Item 4</td>
	<td class='description-toggle'><a href="#" data-item_id="4" id="link-4">hide description</a></td>
	</tr>
	<tr class='panel' data-item_id='4' id='panel-4'>
	<td class='padding'></td>
	<td id='description-4'>This is the description for item 4</td>
	</tr>
	</table>
	<br>

	This ^^ uses the following javascript, which works for the show link, but not the hide link

	<pre>
	$("#group-2 .description-toggle a").click(function() {
	var itemId = $(this).data("item_id");
	$("#panel-" + itemId + ":visible").trigger('hideDescription');
	$("#panel-" + itemId + ":hidden").trigger('showDescription');
	return false;
	});
	</pre>
	</div>

	<div id="group-3">
	<h2>Group 3</h2>

	<table>
	<tr>
	<td>Item 5</td>
	<td class='description-toggle'><a href="#" data-item_id="5" id="link-5">show description</a></td>
	</tr>
	<tr class='panel hidden' data-item_id='5' id='panel-5'>
	<td class='padding'></td>
	<td id='description-5'>This is the description for item 5</td>
	</tr>

	<tr>
	<td>Item 6</td>
	<td class='description-toggle'><a href="#" data-item_id="6" id="link-6">hide description</a></td>
	</tr>
	<tr class='panel' data-item_id='6' id='panel-6'>
	<td class='padding'></td>
	<td id='description-6'>This is the description for item 6</td>
	</tr>
	</table>
	<br>

	This ^^ uses the following javascript, which works for the hide link, but not the show link

	<pre>
	$("#group-3 .description-toggle a").click(function() {
	var itemId = $(this).data("item_id");
	$("#panel-" + itemId + ":visible").trigger('hideDescription');
	$("#panel-" + itemId + ":hidden").trigger('showDescription');
	return false;
	});
	</pre>
	</div>
	</body>
	</html>