CODEWITHSUNDEEP
asp.netrazor
codeNinja
codeNinja

Reputation: 1462

ASP Razor have button show/hide a label

I have page where a bunch of rows are being generated. Each Row has a button. On click of that button i want to show a label next to it with some text.

Below code has the label that i want to show. Now i need to update the code so that it only shows when the button is clicked. Please note that each button should only show its associated label.

<div class="row product-item">
<div class="col-sm-2" style="padding-right:0px;"><img src="~/Content/images/@p.image" style="width:100%;" /></div>
<div class="col-sm-10">
    <p style="margin-bottom:2px;">@p.title</p>
    <p style="margin-top:2px;color:#868686;">@p.desc</p>

    <div style="padding:10px 0px 0px 0px;">
        <button style="float:left;margin-right:10px;" class="btn btn-primary">Add to Order</button>
        <p id="successlabel" style="color:#339966; float:left; margin-top:2px; display:none;">✔ Your selection has been added to your order!</p>
    </div>
</div>
<div class="clearfix"></div>

Upvotes: 0

Views: 311

Answers (1)

Bob Dust
Bob Dust

Reputation: 2460

If you're using jquery, this is one of many solutions:

    $(function () {
        $('button.btn-primary').filter(function () {
            return $(this).text() == 'Add to Order';
        }).click(function (e) {
            $(this).next().show();
        });
    });

Upvotes: 1

Related Questions