jQuery doesn't display specific hidden content when I use the .show() command

Question

Below is my HTML and jQuery code. jQuery displays the hidden elements, except for the #image4 and #video4 elements, which stay hidden with if I select image or video . All the other elements get displayed correctly.

Any idea why those two won't show?

JS:

 $(document).ready(function(){
        var fields = jQuery('#image_type');
        var select = this.value;
        fields.change(function () {
            if ($(this).val() == 'image') {
              alert($(this).val());
                $('#images_pop_up').show();
                $('#video1').hide();
                $('#video2').hide();
                $('#video3').hide();
                $('#video4').hide();
                $('#image1').show();
                $('#image2').show();
                $('#image3').show();
                $('#image4').show();
                $(' #image5').show();
              }
              else {
                $('#images_pop_up').show();
                $('#image1').hide();
                $('#image2').hide();
                $('#image3').hide();
                $('#image4').hide();
                $('#image5').hide();
                $('#video1').show();
                $('#video2').show();
                $('#video3').show();
                $('#video4').show();
                $('#image5').show();
              }

        });
    });

HTML:

<div id ="images_pop_up" style="display:none;">
   <span id="image1"  style="display:none;" ><img src="/uploads/commerce/images/large/easton-163135-wheeled-bag.jpg" border="0" alt="easton-163135-wheeled-bag.jpg" title=" easton-163135-wheeled-bag.jpg " class="productimage"><input type="hidden" name="products_previous_image_lrg" value="easton-163135-wheeled-bag.jpg"><br>Nice bag</span>
   <span  id ="video1" style="display:none;"></span></td>
   <td  class="textSmall" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
         <tr>
            <span id="image3"  style="display:none;"><input type="hidden" name="products_previous_image_lrg" value="easton-163135-wheeled-bag.jpg"><input type="hidden" name="products_previous_image_lrg_caption" value="Nice bag"></span>
            <span id ="video3"><input type="hidden" name="products_previous_video_embed"><input type="hidden" name="products_previous_video_embed_caption"></span>
            <td class="textSmall" valign="top"><span id="image4" style="display:none;">New Image File: <input type="text" name="products_image_lrg" value="easton-163135-wheeled-bag.jpg"><br>Image Caption: <input type="text" name="products_image_lrg_caption" value="Nice bag"></span>
               <span id ="video4" style="display:none;">Video Embed field: <input type="text" name="products_video_embed"><br>Video Image Caption: <input type="text" name="products_video_embed_caption"></span>
            </td>
            <td><span id="image5" style="display:none;"> <a href='#' onclick='return false;'><img src="includes/languages/english/images/buttons/button_select.gif" border="0" alt="Select" title=" Select " onclick="popupWindowSelectImg('./images_select.php?imgSize=lrg&inpt=products_image_lrg&div=div_img_lrg&width=200&height=30','lrg','products_image_lrg','div_img_lrg');"></a></span></td>
         </tr>
         <tr>
            <td colspan="2">
               <div id='div_img_lrg'></div>
            </td>
         </tr>
      </table>
   </td>
</div>

Answer 1

What sticks out most to me is that you're copy pasting when you could be putting CSS to work for you by giving them all the same class (or the appropriate groups of elements the same class at least) and then hiding and showing them based on that.

Your bug is probably caused by a slight typo somewhere in the selectors or the place where you're setting the ids in the markup.

Answer 2

try like this

    $(document).ready(function () {
    var fields = jQuery('#image_type');
    var select = this.value;
    $('#image_type').change(function () {
        if ($(this).val() == 'image') {
            alert($(this).val());
            $("[id^=image]").show();
            $("[id^=video]").hide();
        } else {
            $("[id^=video]").show();
            $("[id^=image]").hide();
        }

    });
});