Within the mobile view, a button with accompanying description will be discreetly concealed

Working on an ASP.NET Core MVC project, with a FAQ section in the view displayed as follows:

<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>

On wide screens, the FAQ is displayed correctly, but on mobile view, the question's description is hidden.

https://i.sstatic.net/r4FHK.png

If you have any advice on how to handle this issue, please share!

Answer №1

Feel free to check out this code 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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd95989c9994939aa98a929ca2bd94899890cfd3b499">[email protected]</a>">
                            <h5 class="mb-0">
                                <button class="btn btn-link collapsed " data-toggle="collapse"
                                        data-target="#<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfef2f1f1fcedeef8c2ddf4e9f8f0afb3d4f9">[email protected]</a>" aria-expanded="true"
                                      
                                        aria-controls="@item2.Id">
                                    <span class="expandable-heading">  @Html.DisplayFor(modelItem => item2.Description)</span>
                          
                                </button>
                            </h5>
                        </div>
                        <div id="<a href="/cdn-cgi/l/email-prote...<p><strong>Please remember that the ID must always begin with a letter</strong>.</p> <p><a href="https:></a></p>
   </div></answer1>
<exanswer1><div class="answer accepted" i="65784681" l="4.0" c="1611012187" m="1611107794" v="1" a="S2FybmV5Lg==" ai="14491467">
<p>Why not give this code snippet a shot?</p>
<pre><code><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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd95989c9994939aa98a929ca2bd94899890cfd3b499">[email protected]</a>">
                            <h5 class="mb-0">
                                <button class="btn btn-link collapsed " data-toggle="collapse"
                                        data-target="#<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfef2f1f1fcedeef8c2ddf4e9f8f0afb3d4f9">[email protected]</a>" aria-expanded="true"
                                        aria-controls="@item2.Id">
                                    <span class="expandable-heading">  @Html.DisplayFor(modelItem => item2.Description)</span>
                                </button>
                            </h5>
                        </div>
                        <div id="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3655595a5a5746455369765f42535b04187f52">[email protected]</a>" class="collapse" aria-labelledby="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81e9e4e0e5e8efe6d5f6eee0dec1e8f5e4ecb3afc8e5">[email protected]</a>"
                             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: The ID should start with a letter.

https://i.sstatic.net/bzjdK.gif

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason this switch statement functions only with one case?

Why is the switch statement not functioning properly? It seems to correctly identify the values and match them with the appropriate case, but it only works when there is a single case remaining. If there are multiple cases to choose from, nothing happens. ...

The Eclipse IDE is experiencing issues with the functionality of the JavaScript Number class

In my latest project, I decided to create a Dynamic Web Project using the Eclipse IDE 2019-12 along with Apache Tomcat 8.5.55 server. The main functionality of this project is that a user can input integers and receive their sum as an output. To ensure dat ...

What is the best way to ensure jQuery loads before CSS code on a website

I am currently working on a blog project that allows visitors to customize the background color by simply clicking on one of five available buttons. $(function(){ //Checking if a color scheme has already been selected var chosenColor = ...

What was the reason for Vue's decision to deprecate the ""is" attribute for HTML elements?

Vue's eslint rules mention that the is attribute on HTML elements is deprecated (since 3), and should be used on components instead: <template> <!-- ✓ GOOD --> <div /> <component is="foo"> <!-- ✗ BAD --&g ...

Is it possible to insert additional lines into the default HTML file using VS Code?

Is it possible to customize the HTML template generated automatically by VS Code? For example, when I type html:5 + TAB, I would like the resulting HTML file to include predefined "style" and "script" tags along with some common code snippets that I regu ...

Experiencing issues with a malfunctioning Chrome extension? The CaptureVisibleTab feature seems to be failing when using

Whenever I try to use the captureVisibleTab function on a page where I have a div with preserve3d in CSS3, all I see is a blank page. How can I solve this issue? Here is my simple code for capturing the browser screen: chrome.browserAction.onClicked.addL ...

Scrubbing the htaccess file for custom redirect rules in cPanel

I am looking to optimize my .htaccess file for the following purposes: Removing the .html extension Redirecting non-www URLs to www Forcing HTTP to HTTPS Changing .com/index.html to .com/ Implementing all redirects through cPanel's 'Redirects&a ...

Finding an element's id within a click event inside an iframe

<iframe id="myiframe" src="doc.html"> <button id="btn1"></button><!-- how do I retrieve this id? --> </iframe> $('#myiframe').on('click', function () { alert(this.id); }); I am trying to make it ...

JavaScript: utilizing 'this' and onClick events

Recently, I created a basic slideshow with 4 images where upon clicking, the selected image displays in a larger div box. The functionality is quite straightforward, but if you have any queries, feel free to ask. As of now, with only 4 images in the slides ...

What is the best way to modify a Bootstrap class' SASS attribute within a React component?

Just to clarify, I am utilizing react-bootstrap and attempting to incorporate bootstrap. Here is the code I have: import React from 'react' // bootstrap import { Button } from 'react-bootstrap'; const MainDisplay = () => { return ...

Styling in Next.js with conditions

I am attempting to create a scenario where a link becomes active if the pathname matches its href value. function Component() { const pathname = usePathname(); return ( <div className="links"> <Link href="/"> ...

Using Ajax to dynamically load page content into a div based on a selection made in a

How can I dynamically load content into a div using Ajax based on the selection made in a dropdown menu? For example, I have a select box with two options: test.HTML and test1.HTML. Below that, there is a div where I want to display the content from eithe ...

What is the most efficient method for creating and adding an element in jQuery?

When it comes to appending div elements to a page, there are different approaches that can be taken. Let's explore two methods: $('#page123').append("<div id='foo' class='checkbox' data-quesid='foofaa'>&l ...

Angular not firing slide.bs.carousel or slid.bs.carousel event for Bootstrap carousel

I've searched high and low with no success. I'm attempting to detect when the carousel transitions to a new slide, whether it's automatically or by user click. Despite my numerous attempts, I have been unable to make this event trigger. I ha ...

Tips for accessing the HTML content enclosed within a specific HTML tag using Python with Selenium

I am trying to extract the source code of an HTML document that is embedded within an <iframe> tag generated by JavaScript. The HTML contents within this <iframe> tag appears as #document, which expands to reveal a full HTML document starting w ...

Can you explain why this unexpected bootstrap positioning is happening?

On my website, I have two large buttons (btn-lg) - one is placed at the top of the page with a hidden form beneath it (initially set to display: none), and the other button is below that with another hidden form. When clicked, the buttons reveal their resp ...

The HTML/CSS authentication system is experiencing technical difficulties and is not functioning as intended

I came across this code on codepen.io and tried to implement it using the provided HTML and CSS. However, I encountered some errors during implementation. While the code works perfectly in the CodePen compiler, it doesn't seem to be error-free. One i ...

Tips on updating arrow button icon when clicked using jquery

I am currently working on a project where I have a button icon that I want to change upon clicking it. I am using the following jQuery code: <script> $('div[id^="module-tab-"]').click(function(){ $(this).next('.hi').sl ...

Positioning a button at the center-right

I'm currently in the process of creating a coming soon website, which you can find hosted here. However, I am having some trouble aligning the button correctly. My goal is to have it positioned to the right of the text field. How can I achieve this? ...

Positioning an immovable element beneath a fixed element that can vary in height

I am working on a webpage that features a fixed menu at the top-left corner, followed by the main content. My goal is to ensure that the content appears below the menu, but since I do not know the exact height of the menu in advance (as it can vary based o ...