title: Javascript Help: Clicking an element affects that element AND other elements
body: <p>I haven't really got experience using javascript, so I'm currently trying out the basic first steps of getting the hang of it.</p>
  <hr />
  <h2>The setup:</h2>
  <p>I've got <a href="https://codepen.io/MikaTheDesigner/pen/oNEdrrq" rel="nofollow noreferrer">these four div boxes in parent-container with the flex-property</a>, each box with 25% width.</p>
  <pre><code>&lt;section&gt;
      &lt;div class=&quot;box box1&quot;&gt;&lt;/div&gt;
  
      &lt;div class=&quot;box box2&quot;&gt;&lt;/div&gt;
  
      &lt;div class=&quot;box box3&quot;&gt;&lt;/div&gt;
  
      &lt;div class=&quot;box box4&quot;&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  <p>When <strong>hovering</strong> over one of the boxes, that particular box gets 40% in width, and the remaining boxes gets reduced to 20%.</p>
  <p>When you then <strong>click</strong> one of the boxes, that box gets 85% width, and the remaining boxes gets reduced to 5%.</p>
  <p><strong>If</strong> you then <strong>click</strong> another box, <strong>that</strong> box gets 85% width, and remaining boxes gets reduced to 5%.</p>
  <p>To get back to the all-25%-width-boxes, using a simple cross will do the job (haven't coded this yet, though).</p>
  <hr />
  <h2>Problem/Troubleshooting:</h2>
  <p>I started off by trying to do an all-CSS solution using input checkboxes, but quickly realized this would not work, as CSS do not have a selector that can have effect on previous siblings.</p>
  <p>Therefore, <strong>I need two javascript functions.</strong></p>
  <p>(1) When clicking one of the boxes, that element gets a certain width, as well as the remaining boxes getting a smaller width.</p>
  <p>(2) If you have already clicked one of the boxes, which now is 85% width, if you click one of the other boxes, <strong>that</strong> particular box is now &quot;the selected one&quot;, and will be 85% in width.</p>
  <p>I have a feeling it's two simple functions. I just do not have experience using javascript, so I'm uncertain of what to write.</p>