[![enter image description here](https://i.stack.imgur.com/v3tNm.jpg)](https://i.stack.imgur.com/v3tNm.jpg)

Hello I have created a list , for showing product and it's detail , But am unalbe to change minus and plus sign when I open a layers "plus" changing into minus but after one more click it's not changing in "plus"
sign again. how to do that plz see image for better understanding.

```js
$('#layername').click(function() {
  $('#layerDetail').slideToggle();
  $('#layerDetail2').slideUp();
  $('#layerDetail3').slideUp();
})

$('#layername2').click(function() {
  $('#layerDetail2').slideToggle();
  $('#layerDetail1').slideUp();
  $('#layerDetail').slideUp();
})

$('#layername3').click(function() {
  $('#layerDetail3').slideToggle();
  $('#layerDetail').slideUp();
  $('#layerDetail2').slideUp();
})

$('.SLayer').click(function() {

  x = $(this).next('li');

  if ($(this).next('li').css('display') == 'none') {
    $(this).find('span:first').text('+')

  } else {
    $(this).find('span:first').text('-')

  }

});
```

```css
* {
  box-sizing: border-box
}

body {
  font-family: "Lato", sans-serif;
}

.SLayer {
  background: #eee;
  padding: 10px;
  cursor: pointer;
}
```

```html
<ul style="list-style: none; ">
  <li class="SLayer" id="layername"> <span style="font-weight: 600; color:black">+</span>&nbsp;<span> Car </span> </li>

  <li class="SLayer" id="layerDetail" style="background:blue; padding: 20px; color: white; display: none">Car Details</li>

  <li class="SLayer" id="layername2"><span style="font-weight: 600; color:black">+</span>&nbsp;<span> Bus </span> </li>
  <li class="SLayer" id="layerDetail2" style="background:blue; padding: 20px; color: white; display: none">Car Details</li>
  <li class="SLayer" id="layername3"><span style="font-weight: 600; color:black">+</span>&nbsp;<span>  Train</span> </li>
  <li class="SLayer" id="layerDetail3" style="background:blue; padding: 20px; color: white; display: none">Car Details</li>
</ul>
```