I spent several hours trying to figure this out and couldn't get it right.
Is it feasible to create a jQuery script that will perform the following action when a <span> element is clicked:
Check if any of the
<p>elements are currently displayed (display:block). If so, hide all of them. If not, locate the closest<p>element to that<span>and display it.If you click on a
<span>whose child (<p>) is already active, hide it instead of displaying it.
You can view my example on JSFiddle Here or see my code below:
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;
}