Jquery 显示隐藏多个div

我的想法是，当我点击一幅图片时，会显示另一幅图片和一些文字。我成功地做到了这一点：

Jquery

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});

});

HTML

但是我有点困惑，我怎么能用一张以上的图片来做这件事呢

举个例子，如果我有8个不同的可点击图像，那将显示8个不同的图像和文本

---

还有，有没有办法让它上升而不是下降？

您可以使用数据属性来抽象类名：

<a href="#" data-target="someclass" class="show_hide">

$('.show_hide').click(function(){
     var myClass=$(this).attr('data-target');
     $("."+myClass).slideToggle();
}

$（'.show_hide'）。单击（函数（）{
var myClass=$（this.attr（'data-target'）；
$（“+myClass）.slideToggle（）；
}

一个优雅的解决方案是像这样包装切换链接和切换内容：

<div class="toggler-wrap">
    <a href="#" class="toggler">Toggle content</a>
    <div class="content">This text can be toggled.</div>
</div>

请参见示例！ 好好练习吧

<a href="#" data-target="someclass" class="show_hide">

$('.show_hide').click(function(){
     var myClass=$(this).attr('data-target');
     $("."+myClass).slideToggle();
}

<div class="toggler-wrap">
    <a href="#" class="toggler">Toggle content</a>
    <div class="content">This text can be toggled.</div>
</div>

$(function(){
    $('.toggler').click(function(event){
        event.preventDefault();
        $(this).parent().find('.content').slideToggle();
    });
});