html5 hide and unhide div elements-CodePudding

Consider the following code

@using App.Models
@model App.Models.AllPeopleViewModel

@{
    ViewBag.Title = "Index";
}
<html>
<head>

</head>
<body>
@foreach (Customer person in Model.Content)
{
<div >

    <div >
        <h5 >@Html.DisplayFor(modelItem => person.name)</h5>
        <p >
            @Html.DisplayFor(x => person.houseNameOrNumber), @Html.DisplayFor(x => person.Street),
            @Html.DisplayFor(x => person.Town), @Html.DisplayFor(x => person.PostCode)
        </p>
       <div  id="call_button"></div><a href="tel:713-992-0916" >Call Them</a>
    </div>
    <div >
        Identifier - @Html.DisplayFor(modelItem => person.identifier)
    </div>
</div>

}
</body>
</html>

Specifically the line

<div  id="call_button"></div><a href="tel:713-992-0916" >Call Them</a>

I'm trying to hide this button. I've tried this, I've tried d.none, but neither of them work. Bootstrap cdn is included in my layout page and working, I know this as the cards are displaying correectly, but nothing hides that button! I want to be able to "unhide" it later on via javascript. I also want the hidden element to not effect the rendering of the page, untill I unhide it, if that makes sense!

Thanks you in advance, this one is driving me mental!

CodePudding user response：

The problem is within the markup, currently the markup is:

<div  id="call_button">

</div>
<a href="tel:713-992-0916" >Call Them</a>

Meaning you are hiding an empty <div>. To hide the <a>, it should be inside the .visually-hidden <div>.

Also, the visually-hidden class only makes the element invisible but it still occupies space (can be useful for elements that only should be visible for screen readers). To completely hide it, use the d-none (or display: none;) class instead. Not related to Bootstrap but more information about visibility: hidden; vs display: none;: https://www.geeksforgeeks.org/what-is-the-difference-between-visibilityhidden-and-displaynone/