Нужно чтобы при клике на li появлялся контент, которой спрятан в li. При клике на крестик, чтоб скрывался.
$('ul li').click(function() {
$("ul li .popup").removeClass("active").eq($(this).index()).addClass("active");
$("ul li .popup").hide().eq($(this).index()).fadeIn();
}).eq(0).addClass("active");
$('ul li .popup .close').click(function() {
$("ul li .popup").removeClass("active")
});
ul li {
cursor: pointer;
}
.content {
background-color: green;
}
.close {
background-color: red;
}
.popup {
display: none;
}
.popup.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<span>1</span>
<div class="popup"><span class="content">Текст</span>
<span class="close">X</span></div>
</li>
<li>
<span>2</span>
<div class="popup"><span class="content">Текст2</span>
<span class="close">X</span></div>
</li>
<li>
<span>3</span>
<div class="popup"><span class="content">Текст3</span>
<span class="close">X</span></div>
</li>
<li>
<span>4</span>
<div class="popup"><span class="content">Текст4</span>
<span class="close">X</span></div>
</li>
</ul>