I am currently working on a basic modal that will open and display content. Unfortunately, I cannot add images to help illustrate the design, so I'll do my best to describe it in detail.
The modal is linked to an image slider where the heading changes based on the displayed image. Clicking on the current image should trigger the modal to open.
Within the modal interface, there is a list on the left-hand side containing all the headings from the image slider. This allows users to easily switch between different contents within the modal.
My goal now is to ensure that when a user clicks on an image in the slideshow, the corresponding content opens in the modal, rather than just displaying the first item in the list of modal contents. (The modal content is stored in a collection)
I understand that this explanation might be confusing, and I would have included screenshots if possible to make it clearer.
Here lies my issue:
const displayContent = () => {
headingString = currentHeading.textContent.toUpperCase();
modalContentsCollection = modals[index].childNodes[1].children;
choices = modalContentsCollection[0].querySelectorAll('li a');
let compareArray = [];
choices.forEach(element => {
compareArray.push(element.textContent.toUpperCase().trim());
});
let b = false;
console.log(compareArray);
console.log(headingString);
let c = 0
while (!b && c < compareArray.length) {
console.log(compareArray[c]);
console.log(c);
if (headingString == compareArray[c]) {
console.log(modalContentsCollection[c]);
console.log(c);
modalContentsCollection[c].classList.toggle('show-toggle');
console.log(modalContentsCollection[c]);
b = true;
c++;
}
modalContentsCollection[0].classList.toggle('show-toggle');
};
In an attempt to solve this problem, I created a function that compares the current heading with an array to determine the index of the modal content that needs to be displayed. However, I'm encountering issues with
modalContentsCollection[c].classList.toggle('show-toggle');modalContentsCollection[0].classList.toggle('show-toggle');You can view some screenshots here: https://i.sstatic.net/ub48f.jpg Whenever "the image while Das Haus" is clicked, the modal should display the content related to "Das Haus". Similarly, clicking on "Wintersport" should show the content for that category, and so on.