JQuery toggle (), hide () is not working properly

Question

I'm just starting out with jQuery in a Drupal environment.

I have several thumbnails, and I want that when you click one of them a large picture appears in the viewport (a hidden div appears). There may be better ways to accomplish what I do, but I need to do it this way.

This is what I have:

$(document).ready(function() {
  //$('#bigpic1').hide(); //show the first big picture always on page load
  $('#bigpic2').hide();
  $('#bigpic3').hide();

 $('a#thumb1').click(function() {
    $('#bigpic2').hide(); $('#bigpic3').hide();
    $('#bigpic3').toggle(200);
     return false;
  });
 $('a#thumb2').click(function() {
    $('#bigpic1').hide(); $('#bigpic3').hide();
    $('#bigpic2').toggle(200);
    return false;
  });
  $('a#thumb3').click(function() {
    $('#bigpic1').hide(); $('#bigpic2').hide();
    $('#bigpic3').toggle(200);
    return false;
  });

});

Besides some ugly code, it doesn't work properly. The first large photo does not appear when the page does, and clicking on more thumbnails shows the right div, but never hides (only one large photo should be visible at a time in the "viewport").

My HTML looks like

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

Answer 1

# , . jQuery, . http://api.jquery.com/category/selectors/.

, ( <a> , ).

<table>
    <tr>
        <td>
            <a href="#" mce_href="#" name="thumb1" id="thumb1">...thumb1...</a>
        </td>
        <td>
            <a href="#" mce_href="#" name="thumb2" id="thumb2">...thumb2...</a>
        </td>
        <td>
            <a href="#" mce_href="#" name="thumb3" id="thumb3">...thumb3...</a>
        </td>
    </tr>
    <tr>
        <td 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>

jQuery.

//on load
$(document).ready(function() {
    $('#bigpic2').hide();
    $('#bigpic3').hide();

    //this will be run when an element has a name with the text "thumb" in it
    $('[name*=thumb]').click(function() {
        //hide all big pictures (loops over every element that has a name with the text "bigpic" in it
        $('[name*=bigpic]').each(function(index, value) {
            if ($(this).is(':visible')) { //if the big pic is visible
                $(this).hide(200); //then hide it
                return false; //found the visible big pic so no need to keep looping
            }
        });
        //show the right image
        $('#bigpic' + $(this).attr('id').replace('thumb', '')).show(200);
    });
});// end on load

, . , / . , , $('#bigpic1').show(); . , .

Answer 2

-, " " . , , , :

<td id="viewport-cell" colspan="3">
  <div id="bigpic1">...1... </div>
   ...etc...
</td>

, , , :

<a class="thumb" href="#" mce_href="#" name="thumb1" id="thumb1"></a>

"bigpics":

td#viewport-cell div { /* hide all bigpics */
  display: none;
}
td#viewport-cell div#bigpic1 { /* but show the first one */
  display: block;
}

, jQuery:

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

: http://jsfiddle.net/redler/SDxwF/