title: Swipe text when you click on one of the images
body: <p>I'm trying to do this with jquery so when you hover or click on one of the images (red boxes) the grey area (text area) changes to show the text related to that image. Adding class to execute display block doesn't work because I don't know how to link a specific image to a specific text area.</p>
  
  <p>I tried to do it via toggling the not active class with the active class but again I don't know how to link the image to the specific text area. Here is a sketch picture of how it would look like.  <a href="https://i.stack.imgur.com/kGs0K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kGs0K.png" alt="Hover on image to display a different text."></a></p>
  
  <p>The reason they are in 2 different grids it's becuase on a smaller screen only the first grid displays. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row py-5"&gt;
      &lt;div class="grid-reviews"&gt;
        &lt;img class="photothumb review-1" src="img/reviews/person1.jpg"&gt;
        &lt;img class="photothumb review-2" src="img/reviews/person2.jpg"&gt;
        &lt;img class="photothumb review-3" src="img/reviews/person3.jpg"&gt;
        &lt;img class="photothumb review-4" src="img/reviews/person4.jpg"&gt;
        &lt;img class="photothumb review-5" src="img/reviews/person5.jpg"&gt;
        &lt;img class="photothumb review-6" src="img/reviews/person6.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="grid-reviews-2"&gt;
        &lt;img class="photothumb review-7" src="img/reviews/person7.jpg"&gt;
        &lt;img class="photothumb review-8" src="img/reviews/person8.jpg"&gt;
        &lt;img class="photothumb review-9" src="img/reviews/person9.jpg"&gt;
        &lt;img class="photothumb review-10" src="img/reviews/person10.jpg"&gt;
        &lt;img class="photothumb review-11" src="img/reviews/person11.jpg"&gt;
        &lt;img class="photothumb review-12" src="img/reviews/person12.jpg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="testimony-desc text-center"&gt;
      &lt;div class="review-1 not-active"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab deleniti, deserunt dolorum et eum iure labore libero molestiae nam nisi nostrum obcaecati perferendis rem sed tempora vel velit veniam.&lt;/p&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, cupiditate deleniti dolore et sit veniam! Beatae explicabo iure natus veritatis? Aliquam fugiat modi molestias nisi repellendus rerum sunt tenetur veniam!&lt;/p&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aspernatur debitis deleniti hic illo iure pariatur provident, quibusdam rem reprehenderit sit, vel. Eum nesciunt quaerat, ratione sed similique voluptas.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="review-2 not-active"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur eius eos inventore iusto laborum nostrum similique tempore veniam? Ipsa ipsum libero minima nostrum reiciendis. Ipsum iure laudantium nobis odit veritatis!&lt;/p&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus nihil obcaecati voluptatem. Aliquid, blanditiis dolorem et harum ipsam magnam, nemo nesciunt obcaecati pariatur quaerat quisquam similique tempore velit! Numquam, perspiciatis.&lt;/p&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis eligendi et hic illo in necessitatibus officia pariatur porro repellat! Ab alias amet dolor doloremque inventore, placeat qui quo rerum tempore.&lt;/p&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis eligendi et hic illo in necessitatibus officia pariatur porro repellat! Ab alias amet dolor doloremque inventore, placeat qui quo rerum tempore.&lt;/p&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis eligendi et hic illo in necessitatibus officia pariatur porro repellat! Ab alias amet dolor doloremque inventore, placeat qui quo rerum tempore.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="review-3 not-active"&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="review-4 not-active"&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="review-5 not-active"&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="review-6 not-active"&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="review-7 not-active"&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="review-8 not-active"&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="review-9 not-active"&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="review-10 not-active"&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="review-11 not-active"&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="review-12 not-active"&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;/di</code></pre>
  </div>
  </div>
  </p>