Найти все элементы, которые соответствуют конкретному идентификатору, в NEXT

Question

Хорошо, вот пересмотренный вопрос. Прошу прощения за то, что он плохо поставлен.

То, что я пытаюсь сделать, это:

Если я переключить() элемент, как я прячу любой другой элемент, который имеет тот же класс. Вот сценарий JS. Я пробовал сиблинг() и Not(), но по какой-то причине я не могу заставить его работать.

<div class="biotitle"> Title One</div> 
<div class="bio"> Bio One </div> 
<div class="biotitle">Title Two </div> 
<div class="bio"> Bio Two</div> 
<div class="biotitle">Title Three </div> 
<div class="bio">Bio THree </div> 
<div class="biotitle"> Title FOUR</div> 
<div class="bio">Bio Four </div> 
<div class="biotitle">Title Five</div> 
<div class="bio"> Bio Five</div> 

$(".bio").hide(); 
$(".biotitle").click(function() { 

$(this).next(".bio").toggle("medium"); 

}); 

https://jsfiddle.net/mzt9wqj5/6/

Если добавить $ ("био".) Скрывать(). до «$ (this) .next («. bio »). toggle (« medium »); он имеет желаемый эффект, за исключением случаев, когда я нажимаю на текущий элемент, который он сохраняет, открывая его.

UPDATE: Я думаю, что это решение:... $ (это) .next ("био ") переключения (" среда ") братья и сестры (". Био") скрыть();

Answer 1

Несмотря на плохое объяснение, я считаю, что понимаю, чего вы пытаетесь достичь.

Я прочитал ваш вопрос, как это:

Как переключить видимость смежного элемента, когда предыдущий родственный нажата?

Во-первых, позвольте мне сказать, что атрибут id должен быть уникальным во всем документе. Элементы, которые делятся качествами, используют атрибут class.

Итак, давайте посмотрим на поправку к вашему коду. Вот немного CSS для стиля, изменение разметки, и корректировка кода:

$('.bio').hide(); 
 

 
$('.biotitle').click(function() { 
 
    
 
    // get the adjacent bio and show it through show class 
 
    var $adjacent = $(this).next('.bio').toggle('medium'); 
 
    
 
    // get all bio's (except adjacent) and hide all by removing show class 
 
    $('.bio').not($adjacent).hide('medium'); 
 
    
 
});

.biotitle { 
 
    padding:20px; 
 
    background:tomato; 
 
    Color:white; 
 
    cursor:pointer 
 
} 
 

 
.bio { 
 
    background:#333; 
 
    padding:30px; 
 
    color:#eee; 
 
    margin-bottom:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="biotitle"> Title 1 </div> 
 
<div class="bio"> Bio 1 </div> 
 
<div class="biotitle"> Title 2 </div> 
 
<div class="bio"> Bio 2 </div> 
 
<div class="biotitle"> Title 3 </div> 
 
<div class="bio"> Bio 3 </div> 
 
<div class="biotitle"> Title 4 </div> 
 
<div class="bio"> Bio 4 </div> 
 
<div class="biotitle"> Title 5 </div> 
 
<div class="bio"> Bio 5 </div>

Как вы можете видеть, этот фрагмент кода использует смесь стиля CSS, HTML разметки и JavaScript/jQuery для достижения необходимого.

Update

По вашей скрипке, я был прав насчет того, что вы хотели. Единственное различие заключается в том, что я использую класс CSS, чтобы скрыть/показать атрибуты, а стиль CSS немного отличается. Я обновил свой пример кода, чтобы показать вам, что вам нужно.

В этом ответе нажмите синюю кнопку «Выполнить код фрагмента», чтобы увидеть код в действии. Я также обновил your fiddle here, чтобы показать то же самое.