So I am trying to change the the icon of my link for collapse section alongside with the text of the link.
Here is my code:
<a href="#collapse", class="btn", role="button", data-bs-toggle="collapse" id="btn-collapse">
<i class="material-icons" style="vertical-align: middle;">expand_more</i>
<label style="vertical-align: middle;">PRIMARY TEXT</label>
</a>
<!--CONTENT-->
<script>
$(document).ready(function(){
$('#btn-collapse').on('click', function () {
var text=$('#btn-collapse').text();
if(text === "SECONDARY TEXT"){
$(this).text('PRIMARY TEXT');
$(this).find("i").html("expand_more");
} else{
$(this).text('SECONDARY TEXT');
$(this).find("i").html("expand_less");
}
});
});
</script>
I've been trying to find a solution for this for a while now, but nothing seems to work.. Text changes fine, but the icon completely vanishes on click. I don't think it is a major issue, but there is something I don't get with this. Any help here how to adjust?
$(document).ready(function() {
$('#btn-collapse').on('click', function() {
var thisElement = $(this);
var anchorLabelElement = thisElement.find('label');
if (anchorLabelElement.text() === "SECONDARY TEXT") {
anchorLabelElement.text('PRIMARY TEXT');
thisElement.find("i").text('expand_more');
} else {
anchorLabelElement.text('SECONDARY TEXT');
thisElement.find("i").text("expand_less");
}
});
});<link href="https://cdn.jsdelivr.net/npm/material-design-icons-iconfont@6.7.0/dist/material-design-icons.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#collapse" , class="btn" , role="button" , data-bs-toggle="collapse" id="btn-collapse">
<i class="material-icons" style="vertical-align: middle;">expand_more</i>
<label style="vertical-align: middle;">PRIMARY TEXT</label>
</a>