title: Show corresponding <div> when clicking on link
body: <p>Link a is surrounded by <code>foreach</code> and the div elements are also surrounded by <code>foreach</code>.</p>
  <p>I want, when we click on a link <code>&lt;a&gt;</code> the corresponding <code>&lt;div&gt;</code> content appears and when you click on another link, the corresponding <code>&lt;div&gt;</code> content appears replacing the previously displayed content.</p>
  <p>Link to:</p>
  <pre><code>@foreach($ projects as $ project)
  &lt;a onclick=&quot;myFunction('project'+$project-&gt; id}}) &quot;&gt;
   Click
  &lt;/a&gt;
  @endforeach
  </code></pre>
  <p>The div content:</p>
  <pre><code>@foreach($ projects as $ project)
  &lt;div id=&quot;project {{$ project-&gt; id}}&quot; style=&quot;display: none&quot;&gt;
    Content {{ $ project-&gt; id}}
  &lt;/div&gt;
  @endforeach
  </code></pre>
  <p>Here is the JavaScript function I am using:</p>
  <pre><code>&lt;script&gt;
    function myFunction (x) {
            if (document.getElementById (x) .style.display == &quot;none&quot;) {
      document.getElementById(x).style.display = &quot;flex&quot;;
            } else {
      document.getElementById(x).style.display = &quot;none&quot;;
            }
         }
  &lt;/script&gt;
  </code></pre>