После разрастания при попытке отобразить/скрыть элементы с помощью jquery

Question

Я боролся с этим в течение нескольких часов и не мог исправить это.
Можно ли написать код JQuery для этого так, когда <span> щелкают было бы сделать это:

1. Поиск, если любой из <p> уже отображается (display:block), и если да, то скрыть их всех, если нет, найдите ближайший <p> этого <span> и покажите его.

2. Если нажать на <span>, чей ребенок (<p>) уже активен, скрыть его вместо отображения его

U может проверить мою скрипку Here или увидеть мой код ниже:
HTML

<div> 
    <span>First</span> 
    <p>1</p> 
    </div> 
    <!-- ... --> 
    <div> 
    <span>Second</span> 
    <p>2</p> 
    </div> 

CSS

span{ 
    display:inline-block; 
    padding:8px; 
    background:skyblue; 
    color:white; 
    font-family:helvetica; 
    cursor:pointer; 
} 
div{ 
    display:inline-block; 
} 
p{ 
    margin:0; 
    padding:0; 
    display:none; 
} 

Answer 1

Вы можете использовать:

$('span').click(function(){ 
    $('p').not($(this).next()).hide(); 
    $(this).next().toggle(); 
}); 

Working Demo