如何在jQuery中切换所有未选中的元素

Question

I am trying to do the following:

• There are multiple "title" and "text" divs on a page.
• Upon loading the page only the first text is visible.
• When clicking on any title, its text slides down and all other texts slide up.

So far I came up with the following: HTML:

<div class="row clearfix">
    <div class="title"></div>
    <div class="text"></div>
</div>
<div class="row clearfix">
    <div class="title"></div>
    <div class="text"></div>
</div>
<div class="row clearfix">
    <div class="title"></div>
    <div class="text"></div>
</div>
<div class="row clearfix">
    <div class="title"></div>
    <div class="text"></div>
</div>

jQuery:

$('.title').click(function () {
    $(this).next().slideToggle();
})

https://jsfiddle.net/e3okos3e/

However, this is very basic.

Can you tell me how to select every text other than the selected title's one? How to make only the first one visible at loading?

Answer 1

So, if all of the text divs are hidden by default, then do this:

 $(document).ready(function(){ $('.title').click(function () { $('.active').slideToggle().removeClass('active'); $(this).next().slideToggle().addClass('active'); }) }); 

 .title { width: 100px; height: 20px; border: 1px solid #cc0; } .text { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row clearfix"> <div class="title"></div> <div class="text">text1</div> </div> <div class="row clearfix"> <div class="title"></div> <div class="text">text2</div> </div> <div class="row clearfix"> <div class="title"></div> <div class="text">text3</div> </div> <div class="row clearfix"> <div class="title"></div> <div class="text">text4</div> </div> 

Answer 2

Fairly straightforward using not()

var $text = $('.text');// cache elements

$('.title').click(function () {
    var $next = $(this).next().slideDown();// or slideToggle()
    $text.not($next).slideUp();
});

DEMO