JSFiddle - React, Tailwind, and code Playground

by redler

HTML

<table id="mytable">
    <tr>
        <td>
            <a class="thumb" href="#" mce_href="#" name="thumb1" id="thumb1">...thumb1...</a>
        </td>
        <td>
            <a class="thumb" href="#" mce_href="#" name="thumb2" id="thumb2">...thumb2...</a>
        </td>
        <td>
            <a class="thumb" href="#" mce_href="#" name="thumb3" id="thumb3">...thumb3...</a>
        </td>
    </tr>
    <tr>
        <td id="viewport-cell" colspan="3">
            <!-- my "viewport" cell -->
            <!-- the big picture displays here -->
            <div name="bigpic1" id="bigpic1">...1... </div>
            <div name="bigpic2" id="bigpic2">...2... </div>
            <div name="bigpic3" id="bigpic3">...3... </div>
        </td>
    </tr>
</table>

CSS

td#viewport-cell div { 
  display: none;
}
div#bigpic1 { 
  display: block;
}

div { padding: 3px; border: 1px solid gray; }

a { padding: 10px; }

JavaScript

$('table#mytable').find('a.thumb').click( function(e){
    e.preventDefault(); // suppress native click
    var bigpicid = '#bigpic'+ this.id.replace(/^thumb/ig,'');
    $(bigpicid).siblings().hide().end().fadeIn('slow');
  });