how to change plus and minus sign perfectly for showing open and close layers

Question

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.

 $('#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('-') } });

 * { box-sizing: border-box } body { font-family: "Lato", sans-serif; }.SLayer { background: #eee; padding: 10px; cursor: pointer; }

 <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>

Answer 1

I've modified your code a bit. You can try this:

$('li[id^=layername]').click(function() {
  var t = $(this).next();
  $("span:first",this).text($("span:first",this).text() == "+" ? "-" : "+")
  t.slideToggle();
  $('li[id^=layername]').not(this).find("span:first").text('+');
  $('li[id^=layerDetail]').not(t).slideUp();
})

Demo

 $('li[id^=layername]').click(function() { var t = $(this).next(); $("span:first",this).text($("span:first",this).text() == "+"? "-": "+") t.slideToggle(); $('li[id^=layername]').not(this).find("span:first").text('+'); $('li[id^=layerDetail]').not(t).slideUp(); })

 * { box-sizing: border-box } body { font-family: "Lato", sans-serif; }.SLayer { background: #eee; padding: 10px; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>

Answer 2

Some suggestions:

1. it would be better to use CSS for Plus and minus icon, not the HTML,
2. use one LI for one item and keep 2 different div or H or P inside that LI, so here should be 3 LI not 6 for this structure, This can vary but for me, that would be the ideal one.
3. don't write code for every click, use modular code so that if the content increase or decrease then you do not need to change the jQuery code

 $('.header').click(function() { $(".header").not(this).next().slideUp(); $(this).next().slideToggle(); $(".header").not(this).removeClass("opened"); $(this).toggleClass("opened"); })

 * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Lato", sans-serif; }.SLayer { background: #eee; padding: 10px; cursor: pointer; }.header {padding-left: 30px;position: relative;}.header:before, .header:after { content: ""; display: block; position: absolute; height: 1px; width: 10px; background: red; top: 50%; left: 14px; transform: translateY(-50%); }.header:before { transform: translateY(-50%) rotate(90deg); }.header.opened:before { opacity: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul style="list-style: none; "> <li class="SLayer header" id="layername"> Car </li> <li class="SLayer" id="layerDetail" style="background:blue; padding: 20px; color: white; display: none">Car Details</li> <li class="SLayer header" id="layername2"> Bus </li> <li class="SLayer" id="layerDetail2" style="background:blue; padding: 20px; color: white; display: none">Car Details</li> <li class="SLayer header" id="layername3"> Train </li> <li class="SLayer" id="layerDetail3" style="background:blue; padding: 20px; color: white; display: none">Car Details</li> </ul>