Using Bootstrap Collapse with EJS Iteration

I am having trouble with this specific section of my ejs file where the collapse feature is not functioning correctly. Can someone please assist me?

<% for(var i=0;i<data.length;i++){%>
<div id="content">
<p><%=data[i].webTitle%></p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="collapseOne"+<%i%> aria-expanded="false">
    Button with data-target
</button>
<div class="collapse" id="collapseOne"+<%i%> >
    <div class="card card-body">
        <p><%=data[i].fields.bodyText%></p>
    </div>
</div>
<% } %>

Answer №1

There are several issues that need to be addressed:

  1. In order to combine the index with your id in ejs, make sure to use <%= variable => (correct in two locations), for example:

     "combineIndex<%= i %>"
    
  2. If you intend to collapse an item by its ID, utilize "#idToCollapse" (fix in one location), like this:

     "#selectorNumber<%=variable %>"
    

After making these adjustments, everything should function properly. Remember to include bootstrap and jQuery in your project.

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 process for setting the version in a serverless project?

Recently I downgraded the serverless to version 1.38.0 using the command npm install -g <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="047761767261766861777744352a373c2a34">[email protected]</a>. This triggered in ...

Is there a way to create an X shape by rotating two divs when I click on the container div?

I currently have this setup: code Below is the HTML code: <div id="box"> <div id="line1" class="line"></div> <div id="line2" class="line"></div> <div id="line3" class="line"></div> </div> My go ...

Is it possible for jQuery to analyze HTML contained within a variable?

Currently, I am utilizing PHP along with an ajax command to retrieve the complete HTML content from an external webpage using the file_get_contents() function in PHP. After storing this HTML in a JavaScript variable, I am curious if it is possible to uti ...

Exploring the world of XD plugins, utilizing npm packages and Node.js APIs

Is it feasible to integrate npm packages and Node.js APIs into my Adobe XD plugin development process? ...

Error: Unable to assign value to property 'className' of undefined object

On my http://localhost:3000/renewal page, the code looks like this: import Link from 'next/link' export default function Renewal() { return ( <header> <Link href="/"> <a> Go to home page ...

Error in Prisma: Unable to retrieve data due to undefined properties (attempting to access 'findMany')

Recently, I've been working on a dashboard app using Prisma, Next.js, and supabase. Encountering an issue with the EventChart model in schema.prisma, I decided to create a new model called EventAreaChart. However, after migrating and attempting to ex ...

The $http service encounters an error while attempting to retrieve a JSON file from the server

When attempting to fetch a file from the server, I utilize the $http service in the following manner: $http({url: url, method: "GET", withCredentials: true}); For some mysterious reason, an exception is only thrown when trying to retrieve JSON files from ...

A Guide to Importing CSV Data Into a Datatable

Is there a way to efficiently import data from a CSV file and display it in a table using the datatables plugin? Currently, I have a fixed table structure: <table id="myTable" class="table table-striped" > <thead> ...

What is the best way to add a -webkit-transform to a div without affecting its enclosed elements?

Is there a way to apply a webkit transformation to a div without affecting the text inside? I need help with achieving this. Below is my current code: .main_div { width:200px; height:100px; background:red; margin-left:55p ...

Displaying a list in KoGrid is a feature that allows for easy

Utilizing KoGrid to bind data from a DataArray has been successful for displaying flat data. However, when dealing with an object member that is an array, the grid fails to display all the array members as a list. This issue arises because KoGrid struggles ...

Unable to click on element in Firefox browser

Encountering an issue with the following error message: Element is not clickable at point (791, 394). Other element would receive the click: Command duration or timeout: 66 milliseconds Any ideas on what's causing this? Using selenium web driver ve ...

Lustrous Layout

I am developing a mobile app using titanium where I have a scroll view containing objects that occupy 25% of the screen width. I am attempting to create a 'table' layout with these objects, having 4 columns and multiple rows. Is there a way for t ...

Place an element into an alternate container from a dynamically created list using PHP, jQuery, and AJAX

My knowledge of AJAX and jQuery is limited, so I apologize if this issue seems simple. I am using a PHP foreach loop to generate a list of ingredients pulled from a database: <div class="pure-u-1 pure-u-md-2-5 pure-u-lg-2-5 content-left"> ...

Is there a discrepancy in performance when running a function on an individual element versus a group of elements within jQuery?

Imagine having the choice between applying a function to an individual DOM element or a list of them: For Individual Elements: $('#element1').click(function () { $(this).hide(); return false; }); $('#element2').click(functi ...

To avoid rapid clicking on the next button and interfering with the slider's calculations, I implement measures to control the speed

Everything works perfectly when I click normally on the next icon. However, when I start clicking rapidly on the next icon, the calculation does not behave as it normally does. [jsfiddle] https://jsfiddle.net/karanbhilware/0wfa2zcs/1/ ...

What is the best way to identify key presses using Javascript?

Exploring various resources online, I have come across multiple recommendations (such as using window.onkeypress or jQuery) but each option comes with its own set of criticisms. How can the detection of a keypress be achieved in Javascript? ...

Steps for preventing form submission when the username is unavailable

After checking the availability of the user name, I encountered an issue where the form still gets submitted even if the username is not available. Updated Code: <SCRIPT type="text/javascript"> $(document).ready(function(){ $("#emailch").change(fu ...

``ScrollTop does not function properly in Safari when trying to reach the scroll

When implementing divRef.current.scrollTop = divRef.current.scrollHeight in my React project, I encountered an issue where it properly scrolled to the end in Chrome but not in Safari. divRef.current.scrollTop = divRef.current.scrollHeight ...

A backend glitch is exposed by NextJS in the web application

Currently, I am utilizing Strapi for my backend and have created a small script to handle authorization for specific parts of the API. Additionally, I made a slight modification to the controller. 'use strict'; const { sanitizeEntity } = require( ...

What are some techniques I can use to ensure my image grid is responsive in html/css?

If you want to check out the website, you can visit . The main goal is to create an image grid for a portfolio. It appears really nice on a 1080p screen, but anything below that seems messy and unorganized. Any assistance or suggestions on how to improve ...