Implementing FAQs on ASP.NET MVC is my latest project

I have stored all the questions and answers in a SQL Server table, and it is fetching them perfectly. The FAQ user interface displays all the questions correctly from the table. You can see the interface in action by clicking on the following links: Question Interface Answer Interface However, there seems to be an issue when I try to click on the second question. Instead of showing its answer, it toggles back to the first question's answer.

Below is the code for the design page:

<section class="faq-section">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3">

                <div class="faq-title text-center pb-3">
                    <h2>FAQ</h2>
                </div>
            </div>
            
            <Put your own custom code here>

        </div>
    </div>
</section>

And below is the view source page code snippet:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FaqList - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        
        <Customize this section as needed>
    
        

    <link href="/Content/FAQstylesheet.css" rel="stylesheet" type="text/css" />

<h2>FaqList</h2>

<Insert relevant content here>

    <script src="/Scripts/jquery-3.4.1.js"></script>

    <script src="/Scripts/bootstrap.js"></script>

    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
    
</body>
</html>

Answer №1

It is important to dynamically generate data-target="#faqCollapse-1" and id="faqCollapse-1".

Rewrite your code by setting data-target="#faqCollapse-"[email protected] and id="faqCollapse-"[email protected]

The Item.Id field must be a unique identifier for each item.

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

The OnSelectedIndexChange event seems to be failing to trigger

I've been struggling to get an event to execute properly. Adding AutoPostBack = "true" didn't fix the issue, and trying the same event on a different DropDownList was unsuccessful. <div class="col-sm-3" style="float: left"> ...

Ways to maintain hover functionality when the submenu is visible

My website features a simple table that displays devices and their characteristics. A condensed version of the table can be found in the link below. import "./styles.css"; import { SubMenu } from "./SubMenu"; const subMenuSlice = <S ...

Masking of the Navigation Button

I designed a responsive navigation bar, but in mobile view, the menu icon is being hidden by the menu headings when displayed. Check out the scenario below with a provided CodePen link. I attempted to adjust padding and float properties without success. An ...

Issue with arranging cards in a grid when utilizing v-for alongside bootstrap

Just starting out with vuejs and attempting to create a grid by looping through objects using bootstrap classes. However, I'm running into an issue where the cards are not forming a grid as expected when utilizing the col classes. Below is the code f ...

Utilizing a Linking Table in ASP .NET Using the Code First Methodology

I have been working on establishing a junction table between Identity User and a Game table called UserGame. This particular table includes two foreign keys (UserID, GameID) along with an additional field dedicated to storing the score. public class UserG ...

Identifying the Nearest Div Id to the Clicked Element

When a link is clicked, I am trying to locate the nearest div element that has an id. In this specific scenario, the target divs would be either #Inputs or #Stages. For example, if Page1 through 4 is clicked, I want to store the id #Inputs in a variable. ...

Is there a way to compel the browser or JavaScript to delete/disregard a cached file?

I've encountered an issue with my Javascript program that extracts data from a text file and displays it in a table. The problem arises when I update the text file - the changes don't reflect on the table because the browser is caching the file. ...

Passing a value from an HTML template to a method within an Angular 4 component

Encountering an issue with Angular 4. HTML template markup includes a button: <td><a class="btn btn-danger" (click)="delete()"><i class="fa fa-trash"></i></a></td> Data is assigned to each td from a *ngFor, like {{ da ...

Displaying recursively retrieved data from an AJAX call on an HTML page using AngularJS

I am currently working on a recursive AJAX call where I receive server data in chunks. My goal is to display each chunk of data one below another on the front end. How can I achieve this without replacing previously received data with new data? I hope this ...

I'm facing an issue with my LAMP stack where the image appears when I access it through a URL, but doesn't seem to load when I try to load it using jQuery

My PHP file is located at path/renderer/renderImage.php and it generates a PNG image that displays correctly in the browser when I visit the URL directly. However, when I try to load this image into a DIV using jQuery from path/index.html with the followin ...

JavaScript/HTML5/jQuery Drag-And-Drop Upload - "Error: Unable to access the 'files' property"

Just a heads up, my JavaScript skills are pretty limited. Here is the current JavaScript code I have: $('#xhr-filebox').bind({ "dragover": HandleDragEvent, "dragleave": HandleDragEvent, "drop": HandleDropEvent }); function HandleDr ...

Image not displaying on rn-carousel

I am currently using an rn-carousel for image sliding but I am encountering an issue where the images are not displaying on the screen after building the app on a device. Can anyone provide some suggestions on what I should do to rectify this issue? Your h ...

Creating a dynamic table in AngularJS that can add rows and columns with cyclic values

Seeking assistance for a programming challenge. I have created a form with 2 input fields for specifying the dimensions of a table (number of rows and columns), along with a button. When this button is clicked, the table should be dynamically populated wit ...

Switching between displaying or hiding one of two backgrounds within a div using CSS and jQuery

Seeking guidance on implementing a two-background div setup where A is constantly displayed within the element and toggling B based on button control click. HTML <div class="container"></div> CSS .container{ url(B.png) 10px 10px no-repeat ...

Resize the Bootstrap select element based on its contents

My HTML code includes a <select> element that is styled using Bootstrap 5. <div class="col-md-12"> <div class="mb-3"> <label asp-for="Schedule.Minutes" class="control-label"></l ...

Creating glitchy dotted lines in an HTML Canvas with the help of translate and scale techniques

I'm working on creating a canvas where users can draw symmetrical lines with their mouse. However, when I use the transform and scale attributes in the draw function to achieve this effect, it creates small gaps in the line and makes it look less smoo ...

Switch the position of the checkbox label to the left in a customized Bootstrap checkbox

I am struggling with adjusting the label position for my checkbox. Here is my code: <div class="custom-control custom-checkbox custom-control-inline"> <input type="checkbox" id="location" v-model="checkedLocations" value="location" name="c ...

Move the cursor within the text area upon clicking the button

When the "+header" button is clicked, I am looking to automatically position the insertion point inside the text area. Currently, after pressing the button, the text box displays information like address, date, time etc. but the cursor does not start insid ...

Guide on uploading a file from a browser dialog using RSelenium

Here is a script that I have for posting a form using the following URL: https://cluspro.bu.edu/home.php This code, thanks to DPH, accomplishes the task: library(RSelenium) # Instructions can be found here # https://rpubs.com/grahamplace/rseleniumonm ...

Adding custom HTML platform views in the latest version of Flutter for web development is a breeze

I need assistance adding a custom video with an HTML platform view to my Flutter web project using the 1.9 tech preview. I am having trouble locating the previous functions that allowed me to do this in the old flutter_web. I am looking for something simi ...