Jquery：Figure要素を折りたたみ可能にするにはどうすればよいですか？

Question

余分なボタンを追加せずに図形要素を折りたたみ可能にするにはどうすればよいですか？

<figure><img src="abc.png"></figure>

デフォルトでは、私は、この時点で画像を開くためのボタンを配置したいと思います。このボタンは自動的に生成できますか？

Answer 1

jQueryが含まれていることを前提にして、slideToggle()関数を使用できます（HIGHLY RECOMMEND）。

は、その後、あなたは簡単に行うことができます。

$("#myButton").click(function() { 
    $("figure").slideToggle("slow"); 
}); 

はもちろん、ボタンを追加する必要があります。 jqueryで（自動的に）追加することも、HTMLを編集してそこから取得することもできます。

は、ここでHTMLの道

<button id="myButton">Click Me</button> 

ここ

（未テスト）jQueryの方法であるあなたに最高の幸運

$('figure').append("<button id='myButton'>Click Me</button>"); 

！ （再び、これは、すべての未テストされる）

は、そういえば、一度切り替えた後、あなたのボタンが消えますので、あなたはおそらく、代わりにappend() のafter()をしたいです。 使用jQueryのslideToggleこの

$('figure').after("<button id='myButton'>Click Me</button>"); 

リンク：http://api.jquery.com/slidetoggle/

Answer 2

チェックアウトの図形要素自体を使用して

$('#accordian_img').click(function() { 
 
    $('.img-toggle').toggleClass("show"); // toggle show class to image element 
 
});

/* Image style to show and hide */ 
 
.img-toggle.show { 
 
    display:block; 
 
} 
 
.img-toggle { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<figure id="accordian_img" style="width:400px;cursor:pointer"> 
 
    Click To Toggle Image 
 
    <img class="img-toggle" src="http://placehold.it/400x150"> 
 
</figure>