I have a button where on clicking the button i will show and hide the textboxes first when page loads the button should be displayed with down arrow which was happening but again if i click i need to get up arrow by showing the fields and again if i click button i should get down arrow by hiding the field functionality is working but arrows are not coming how can i do this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$("#btnshow").click(function () {
$(this).toggleClass("buttonFter");
if ($(this).hasClass("buttonFter")) {
$('#trmandatoryfieldnames').show();
$('#trmandatoryfieldelements').show();
} else {
$('#trmandatoryfieldnames').hide();
$('#trmandatoryfieldelements').hide();
}
});
</script>
<style type="text/css">
.buttonFter
{
background-color: #fff;
border: 1px solid #1E78AB;
color: #1E78AB;
padding: 8px 0px;
width: 200px;
text-align: center;
font-size: 14px;
margin: 0px 1px;
font-weight: bold;
width: 200px;
border-radius: 5px;
}
</style>
<button type="button" id="btnshow" class="buttonFilter primaryColor">
<span class="f18"><i class="fa fa-angle-double-down" aria-hidden="true"></i></span>
Filter</button>
I have a button where on clicking the button i will show and hide the textboxes first when page loads the button should be displayed with down arrow which was happening but again if i click i need to get up arrow by showing the fields and again if i click button i should get down arrow by hiding the field functionality is working but arrows are not coming how can i do this
