Показать / скрыть содержимое при наведении / клике

Question

Попытка показать / скрыть содержимое при наведении изображения.Это работает нормально, но по умолчанию содержимое под первым изображением должно отображаться.Как мне этого добиться?

https://jsfiddle.net/nsn3bpep/2/

    var divContent = $("#content").html();
    $("td").click(function () {
    $("#content").html($(this).find("#hover-content").html());
    $("td").removeClass('myClickState');
    $(this).addClass('myClickState');
    $(this).off('mouseleave');
   });
    $("td").hover(function () {
    $("#content").html($(this).find("#hover-content").html());
    }, function () {
    $("#content").html(divContent);
});

Answer 1

Просто добавьте эту строку под сценарием jquery, и все готово ...

$(document).ready(function(){
    $('tr:first-child>td:first-child>img.size-thumbnail').click()
});

Answer 2

Поскольку ваша скрипка показывает контент под первым изображением, я предполагаю, что вам нужен контент под каждым изображением.Здесь я изменил идентификатор hover-content на класс.

$("td").hover(function () {
    $(this).find('.hover-content').show();
}, function(){
    $(this).find('.hover-content').hide();
});

Здесь вы можете увидеть скрипку .