Javascript Question

Using jQuery toggle to show content, but prevent closing when the user clicks on an input element

There is a drop-down list, implemented approximately like this:

<ul>
<li>
<div class="block"></div>
<p>block 1</p>
<span>
<b>Here is some text</b>
<input type="text" placeholder="ENTER HERE">
</span>
</li>
<li>
<div class="block"></div>
<p>block 2</p>
<span>
<b>Here is some text</b>
<input type="text" placeholder="ENTER HERE">
</span>
</li>
</ul>


In the list there are some text, and input.

JS :

$(function(){
$('ul li').click(function(){
$('span', this).toggle();
});
});


Now the problem is, if you click on the input field, then the list will be closed immediately, how to avoid it?

Also, using css I added a triangle which when clicked should be rotated 180 degrees, what is the best way to implement this?

Here, example on jsfiddle

Thank you google translater =)

Answer

Check JsFiddle: https://jsfiddle.net/z8c7effx/14/

I added

$('input[type=text]').click(function(event){
   event.stopPropagation();    
});

to prevent event propagation, to prevent closing of li.

Also added rotation of the arrow using following css class.

.selected
{
  transform: rotate(270deg);
  transform-origin: 20px 8px;
}