A button which contain a description will be hidden inside mobile view - html

Question

I am working on an asp.net core MVC >> inside y view i am showing a FAQ section. as follow:-
<div class="container">
<div class="row ">
<div class="col-xl-2 mx-auto d-none d-sm-block">
<div class="service_details_left">
<div class="nav nav-pills" id="v-pills-tab" role="tablist"
aria-orientation="vertical">
</div>
</div>
</div>
<div class="accordion_area col-xl-8">
<div class="faq_ask">
<h3 class="large-heading-3">Frequently Asked Questions</h3>
<div id="accordion">
#foreach (var item2 in Model.OrderBy(a => a.Order))
{
<div class="card">
<div class="card-header" id="#item2.Id+'headingTwoa'">
<h5 class="mb-0">
<button class="btn btn-link collapsed " data-toggle="collapse"
data-target="##item2.Id" aria-expanded="false"
aria-controls="collapseTwo">
<span class="expandable-heading"> #Html.DisplayFor(modelItem => item2.Description)</span>
</button>
</h5>
</div>
<div id="#item2.Id" class="collapse" aria-labelledby="headingTwoa"
data-parent="#accordion" style="">
<div class="card-body">
#Html.Raw(item2.Answer)
</div>
</div>
</div>
}
</div>
</div>
</div>
<div class="col-xl-2">
</div>
</div>
</div>
but on wide screen the FAQ will be shown correctly, as follow:-
while on mobile view the question's description will be hidden as follow!!
any advice on this please?

Answer 1

You can try this snippet.
<div class="container">
<div class="row ">
<div class="col-xl-2 mx-auto d-none d-sm-block">
<div class="service_details_left">
<div class="nav nav-pills" id="v-pills-tab" role="tablist"
aria-orientation="vertical">
</div>
</div>
</div>
<div class="accordion_area col-xl-8">
<div class="faq_ask">
<h3 class="large-heading-3">Frequently Asked Questions</h3>
<div id="accordion">
<div class="accordion" id="accordion">
#foreach (var item2 in Model.OrderBy(a => a.Order))
{
<!-- here -->
<div class="card">
<div class="card-header" id="headingTwoa_#item2.Id">
<h5 class="mb-0">
<button class="btn btn-link collapsed " data-toggle="collapse"
data-target="#collapse_#item2.Id" aria-expanded="true"
aria-controls="#item2.Id">
<span class="expandable-heading"> #Html.DisplayFor(modelItem => item2.Description)</span>
</button>
</h5>
</div>
<div id="collapse_#item2.Id" class="collapse" aria-labelledby="headingTwoa_#item2.Id"
data-parent="#accordion" >
<div class="card-body">
#Html.Raw(item2.Answer)
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
<div class="col-xl-2">
</div>
</div>
</div>
Note: id needs to start with a letter.