Click to reveal more content - 2 columns

Question

I am trying to build a 2 column grid that displays cover images and titles for a projects page. When a user then clicks the linked image, more content is revealed below leaving the cover image area in place.

Currently i have got this far; https://codepen.io/whitinggg/pen/vRoRKx

I am using .toggle function to show/hide the hidden content on a simple Flexbox layout to achieve the 2 column grid.

Currently when you click to reveal the content, the right column drops below the left, and all hidden content boxes are revealed not just the one that was clicked.

How can i stop the right column from dropping below and close all other hidden content areas when one is opened?

This is where i got my inspiration for the page, you can see it working here: https://www.balfourbeatty.com/showcase/

 $(document).ready(function(){ $("button").click(function(){ $(".project-content").toggle(); }); }); 

 .projects-container { display: flex; flex-direction: column; flex-flow: wrap; } .project { width: 50%; } .project img { width: 100%; margin: 0; padding: 0; display: block; } .project-link { background-color: #a54949; padding: 10px; text-align: right; margin: 0 0 20px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="projects-container"> <div class="project"> <img src="https://picsum.photos/800/400" class=""> <div class="project-link"> <button>Read More/Less</button> </div> </div> <div class="project-content" style="display:none;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis ipsum in odio accumsan luctus. Quisque vestibulum erat a mi sollicitudin molestie. Integer blandit rhoncus metus vel cursus. Suspendisse dapibus, justo vehicula egestas sagittis, quam risus dignissim dolor, sit amet malesuada nisi justo sit amet augue. Fusce mollis nulla at felis vehicula vulputate. Vivamus ex eros, ultrices eu felis at, porttitor aliquam dolor. Fusce varius arcu vitae efficitur vestibulum. Nullam vel eros aliquet mauris varius pharetra.</p> <p>Praesent sit amet malesuada purus. Etiam eleifend libero sed magna porta fringilla. Etiam quis ultrices risus. Suspendisse cursus sit amet ex et porttitor. Sed venenatis vulputate lobortis. Curabitur at laoreet est. Maecenas tincidunt magna vitae ex fringilla, at tincidunt erat tempor. In lacinia, quam sit amet fermentum malesuada, est est fermentum leo, vel lobortis nulla purus vel nunc. Proin tempus id neque in rhoncus.</p> </div> <div class="project"> <img src="https://picsum.photos/800/400" class=""> <div class="project-link"> <button>Read More/Less</button> </div> </div> <div class="project-content" style="display:none;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis ipsum in odio accumsan luctus. Quisque vestibulum erat a mi sollicitudin molestie. Integer blandit rhoncus metus vel cursus. Suspendisse dapibus, justo vehicula egestas sagittis, quam risus dignissim dolor, sit amet malesuada nisi justo sit amet augue. Fusce mollis nulla at felis vehicula vulputate. Vivamus ex eros, ultrices eu felis at, porttitor aliquam dolor. Fusce varius arcu vitae efficitur vestibulum. Nullam vel eros aliquet mauris varius pharetra.</p> <p>Praesent sit amet malesuada purus. Etiam eleifend libero sed magna porta fringilla. Etiam quis ultrices risus. Suspendisse cursus sit amet ex et porttitor. Sed venenatis vulputate lobortis. Curabitur at laoreet est. Maecenas tincidunt magna vitae ex fringilla, at tincidunt erat tempor. In lacinia, quam sit amet fermentum malesuada, est est fermentum leo, vel lobortis nulla purus vel nunc. Proin tempus id neque in rhoncus.</p> </div> <div class="project"> <img src="https://picsum.photos/800/400" class=""> <div class="project-link"> <button>Read More/Less</button> </div> </div> <div class="project-content" style="display:none;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis ipsum in odio accumsan luctus. Quisque vestibulum erat a mi sollicitudin molestie. Integer blandit rhoncus metus vel cursus. Suspendisse dapibus, justo vehicula egestas sagittis, quam risus dignissim dolor, sit amet malesuada nisi justo sit amet augue. Fusce mollis nulla at felis vehicula vulputate. Vivamus ex eros, ultrices eu felis at, porttitor aliquam dolor. Fusce varius arcu vitae efficitur vestibulum. Nullam vel eros aliquet mauris varius pharetra.</p> <p>Praesent sit amet malesuada purus. Etiam eleifend libero sed magna porta fringilla. Etiam quis ultrices risus. Suspendisse cursus sit amet ex et porttitor. Sed venenatis vulputate lobortis. Curabitur at laoreet est. Maecenas tincidunt magna vitae ex fringilla, at tincidunt erat tempor. In lacinia, quam sit amet fermentum malesuada, est est fermentum leo, vel lobortis nulla purus vel nunc. Proin tempus id neque in rhoncus.</p> </div> <div class="project"> <img src="https://picsum.photos/800/400" class=""> <div class="project-link"> <button>Read More/Less</button> </div> </div> <div class="project-content" style="display:none;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis ipsum in odio accumsan luctus. Quisque vestibulum erat a mi sollicitudin molestie. Integer blandit rhoncus metus vel cursus. Suspendisse dapibus, justo vehicula egestas sagittis, quam risus dignissim dolor, sit amet malesuada nisi justo sit amet augue. Fusce mollis nulla at felis vehicula vulputate. Vivamus ex eros, ultrices eu felis at, porttitor aliquam dolor. Fusce varius arcu vitae efficitur vestibulum. Nullam vel eros aliquet mauris varius pharetra.</p> <p>Praesent sit amet malesuada purus. Etiam eleifend libero sed magna porta fringilla. Etiam quis ultrices risus. Suspendisse cursus sit amet ex et porttitor. Sed venenatis vulputate lobortis. Curabitur at laoreet est. Maecenas tincidunt magna vitae ex fringilla, at tincidunt erat tempor. In lacinia, quam sit amet fermentum malesuada, est est fermentum leo, vel lobortis nulla purus vel nunc. Proin tempus id neque in rhoncus.</p> </div> </div> 

Answer 1

Update

I have had a better look into the showcase you linked. I tried to recreate the basic implementation of what I think you've tried to achieve.

https://codepen.io/bitmonk/pen/rdXKgP

HTML

<div class="projects-container">

  <div class="project">
    <div class="image">
      <img src="https://picsum.photos/800/400" class="">
      <div class="caption">Caption</div>
      <div class="project-content" style="display:none;">
        <p>Lorem 1</p>
      </div>
    </div>
  </div>

  <div class="project">
    <div class="image">
      <img src="https://picsum.photos/800/400" class="">
      <div class="caption">Caption</div>
      <div class="project-content" style="display:none;">
        <p>Lorem 2</p>
      </div>
    </div>
  </div>

  <div class="project">
    <div class="image">
      <img src="https://picsum.photos/800/400" class="">
      <div class="caption">Caption</div>
      <div class="project-content" style="display:none;">
        <p>Lorem 3</p>
      </div>
    </div>
  </div>

</div>

<div class="content"></div>

The content we want to show will be .content which is outside the "gallery". The actual content of the images is hidden inside the project element.

JS

$(document).ready(function(){
    $(".project").click((e) => {
      const $this = $(e.currentTarget);
      const content = $this.find(".project-content").html();
      $(".content").html(content);
    });
});

With this we capture a click on the project card. With $(e.currentTarget) we make sure we always get the actual .project element as a jQuery Object

e.target will always return the element we clicked on, not the one the event was attached on

With .html() we can get the HTML-Content of the hidden project-content, we will use the same method to set that content for our outer content element.

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 50px;
}

