title: Apply class to element when I click on other element
body: <p>I want to write a function but I got a little problem. </p>
  
  <p>I have a box that should expand when you click on another box, but there are multiple boxes and I just want one of them to be selected. My logic tells me to select <code>$(".class", this)</code> to select just the one box, but it does not work and I can't find another solution.</p>
  
  <p>I would really appreciate your help. To give you a clear view on what I want to do, I just made a little wireframe in which you can see 3 steps: </p>
  
  <ol>
  <li>Selecting the box on click </li>
  <li>Applying styles to the other Box to expand it, and</li>
  <li>In the same way I selected the second box I want to select another Element from the first box with a class and apply styles to it (it's an arrow that changed the direction from pointing to the top to point to the bottom, which means it's expanded).</li>
  </ol>
  
  <p>Here is a sample of code to show what I want to do:</p>
  
  <p><a href="https://codepen.io/Lueh/pen/eVgNoa" rel="nofollow noreferrer">https://codepen.io/Lueh/pen/eVgNoa</a></p>
  
  <p>Hope you understand what I want to do. I think it's a really easy answer and I just didn't think of it. By the way, I use jQuery for all of this.</p>
  
  <p><a href="https://i.stack.imgur.com/lNJ62.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lNJ62.png" alt="Idea wireframe"></a></p>
  
  <p>// edit: I found a solution, I used the .next() jQuery selector after selecting my class and this. Check out the pen above, I included my solution in there.</p>