How can I combine these functions?

Question

Edit: Sorry I did't explain this more properly, I've added some more of my code. It's quite messy and I think it can greatly simplified, but I struggle a lot with javascript.

I'm trying to make a series of "read more" buttons on a page with a + and – that are swapped out when clicked. Each one needs to operate independently from the rest obviously. I could not pull this off with css for html placement reasons. (The comes before the )

Original post: I'm new here and also new to javascript/jquery. I tried to search answered questions.

How can I combine these functions so I don't have to repeat them over and over. In other words: select multiple IDs with one function.

<style>
.more-content {
max-height: 0;
overflow: hidden;
transition: max-height .5s ease;}

.toggle {
display: none;}

.toggle-label {
display: inline-block;
user-select: none;
cursor: pointer;
border: none;
color: #808080;
float: right;}

.toggle-label:hover {
color: #FFFFFF;}

.toggle:checked + .more-content {
display: block;
max-height: 1000px;}
</style>

<label class="toggle-label title" for="more-1" name="moreless1" id="moreless1">+</label>
<input id="more-1" class="toggle" type="checkbox" value="1" onclick="moreless1('more-1','moreless1');">

<div class="more-content">
    <p class="text line24"></br>This is more content.</p>
</div>


<label class="toggle-label title" for="more-2" name="moreless2" id="moreless2">+</label>
<input id="more-2" class="toggle" type="checkbox" value="1" onclick="moreless2('more-2','moreless2');">

<div class="more-content">
    <p class="text line24"></br>This is more content.</p>
</div>


<label class="toggle-label title" for="more-3" name="moreless3" id="moreless3">+</label>
<input id="more-3" class="toggle" type="checkbox" value="1" onclick="moreless3('more-3','moreless3');">

<div class="more-content">
    <p class="text line24"></br>This is more content.</p>
</div>


<label class="toggle-label title" for="more-4" name="moreless4" id="moreless4">+</label>
<input id="more-4" class="toggle" type="checkbox" value="1" onclick="moreless4('more-4','moreless4');">

<div class="more-content">
    <p class="text line24"></br>This is more content.</p>
</div>


<script>
function moreless1(thecheckbox, thelabel) {
        var checkboxvar = document.getElementById(thecheckbox);
        var labelvar = document.getElementById(thelabel);
        if (!checkboxvar.checked) {
            labelvar.innerHTML = "+";
        }
        else {
            labelvar.innerHTML = "-";
        }
    }

function moreless2(thecheckbox, thelabel) {
        var checkboxvar = document.getElementById(thecheckbox);
        var labelvar = document.getElementById(thelabel);
        if (!checkboxvar.checked) {
            labelvar.innerHTML = "+";
        }
        else {
            labelvar.innerHTML = "-";
        }
    }

function moreless3(thecheckbox, thelabel) {
        var checkboxvar = document.getElementById(thecheckbox);
        var labelvar = document.getElementById(thelabel);
        if (!checkboxvar.checked) {
            labelvar.innerHTML = "+";
        }
        else {
            labelvar.innerHTML = "-";
        }
    }

function moreless4(thecheckbox, thelabel) {
        var checkboxvar = document.getElementById(thecheckbox);
        var labelvar = document.getElementById(thelabel);
        if (!checkboxvar.checked) {
            labelvar.innerHTML = "+";
        }
        else {
            labelvar.innerHTML = "-";
        }
    }</script>

Answer 1

Just to start with, how about doing this

function moreless(thecheckbox, thelabel) {
    var checkboxvar = document.getElementById(thecheckbox);
    var labelvar = document.getElementById(thelabel);
    if (!checkboxvar.checked) {
        labelvar.innerHTML = "+";
    }
    else {
        labelvar.innerHTML = "-";
    }
}

function moreless1(thecheckbox, thelabel) {
    moreless(thecheckbox, thelabel);
}

function moreless2(thecheckbox, thelabel) {
    moreless(thecheckbox, thelabel);
}

function moreless3(thecheckbox, thelabel) {
    moreless(thecheckbox, thelabel);
}

function moreless4(thecheckbox, thelabel) {
    moreless(thecheckbox, thelabel);
}

A further improvement would be to call moreless with different arguments.

Answer 2

You question is not clear. But it seems you want to use a single function for same type of elements with different ids. You have not defined when and how the function would be invoked.

However to use a single function for same type of elements with different id's you could define a common class among the elements and inside javascript loop through them and call one single function-

<input type="checkbox" id=checkbox1" class="common-cls" value="Checkbox 1" data-label-id="label1">Checkbox 1
<input type="checkbox" id=checkbox2" class="common-cls" value="Checkbox 2" data-label-id="label2">Checkbox 2
 .........

Inside script, you can do something like this-

$('.common-cls').each(function() {
    var checkboxvar = this.id;
    var labelvar = $(this).attr('data-label-id');
    moreless(checkboxvar, labelvar );
});

You need to define only one function moreless and that should do the job.

Answer 3

Use only ids on labels, then add onClick(moreless(this,'labelID')) on input, the this keyword refers to input tag, so you don't have to add id attribute on your checkbox

Code:

<input type="checkbox" onClick="moreless(this,'label1')">
<span id='label1'>Hello</span>
<input type="checkbox" onClick="moreless(this,'label2')">
<span id='label2'>World</span>

<script>
    function moreless(thecheckbox, thelabel) {
        var labelvar = document.getElementById(thelabel);
        if (!thecheckbox.checked) {
            labelvar.innerHTML = "+";
        } else {
            labelvar.innerHTML = "-";
        }
    }

</script>

  function moreless(thecheckbox, thelabel) { var labelvar = document.getElementById(thelabel); if (!thecheckbox.checked) { labelvar.innerHTML = "+"; } else { labelvar.innerHTML = "-"; } } 

  <input type="checkbox" onClick="moreless(this,'label1')"> <span id='label1'>Hello</span> <input type="checkbox" onClick="moreless(this,'label2')"> <span id='label2'>World</span>