jQuery幻灯片切换更改图像onclick？

Question

When I click on the .main_box div both arrow-up images change. I want to change only the first arrow-up image when I click on first .main_box div.

Does anyone know how to do this?

<div class="wrapper">
    <div class="main_box">
        <div class="arrow-up"><img src="arrow-up.png"></div>
        <div class="arrow-down"><img src="arrow-down.png"></div>
    </div>
    <div class="sliding_box"></div>
</div>

<div class="wrapper">
    <div class="main_box">
        <div class="arrow-up"><img src="arrow-up.png"></div>
        <div class="arrow-down"><img src="arrow-down.png"></div>
    </div>
    <div class="sliding_box"></div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $(".arrow-up").hide();
        $(".main_box").click(function(){
            $(this).siblings(".sliding_box").slideToggle(500);
            $(".arrow-up, .arrow-down").toggle();
        });
    });
</script>

Answer 1

Change to this instead, this should only toggle sub-elements to the clicked element.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $(".arrow-up").hide();
        $(".main_box").click(function(){
            $(this).siblings(".sliding_box").slideToggle(500);
            $(this).find(".arrow-up, .arrow-down").toggle();
        });
    });
</script>

Answer 2

Check this jsfiddle.net

JS

 $(document).ready(function() {
    $('#toggle3').click(function() {
    $('.toggle3').slideToggle('1100');
       var src = $("#bg3").attr('src') == "http://s8.postimg.org/maan1hkrl/box_arrow_down_green.jpg"   ? "http://s12.postimg.org/jy2yiw6ix/box_arrow_up_green.jpg" :  "http://s8.postimg.org/maan1hkrl/box_arrow_down_green.jpg";
            $("#bg3").attr('src', src);
        });
        });

Other Code part you get From jsfiddle Link