Here is a snippet of code to consider:
@using App.Models
@model App.Models.AllPeopleViewModel
@{
ViewBag.Title = "Index";
}
<html>
<head>
</head>
<body>
@foreach (Customer person in Model.Content)
{
<div class="card border-primary text-center">
<div class="card-body">
<h5 class="card-title">@Html.DisplayFor(modelItem => person.name)</h5>
<p class="card-text">
@Html.DisplayFor(x => person.houseNameOrNumber), @Html.DisplayFor(x => person.Street),
@Html.DisplayFor(x => person.Town), @Html.DisplayFor(x => person.PostCode)
</p>
<div class="visually-hidden" id="call_button"></div><a href="tel:713-992-0916" class="btn btn-primary">Call Them</a>
</div>
<div class="card-footer text-muted">
Identifier - @Html.DisplayFor(modelItem => person.identifier)
</div>
</div>
}
</body>
</html>
The line needing attention is:
<div class="visually-hidden" id="call_button"></div><a href="tel:713-992-0916" class="btn btn-primary">Call Them</a>
I am attempting to hide this button without success. Both `d.none` and other methods have not worked. The Bootstrap CDN is correctly integrated into my layout page, as evidenced by the cards displaying properly. However, I can't seem to hide that button! My goal is to be able to reveal it later using JavaScript. The hidden element should not impact page rendering until unhidden.
Any help on this matter would be greatly appreciated. It's becoming quite frustrating!