1

What I Want to Do

I'm making a cinema demo website, and I have four movie poster panels that show the poster, title, and screening times that are supposed to be clickable.

When someone clicks on any one of the panels, my intention is that an area filled with text and a trailer video underneath the panels updates/replaces its content depending on which panel is clicked. The three other areas are supposed to be hidden.

I have already made the panels and container area but I haven't figured out how to make the content get replaced.

What I've Tried / Code

I've found similar questions like this one, but none of the ones I have found fully answer my problem.

Thank you for your help!

Here is my code for the panels:

/* Panels */
.panel {
  border: 1px solid #333;
  border-radius: 15px;
  width: 70%;
  margin: 0 auto;
  margin-bottom: 2rem;
}

.panel h3 {
  font-size: 1.2rem;
}

.panel h3,
p {
  padding-top: 0.5rem;
  padding-left: 1rem;
  padding-bottom: 0.5rem;
}

.poster {
  display: block;
  border-radius: 15px;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
}

.title {
  color: gold;
}

.schedule {
  font-family: "Libre Baskerville";
  font-size: 0.8rem;
}

.schedule p {
  color: white;
}

/* Synopsis Area */
.synopsis {
  border: 1px solid #333;
  border-radius: 15px;
  height: 90%;
  width: 80%;
  margin: 0 auto;
  padding: 1rem;
  display: none;
}

.movie-title {
  color: gold;
  font-size: 1.2rem;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-bottom: 0;
}

.movie-desc {
  font-family: "Libre Baskerville";
  width: 80%;
  padding: 1rem;
}

.screening-buttons p {
  margin-bottom: 0.5rem;
}

.screening-buttons a {
  font-size: 0.8rem;
  background-color: #333;
  border-radius: 5px;
  padding: 0.6rem;
  margin-right: 0.7rem;
}

.screening-buttons a:hover {
  color: black;
  background-color: #bfbfbf;
  transition: 0.6s;
}
<div class="panel-group">
  <div class="panel">
    <a href="#movie-one">
      <div class="left">
        <img src="../../media/poster.jpg" height=355 width=240 class="poster">
      </div>
      <h3 class="title">Movie Title (PG)</h3>
      <div class="schedule">
        <p>Monday - 12PM</p>
        <p>Tuesday - 12PM</p>
        <p>Wednesday - 6PM</p>
        <p>Thursday - 6PM</p>
        <p>Friday - 6PM</p>
        <p>Saturday - 12PM</p>
        <p>Sunday - 12PM</p>
      </div>
    </a>
  </div>

  <div class="panel">
    <a href="#movie-two">
      <div class="left">
        <img src="../../media/poster.jpg" height=355 width=240 class="poster">
      </div>
      <h3 class="title">Movie Title (PG)</h3>
      <div class="schedule">
        <p>Wednesday - 9PM</p>
        <p>Thursday - 9PM</p>
        <p>Friday - 9PM</p>
        <p>Saturday - 6PM</p>
        <p>Sunday - 6PM</p>
      </div>
    </a>
  </div>
  </div>

  <div class="panel-group">
  <div class="panel">
      <a href="#movie-three">
      <div class="left">
        <img src="../../media/poster.jpg" height=355 width=240 class="poster">
      </div>
      <h3 class="title">Movie Title (PG)</h3>
      <div class="schedule">
        <p>Monday - 6PM</p>
        <p>Tuesday - 6PM</p>
        <p>Saturday - 3PM</p>
        <p>Sunday - 3PM</p>
      </div>
      </a>
  </div>

  <div class="panel">
    <a href="#movie-four">
      <div class="left">
        <img src="../../media/poster.jpg" height=355 width=240 class="poster">
      </div>
      <h3 class="title">Movie Title (PG)</h3>
      <div class="schedule">
        <p>Wednesday - 12PM</p>
        <p>Thursday - 12PM</p>
        <p>Friday - 12PM</p>
        <p>Saturday - 9PM</p>
        <p>Sunday - 9PM</p>
      </div>
    </a>
  </div>
  </div>
  <br>

  <!-- Synopsis Area -->
  <div class="synopsis">
  <div id="#movie-one">
    <h3 class="movie-title">Movie Title (PG)</h3>
    <div class="trailer">
      <p class="movie-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <iframe width="560" height="315" src="https://www.youtube.com"></iframe>
    </div>
    <div class="screening-buttons">
      <a href="#">Monday - 12PM</a>
      <a href="#">Tuesday - 12PM</a>
      <a href="#">Wednesday - 6PM</a>
      <a href="#">Thursday - 6PM</a>
      <a href="#">Friday - 6PM</a>
      <a href="#">Saturday - 12PM</a>
      <a href="#">Sunday - 12PM</a>
    </div>
    <br>
  </div>
  </div>
  <br>
  <div class="synopsis">
  <div id="#movie-two">
    <h3 class="movie-title">Movie Title (PG)</h3>
    <div class="trailer">
      <p class="movie-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <iframe width="560" height="315" src="https://www.youtube.com"></iframe>
    </div>
    <div class="screening-buttons">
      <a href="#">Wednesday - 9PM</a>
      <a href="#">Thursday - 9PM</a>
      <a href="#">Friday - 9PM</a>
      <a href="#">Saturday - 6PM</a>
      <a href="#">Sunday - 6PM</a>
    </div>
    <br>
  </div>
  </div>
  <br>
  <div class="synopsis">
  <div id="#movie-three">
    <h3 class="movie-title">Movie Title (PG)</h3>
    <div class="trailer">
      <p class="movie-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <iframe width="560" height="315" src="https://www.youtube.com"></iframe>
    </div>
    <div class="screening-buttons">
      <a href="#">Monday - 6PM</a>
      <a href="#">Tuesday - 6PM</a>
      <a href="#">Saturday - 3PM</a>
      <a href="#">Sunday - 3PM</a>
    </div>
    <br>
  </div>
  </div>
  <br>
  <div class="synopsis">
  <div id="#movie-four">
    <h3 class="movie-title">Movie Title (PG)</h3>
    <div class="trailer">
      <p class="movie-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <iframe width="560" height="315" src="https://www.youtube.com"></iframe>
    </div>
    <div class="screening-buttons">
      <a href="#">Wednesday - 12PM</a>
      <a href="#">Thursday - 12PM</a>
      <a href="#">Friday - 12PM</a>
      <a href="#">Saturday - 9PM</a>
      <a href="#">Sunday - 9PM</a>
    </div>
    <br>
  </div>
