複数のサムネイルを展開して折りたたむ

Question

こんにちは、私の最初の質問はとても親切にしてください！ divの拡張と縮小をトグルで試してみましたが、トップに3つのサムネイルを作成する方法を知っています。 3番目のサムネイルが正しく機能しています。もう1つは、展開された画像の下にサムネイルをドラッグします。

$(".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"; 
 
     }); 
 
    }); 
 

 
});

.row { 
 
    width: 50%; 
 
    height: 300px; 
 
    background-color: red; 
 
} 
 
.container { 
 
    width:100%; 
 
    border:1px solid #d3d3d3; 
 
} 
 
.container div { 
 
    width:100%; 
 
} 
 
.container .header { 
 
    background-color:#d3d3d3; 
 
    padding: 2px; 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
} 
 
.row { 
 
    margin-top: 20px; 
 
} 
 
.container .content { 
 
    display: none; 
 
    padding : 5px; 
 
} 
 

 
.content-p { 
 
    width: 70%; 
 
    float: right; 
 
    padding-right: 20px; 
 
    text-align: justify; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <img src="https://placebear.com/100/100" class="header"/> 
 
    <div class="content"> 
 
     <img class="content-img" src="https://placebear.com/300/300" alt="" /> 
 
     <p class='content-p'>1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p> 
 
    </div> 
 
    
 
    <img src="https://placebear.com/100/100" class="header"/> 
 
    <div class="content"> 
 
     <img class="content-img" src="https://placebear.com/300/300" alt="" /> 
 
     <p class='content-p'>2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p> 
 
    </div> 
 
    
 
    <img src="https://placebear.com/100/100" class="header"/> 
 
    <div class="content"> 
 
     <img class="content-img" src="https://placebear.com/300/300" alt="" /> 
 
     <p class='content-p'>3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p> 
 
    </div> 
 
</div> 
 

 
<div class="row"></div>

Answer 1

問題は、あなたが間違った場所にcontentを置いているということです。小さなサムネイルがグループ化されているコンテナが1つ、次に大きなコンテンツの最初のコンテナの下に別のコンテナが1つあります。

JavaScriptを変更する必要があるので、.next()の代わりに、サムネイルとそのより大きなバージョンをリンクする別の方法があります。