Currently, I am utilizing Bootstrap 3 along with Jquery. Within my coding structure, there is a button that holds an icon within a span tag (specifically using the glyphicon provided by Bootstrap).
<button id="swapArchived" class="btn btn-default btn-sm showArchived">
<span class="glyphicon glyphicon-road"></span> Show Archived
</button>
The objective is to modify both the icon and text content upon clicking. Are there more efficient methods of achieving this without resorting to repetitive code?
$('#swapArchived').on('click', function () {
var $el = $(this);
if($el.hasClass('showArchived'))
{
$el.html('<span class="glyphicon glyphicon-fire"></span> Show Incomplete');
}
else
{
$el.html('<span class="glyphicon glyphicon-road"></span> Show Archived');
}
$el.toggleClass('showArchived');
});
I am exploring possibilities where the button text and span class can be toggled simultaneously, ideally avoiding excessive manual typing with each click interaction.
Your insights are greatly appreciated -