jQuery-单击链接并隐藏其他链接时显示当前div

Question

When I click on Show/hide link it shows both divs and I want it to show only its related div. How can I do that? I don't want to use ID's for each div.

jsfiddle

<div class="main-box">
    <a href="#" class="show_hide">Show/hide</a>

    <div class="slidingDiv">
    First div.
    </div>
</div>

<br/>

<div class="main-box">
    <a href="#" class="show_hide">Show/hide</a>

    <div class="slidingDiv">
    Second div.
    </div>
</div>

and

$(document).ready(function(){
    $(".slidingDiv").hide();
    $(".show_hide").show();

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

Answer 1

Into the click function, change your code to this:

$(".slidingDiv").slideUp();    
$(this).next().slideToggle();

https://jsfiddle.net/pzc8vy9b/6/

Answer 2

Use next() by changing

$(".slidingDiv").slideToggle();

to

$(this).next(".slidingDiv").slideToggle();

 $(document).ready(function(){ $(".slidingDiv").hide(); $(".show_hide").show(); $('.show_hide').click(function(){ $(this).next(".slidingDiv").slideToggle(); }); }); 

 .slidingDiv { height:300px; background-color: #99CCFF; padding:20px; margin-top:10px; border-bottom:5px solid #3399FF; } .show_hide { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="main-box"> <a href="#" class="show_hide">Show/hide</a> <div class="slidingDiv"> First div. </div> </div> <br/> <div class="main-box"> <a href="#" class="show_hide">Show/hide</a> <div class="slidingDiv"> Second div. </div> </div> 

Answer 3

Simply use next() .

https://jsfiddle.net/pzc8vy9b/4/

<div class="main-box">
    <a href="#" class="show_hide">Show/hide</a>

    <div class="slidingDiv">
    First div.
    </div>
</div>

<br/>

<div class="main-box">
    <a href="#" class="show_hide">Show/hide</a>

    <div class="slidingDiv">
    Second div.
    </div>
</div>

---

$(document).ready(function(){
    $('.show_hide').click(function(){
        $(this).next().slideToggle();
    });
});

---

.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
    display: none;
}

Answer 4

Try this

$(document).ready(function(){

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

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

});