</div>

EDIT: I have done some more researching and this is close to what I'm looking for. I tried doing it with my code but it still doesn't quite work.

Script.js file:

$("#movie-one").click(function() {
  let synopsis = $(this).attr(".synopsis");
  $("div").html(synopsis);
});
Wolfizzy
  • 581
  • 1
  • 4
  • 18

1 Answers1

0

With the static content already present on the page you can use javascript for this.

I simplified your example and added the a script which will toggle CSS classes to hide and show the movie details: 

let selectedMovie = undefined;

// Create an eventlistener that will show the details of a movie. 
let createMovieSelectionHandler = function(movieId) {
    return function() {
        // Hide previously selected movie.
        if (selectedMovie) {
            document.getElementById(selectedMovie).classList.remove('selected');
        }

        // Show selected movie.
        selectedMovie = movieId;
        document.getElementById(selectedMovie).classList.add('selected');
    };
};

// Find all movie elements on the page.
let movies = document.getElementsByClassName('movie');

// Add an eventlistener to each of them.
for (let i = 0; i < movies.length; ++i) {
  movies[i].addEventListener('click', createMovieSelectionHandler(movies[i].dataset.movieId));
}
/* Panels */
.movie {
  border: 1px solid #333;
  border-radius: 15px;
  width: 70%;
  margin: 0 auto;
  margin-bottom: 2rem;
}

.details {
  display: none;
}

.details.selected {
  display: block;
}
<div class="panel-group">
  <div class="movie" data-movie-id="batman">
    <h3>Batman</h3>
  </div>

  <div class="movie" data-movie-id="titanic">
    <h3>Titanic</h3>
  </div>

  <div class="movie" data-movie-id="ghost">
    <h3>Ghost Busters</h3>
  </div>
  
</div>
  <div id="batman" class="details">
    <h3>Batman</h3>
    <p>Lorem ipsum dolor sit amet, conse</p>
  </div>
  <div id="titanic" class="details">
    <h3>Titanic</h3>
    <p>Lorem ipsum dolor sit amet, conse</p>
  </div>
  <div id="ghost" class="details">
    <h3>Ghost Busters</h3>
    <p>Lorem ipsum dolor sit amet, conse</p>
  </div>
lupz
  • 3,620
  • 2
  • 27
  • 43