Project Overview
I'm currently working on a cinema demo website, where I have implemented four movie poster panels displaying the poster image, title, and screening times. These panels are meant to be clickable.
My goal is to have an interactive feature where clicking on any panel will update the content below with text and a trailer video specific to the selected movie. The other three areas should remain hidden when one panel is clicked.
Although I have successfully designed the panels and container area, I am struggling to implement the functionality that replaces the content upon clicking.
Progress So Far/Code Implementation
I have researched similar queries like this one, but none of them fully address my current issue.
Your assistance in solving this dilemma would be greatly appreciated!
Below is the code for the movie panels:
/* Panels */
.panel {
border: 1px solid #333;
border-radius: 15px;
width: 70%;
margin: 0 auto;
margin-bottom: 2rem;
}
.panel h3 {
font-size: 1.2rem;
}
/* Additional CSS styling goes here... */
I have explored further options and found this example which aligns closely with what I am trying to achieve. I attempted to integrate it into my code, but it did not produce the desired outcome.
Script.js file:
$("#movie-one").click(function() {
let synopsis = $(this).attr(".synopsis");
$("div").html(synopsis);
});