Q:

Click link to show div inside container

I have multiple containers(li). Inside there are links. When clicked they need to open a matching div (and hide the non-matching divs).
I can loop through the divs but are unable to open or hide them.
Codepen: https://codepen.io/warddem/pen/kkzrPx
<ul>
  <li>
    <h3>Market study</h3>
    <div>
      <a href="#" data-toggle="#div1" class="showSingle">Results</a>
      <a href="#" data-toggle="#div2" class="showSingle">Learned</a>
      <a href="#" data-toggle="#div3" class="showSingle">Deliverables</a>
      <a href="#" data-toggle="#close" class="">Close all</a>
      <div id="div1" class="optionDiv">Results: </div>
      <div id="div2" class="optionDiv">Learned: </div>
      <div id="div3" class="optionDiv">Deliverables: </div>
    </div>
  </li>
  <li>
    <h3>Competitive research</h3>
    <div>
      <a href="#" data-toggle="#div1" class="showSingle">Results</a>
      <a href="#" data-toggle="#div2" class="showSingle">Learned</a>
      <a href="#" data-toggle="#div3" class="showSingle">Deliverables</a>
      <a href="#" data-toggle="#close" class="">Close all</a>
      <div id="div1" class="optionDiv">Results: </div>
      <div id="div2" class="optionDiv">Learned: </div>
      <div id="div3" class="optionDiv">Deliverables: </div>
    </div>
  </li>
</ul>

jQuery('.showSingle').click(function() {

    var idOpen = $(this).siblings("div");
    var myIndex = $(this).index();

    if (idOpen.is("div")) {
      // HIDE ALL DIVS IN PARENT
      var divLength = idOpen.get(myIndex).id.length;
      for (var i = 0, l = divLength; i < l; i++) {
        console.log('divs to hide', idOpen[i]);
        //HIDE DOESN'T WORK
        //idOpen[i].hide();
      }

      // HOW TO SHOW LINKED DIV ???
      console.log('div id to open: ', idOpen.get(myIndex).id);
    }

  })

A:

Start off with making the id's unique. (Though this doesn't seem relevant to the problem you're having.)
.get() returns the element as an element. jQuery functions don't chain on these. .eq() returns the element as part of a new jQuery object.
<ul>
  <li>
    <h3>Market study</h3>
    <div>
      <a href="#" data-toggle="#div1a" class="showSingle">Results</a>
      <a href="#" data-toggle="#div2a" class="showSingle">Learned</a>
      <a href="#" data-toggle="#div3a" class="showSingle">Deliverables</a>
      <a href="#" data-toggle="#close" class="">Close all</a>
      <div id="div1a" class="optionDiv">Results: </div>
      <div id="div2a" class="optionDiv">Learned: </div>
      <div id="div3a" class="optionDiv">Deliverables: </div>
    </div>
  </li>
  <li>
    <h3>Competitive research</h3>
    <div>
      <a href="#" data-toggle="#div1b" class="showSingle">Results</a>
      <a href="#" data-toggle="#div2b" class="showSingle">Learned</a>
      <a href="#" data-toggle="#div3b" class="showSingle">Deliverables</a>
      <a href="#" data-toggle="#close" class="">Close all</a>
      <div id="div1b" class="optionDiv">Results: </div>
      <div id="div2b" class="optionDiv">Learned: </div>
      <div id="div3b" class="optionDiv">Deliverables: </div>
    </div>
  </li>
</ul>

jQuery('.showSingle').click(function() {

    var idOpen = $(this).siblings("div");
    var myIndex = $(this).index();

    if (idOpen.is("div")) {
      // HIDE ALL DIVS IN PARENT
      var divLength = idOpen.get(myIndex).id.length;
      for (var i = 0, l = divLength; i < l; i++) {
        console.log('divs to hide', idOpen[i]);
        //HIDE DOESN'T WORK
        idOpen.eq(i).hide();
      }

      // HOW TO SHOW LINKED DIV ???
      idOpen.eq(myIndex).show();
      console.log('div id to open: ', idOpen.get(myIndex));
    }

  });

