jQuery slidetoggle() divs using multiple id

Question

I am using this jQuery script to open and close multiple divs on a page.

<script type="text/javascript">
jQuery(document).ready(function(){
    $("#expanderHead").click(function(){
        $("#expanderContent").slideToggle();
        if ($("#expanderSign").text() == "+"){
            $("#expanderSign").html("−")
        }
        else {
            $("#expanderSign").text("+")
        }
    });
    $("#expanderHead2").click(function(){
        $("#expanderContent2").slideToggle();
        if ($("#expanderSign2").text() == "+"){
            $("#expanderSign2").html("−")
        }
        else {
            $("#expanderSign2").text("+")
        }
    });
    $("#expanderHead3").click(function(){
        $("#expanderContent3").slideToggle();
        if ($("#expanderSign3").text() == "+"){
            $("#expanderSign3").html("−")
        }
        else {
            $("#expanderSign3").text("+")
        }
    });
    $("#expanderHead4").click(function(){
        $("#expanderContent4").slideToggle();
        if ($("#expanderSign4").text() == "+"){
            $("#expanderSign4").html("−")
        }
        else {
            $("#expanderSign4").text("+")
        }
    });
    $("#expanderHead5").click(function(){
        $("#expanderContent5").slideToggle();
        if ($("#expanderSign5").text() == "+"){
            $("#expanderSign5").html("−")
        }
        else {
            $("#expanderSign5").text("+")
        }
    });
    $("#expanderHead6").click(function(){
        $("#expanderContent6").slideToggle();
        if ($("#expanderSign6").text() == "+"){
            $("#expanderSign6").html("−")
        }
        else {
            $("#expanderSign6").text("+")
        }
    });
    $("#expanderHead7").click(function(){
        $("#expanderContent7").slideToggle();
        if ($("#expanderSign7").text() == "+"){
            $("#expanderSign7").html("−")
        }
        else {
            $("#expanderSign7").text("+")
        }
    });
    $("#expanderHead8").click(function(){
        $("#expanderContent8").slideToggle();
        if ($("#expanderSign8").text() == "+"){
            $("#expanderSign8").html("−")
        }
        else {
            $("#expanderSign8").text("+")
        }
    });
    $("#openalltext").click(function(){
        $(".openall").slideToggle();
if ($("#expanderSign8, #expanderSign7").text() == "+"){
            $("#expanderSign8, #expanderSign7").html("−")
        }
        else {
            $("#expanderSign8, #expanderSign7").text("+")
        }
    });
});
</script>

Everything works fine except, I am trying to select multiple id's so I can change the "expandersign" on all the divs when clicking "expand all". I also tried using a class name so I only need one selector but it didn't work.

$("#openalltext").click(function(){
            $(".openall").slideToggle();
    if ($("#expanderSign8, #expanderSign7").text() == "+"){
                $("#expanderSign8, #expanderSign7").html("−")
            }
            else {
                $("#expanderSign8, #expanderSign7").text("+")
            }
        });

How can I select multiple div id's?

This is html for my expand all link --

<h4 id="openalltext" class="dctopall" style="cursor:pointer;margin-bottom: 0 !important;">Expand All</h4>

As for the divs being toggled, each of them are as follows --

<h4 id="expanderHead" class="dctop" style="cursor:pointer;margin-bottom: 0 !important;">Title Text <span id="expanderSign" class="exSign">+</span>
</h4>
<div id="expanderContent" class="openall" style="display:none">content</div>

This is what worked for me -

$("#openalltext").click(function(){
            $(".openall").slideToggle();
    $("#expanderSign8, #expanderSign7, #expanderSign6, #expanderSign5, #expanderSign4, #expanderSign3, #expanderSign2, #expanderSign").each(function() {
  if ($(this).text() == "+") {  
     $(this).text("−")
  } else {
     $(this).text("+")
  }
});
});

Answer 1

Your idea is good, but you need to target each element individually in a loop :

$("#expanderSign8, #expanderSign7, ...etc").each(function() {
  if ($(this).text() == "+") {  
     $(this).text("−")
  } else {
     $(this).text("+")
  }
});

Answer 2

Your complete code can be one click if you use classes and find. Your all code can also use a class and the each to loop.

$(function(){
  $(".expanderHead").on("click",function(){
    $(this).find(".expanderContent").slideToggle(); 
    var $sign = $(this).find(".expanderSign");
    $sign.text() = $sign.text() == "+"?"−":"+";
  });
  $("#openalltext").on("click",function(){
    $(".openall").slideToggle();
    $(".expanderSign").each(function() {
      $(this).text() = $(this).text() == "+"?"-":"+";
    });
  });
});