Нажмите ссылку, чтобы показать div внутри контейнера

Question

У меня есть несколько контейнеров (ли). Внутри есть ссылки. При нажатии они должны открыть соответствующий div (и скрыть несогласованные div).

Я могу прокрутить div, но не могу их открыть или скрыть.

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); 
    } 

    }) 

Answer 1

Начните с создания ИО уникальной. (Хотя это не похоже на проблему, которую вы имеете.)

.get() возвращает элемент как элемент. Функции jQuery не связаны с ними. .eq() возвращает элемент как часть нового объекта jQuery.

<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)); 
    } 

    });