I have collapse control that changing icon using javascript. How to populate script on all items in model?

 <table>
    <tbody>
        @foreach(var item in Model)
        {
            <tr>
                <td>
                    <div class="test1">
                        <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#demo">
                            <span class="glyphicon glyphicon-plus-sign"></span>
                        </button>
                        @item.Name
                        <div id="demo" class="collapse">
                           Lorem
                        </div>
                    </div>
                </td>
            </tr>
        }
    </tbody>
</table>

JavaScript

$(document).ready(function () {
    $("#demo").on("hide.bs.collapse", function () {
        $(".btn").html('<span class="glyphicon glyphicon-plus-sign"></span>');
    });
    $("#demo").on("show.bs.collapse", function () {
        $(".btn").html('<span class="glyphicon glyphicon-minus-sign"></span>');
    });
});

Related posts

Recent Viewed