Guys I'm having a problem on traversing with `jQuery` what I'm doing is there is 2 `<a>` elements, both `anchor` elements have a same `<div>` element and by default these `<div>` have a property called `display:none`. When I click on any `anchor` element the `<div>` element is `slideToggle`. But after clicking one `anchor` element, previous `anchor` element `<div>` is `slideUp` . It's work fine but when i first click second `anchor` element, then click first `anchor`, second `anchor` element `<div>` is not `slideUp`.

```js
  $('.labels').click(function () {

        $(this).next().stop().slideToggle();
        $(this).prev().stop().slideUp();

    });
```

```css
.content{
border:1px solid black;
display:none;
}
```

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>None</title>
</head>
<body>
<a class="labels">
    <p>Click Label One</p>
</a>
<div class="content">
    <p>Tea</p>
</div>
<a class="labels">
    <p>Click Label Two</p>
</a>
<div class="content">
    <p>Coffee</p>
</div>
</body>
</html>
```