Hide and Show TextBox using toggleClass jQuery on Button click

Last Reply one year ago By pandeyism

Posted one year ago

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

Posted one year ago Modified on one year ago

Hey kavithav,

Please refer below sample.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript">
    $(function () {
        $("#btnshow").click(function () {
            $(this).find("i").toggle();
            var attr = $(this).find("i");
            for (var i = 0; i < attr.length; i++) {
                if (attr.eq(i).css('display') == 'none') {
                    $("#txtName").hide();
                }
                else {
                    $("#txtName").show();
                }
            }
        });
    });
</script>
<button type="button" id="btnshow">
    <span class="f18"><i class="fa fa-angle-double-down" aria-hidden="true"></i><i style="display: none;"
        class="fa fa-angle-double-up" aria-hidden="true"></i></span>Filter
</button>
<input type="text" id="txtName" style="display: none;" />

Demo