Return to Answer

$('.expandable_header').click(function() {
 toggle_expandable_icon($(this).find('i'));
 $(this).nextUntil('tr.expandable_header').slideToggle("slow");
});
function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle fa-minus-circle');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet" />
<table>
 <tr class="expandable_header">
 <td>
 <i class="fa fa-plus-circle"></i>
 </td>
 </tr>
 <tr style="display: none;">none;" height="250px">
 <td> 
 <a href="https://codereview.meta.stackexchange.com/a/1511/120114" target="_blank">😱 Zombies exist! 😱</a>
 </td>
 </tr>
</table>

##Use toggle methods

Presuming that you are just toggling those two classes, you could just use classList.toggle() with those two class names:

function toggle_expandable_icon(elem) {
 elem.classList.toggle('fa-plus-circle');
 elem.classList.toggle('fa-minus-circle');
}

And it appears jQuery is used, so the .toggleClass() method could be used on a jQuery collection (i.e. remove the [0] in toggle_expandable_icon($(this).find('i')[0]);):

function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle').toggleClass('fa-minus-circle');
}

Those class names could also be added together in a single toggleClass() call:

function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle fa-minus-circle');
}

##Demo

$('.expandable_header').click(function() {
 toggle_expandable_icon($(this).find('i'));
 $(this).nextUntil('tr.expandable_header').slideToggle("slow");
});
function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle fa-minus-circle');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet" />
<table>
 <tr class="expandable_header">
 <td>
 <i class="fa fa-plus-circle"></i>
 </td>
 </tr>
 <tr style="display: none;">
 <td> 
 <a href="https://codereview.meta.stackexchange.com/a/1511/120114" target="_blank">😱 Zombies exist! 😱</a>
 </td>
 </tr>
</table>

##Use toggle methods

Presuming that you are just toggling those two classes, you could just use classList.toggle() with those two class names:

function toggle_expandable_icon(elem) {
 elem.classList.toggle('fa-plus-circle');
 elem.classList.toggle('fa-minus-circle');
}

And it appears jQuery is used, so the .toggleClass() method could be used on a jQuery collection (i.e. remove the [0] in toggle_expandable_icon($(this).find('i')[0]);):

function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle').toggleClass('fa-minus-circle');
}

Those class names could also be added together in a single toggleClass() call:

function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle fa-minus-circle');
}

##Demo Without knowing the HTML structure it was challenging to know exactly how the toggles operated, but it wasn't very difficult to generate something.

$('.expandable_header').click(function() {
 toggle_expandable_icon($(this).find('i'));
 $(this).nextUntil('tr.expandable_header').slideToggle("slow");
});
function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle fa-minus-circle');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet" />
<table>
 <tr class="expandable_header">
 <td>
 <i class="fa fa-plus-circle"></i>
 </td>
 </tr>
 <tr style="display: none;" height="250px">
 <td> 
 <a href="https://codereview.meta.stackexchange.com/a/1511/120114" target="_blank">😱 Zombies exist! 😱</a>
 </td>
 </tr>
</table>

$('.expandable_header').click(function() {
 toggle_expandable_icon($(this).find('i'));
 $(this).nextUntil('tr.expandable_header').slideToggle(100, function() {}"slow");
});
function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle fa-minus-circle');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet" />
<table>
 <tr class="expandable_header">
 <td>
 <i class="fa fa-plus-circle"></i>
 </td>
 </tr>
 <tr style="display: none;">
 <td> 
 <a href="https://codereview.meta.stackexchange.com/a/1511/120114" target="_blank">😱 Zombies exist! 😱</a>
 </td>
 </tr>
</table>

##Use toggle methods

Presuming that you are just toggling those two classes, you could just use classList.toggle() with those two class names:

function toggle_expandable_icon(elem) {
 elem.classList.toggle('fa-plus-circle');
 elem.classList.toggle('fa-minus-circle');
}

And it appears jQuery is used, so the .toggleClass() method could be used on a jQuery collection (i.e. remove the [0] in toggle_expandable_icon($(this).find('i')[0]);):

function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle').toggleClass('fa-minus-circle');
}

Those class names could also be added together in a single toggleClass() call:

function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle fa-minus-circle');
}

##Demo

$('.expandable_header').click(function() {
 toggle_expandable_icon($(this).find('i'));
 $(this).nextUntil('tr.expandable_header').slideToggle(100, function() {});
});
function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle fa-minus-circle');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet" />
<table>
 <tr class="expandable_header">
 <td>
 <i class="fa fa-plus-circle"></i>
 </td>
 </tr>
</table>

##Use toggle methods

Presuming that you are just toggling those two classes, you could just use classList.toggle() with those two class names:

function toggle_expandable_icon(elem) {
 elem.classList.toggle('fa-plus-circle');
 elem.classList.toggle('fa-minus-circle');
}

And it appears jQuery is used, so the .toggleClass() method could be used on a jQuery collection (i.e. remove the [0] in toggle_expandable_icon($(this).find('i')[0]);):

function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle').toggleClass('fa-minus-circle');
}

Those class names could also be added together in a single toggleClass() call:

function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle fa-minus-circle');
}

##Demo

$('.expandable_header').click(function() {
 toggle_expandable_icon($(this).find('i'));
 $(this).nextUntil('tr.expandable_header').slideToggle("slow");
});
function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle fa-minus-circle');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet" />
<table>
 <tr class="expandable_header">
 <td>
 <i class="fa fa-plus-circle"></i>
 </td>
 </tr>
 <tr style="display: none;">
 <td> 
 <a href="https://codereview.meta.stackexchange.com/a/1511/120114" target="_blank">😱 Zombies exist! 😱</a>
 </td>
 </tr>
</table>

$('.expandable_header').click(function() {
 toggle_expandable_icon($(this).find('i'));
 $(this).nextUntil('tr.expandable_header').slideToggle(100, function() {});
});
function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle fa-minus-circle');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet" />
<table>
 <tr class="expandable_header">
 <td>
 <i class="fa fa-plus-circle"></i>
 </td>
 </tr>
</table>

Presuming that you are just toggling those two classes, you could just use classList.toggle() with those two class names:

function toggle_expandable_icon(elem) {
 elem.classList.toggle('fa-plus-circle');
 elem.classList.toggle('fa-minus-circle');
}

And it appears jQuery is used, so the .toggleClass() method could be used on a jQuery collection (i.e. remove the [0] in toggle_expandable_icon($(this).find('i')[0]);):

function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle').toggleClass('fa-minus-circle');
}

##Use toggle methods

Presuming that you are just toggling those two classes, you could just use classList.toggle() with those two class names:

function toggle_expandable_icon(elem) {
 elem.classList.toggle('fa-plus-circle');
 elem.classList.toggle('fa-minus-circle');
}

And it appears jQuery is used, so the .toggleClass() method could be used on a jQuery collection (i.e. remove the [0] in toggle_expandable_icon($(this).find('i')[0]);):

function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle').toggleClass('fa-minus-circle');
}

Those class names could also be added together in a single toggleClass() call:

function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle fa-minus-circle');
}

##Demo

$('.expandable_header').click(function() {
 toggle_expandable_icon($(this).find('i'));
 $(this).nextUntil('tr.expandable_header').slideToggle(100, function() {});
});
function toggle_expandable_icon(collection) {
 collection.toggleClass('fa-plus-circle fa-minus-circle');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet" />
<table>
 <tr class="expandable_header">
 <td>
 <i class="fa fa-plus-circle"></i>
 </td>
 </tr>
</table>