Нажмите на изображение, чтобы просмотреть содержимое

Question

Я искал искомый ответ на этот вопрос, но не могу найти ответ, который работает для меня. То, что я хочу, - это изображение, которое отображается на странице как с обычным тегом. Я хочу, чтобы изображение было кликабельным, и когда он щелкнут, некоторый контент упадет ниже его для описания изображения и т. Д. Затем, когда изображение будет снова нажато, оно скроет содержимое.

My (начинающий) Javascript попытка выглядит следующим образом:

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"> 

$(window).load(function(){ 
$(".header").click(function() { 

$header = $(this); 
//getting the next element 
$content = $header.next(); 
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown. 
$content.slideToggle(500, function() { 
    //execute this after slideToggle is done 
    //change text of header based on visibility of content div 
    $header.text(function() { 
     //change text based on condition 
     return $content.is(":visible") ? "Collapse" : "Expand"; 
    }); 
}); 

HTML, заключается в следующем:

<div class="container"> 
<div class="header"><img src="Placeholders/placeholder.jpg" width="500" height="333"></div> 
<div class="content" style="display: none;"> 
    The words should be here. 
</div> 

Любая помощь будет оценена, и я прошу прощения если это было отвечено в другом месте. Я не мог найти его.

Answer 1

Попробуйте этот HTML:

<div class="container"> 
    <div class="header"><img src="Placeholders/placeholder.jpg" width="500" height="333"></div> 
    <div class="content" style="height: 0px;overflow:hidden;"> 
     The words should be here. 
    </div> 

И этот сценарий:

$(document).ready(function(){ 
    $(".header").click(function() { 

     if($(".content").height() === 0){ 
      $(".content").animate({height: "20px"}, 500); 
     }else{ 
      $(".content").animate({height: "0px"}, 500); 
     } 

    }); 
}) 

На jsfiddle: https://jsfiddle.net/wef1o0b5/

Answer 2

Для вашего кода нужен отдельный тег script. Вы не можете повторно использовать тот, который импортирует jQuery.

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
    // Your code 
</script>