.projects-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.project {
  flex-basis: 50%;
  overflow: hidden;
  border: 2px solid white;
}
.project .image {
  position: relative;
  cursor: pointer;
}
.project .image img {
  width: 100%;
  display: block;
  transition: all 300ms;
}
.project .image:hover img {
  transform: scale(1.2);
}
.project .image .caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.6);
  padding: 8px;
}

.content {
  padding: 25px;
  font-size: 16px;
}

The project container will have display flex, to show all project-cards in a row (with wrap). To make sure there are 2 cards in every row we set the flex-basis of the project element to 50%.

---

Original Answer

In jQuery selectors can select more than one element.

Which means that..

$(".project-content").toggle();

will toggle every element with the class "project-content".

To make things easier I'd recommend changing your HTML to this:

<div class="projects-container">

  <div class="project">
    <img src="https://picsum.photos/800/400" class="">
    <div class="project-link">
      <button>Read More/Less</button>
    </div>
    <div class="project-content" style="display:none;">
      <p>Lorem</p>
    </div>
  </div>

  <div class="project">
    <img src="https://picsum.photos/800/400" class="">
    <div class="project-link">
      <button>Read More/Less</button>
    </div>
    <div class="project-content" style="display:none;">
      <p>Lorem</p>
    </div>
  </div>

  <div class="project">
    <img src="https://picsum.photos/800/400" class="">
    <div class="project-link">
      <button>Read More/Less</button>
    </div>
    <div class="project-content" style="display:none;">
      <p>Lorem</p>
    </div>
  </div>

</div>

And your JQuery to this:

$(document).ready(function(){
    $("button").click(function(e){
      $(e.target).parents(".project").find(".project-content").toggle();
    });
});

Every event in jQuery has an Event-Object as first parameter (here "e"). This event contains the clicked element ("e.target"). With that we can find out where we are and only change the stuff at that place.

$(e.target) = jQuery object of the currently clicked button

.parents(".project") = go back in the tree until we find an element with class ".project"

.find(".project-content") = find the project-content inside that element.

Answer 2

put .project-content inside .project should fix the layout issue.

for the click event you've just told it to open all elements with the class project-content you need to tell it which one, with jquery it's something like:

$(this).parents('.project').find('.project-content').toggle();