открыть контент, связанный с каждым элементом списка, используя jquery

Question

Я новичок в j Query. Я пытаюсь открыть содержимое, связанное с каждым элементом списка в div с идентификатором «#employee». Идентификатор «#details» должен открыть по одному элементу за раз и скрыть остальные. Я попытался решить эту проблему, но из-за моих небольших знаний я не могу этого сделать.

Here is the demo

<div> 
    <div class="details"> 
     <div id="employee1"><h2>Employee 1</h2><p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature </p></div> 
    </div> 
    <div class="details"> 
     <div id="employee2"><h2>Employee 2</h2><p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum</p></div> 
    </div> 
    <div class="details"> 
     <div id="employee3"><h2>Employee 3</h2><p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum</p></div> 
    </div> 
    <div class="details"> 
     <div id="employee4"><h2>Employee 4</h2><p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum</p></div> 
    </div>       
    <div class="thumbs"> 
     <ul> 
      <li id="employee1">Employe 1</li> 
      <li id="employee2">Employe 2</li>     
      <li id="employee3">Employe 3</li> 
      <li id="employee4">Employe 4</li> 
     </ul> 
    </div> 

</div> 

$(document).ready(function() { 
    $("li").click(function() { 
     var divname = this.html(); 
     $("#employee").show("slow").siblings().hide("slow"); 
    }); 
}); 

Answer 1

Это может быть сделано с простой HTML и CSS, нет необходимости в JavaScript. Но с курса JavaScript необходим для некоторых приятных эффектов. Это то, что я сделал для своего дела.

сначала фиксировал высоту контейнера, чтобы он мог отображать только один элемент за раз и скрыть другие. Для этого я использую следующий код CSS

#container { 
height: 100px; 
width: 500px; 
margin: auto; 
overflow: hidden; 
position: relative;} 

И HTML взгляд:

<div class="wrapper"> 
<div id="container"> 
    <div class="details"> 
     <div id="employee1"><h2>Employee 1</h2><p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature </p></div> 
    </div> 
    <div class="details"> 
     <div id="employee2"><h2>Employee 2</h2><p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum</p></div> 
    </div> 
    <div class="details"> 
     <div id="employee3"><h2>Employee 3</h2><p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum</p></div> 
    </div> 
    <div class="details"> 
     <div id="employee4"><h2>Employee 4</h2><p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum</p></div> 
    </div> 
</div> 
<div class="thumbs"> 
    <ul> 
     <li><a href="#employee1">Employe 1</a></li> 
     <li><a href="#employee2">Employe 2</a></li>     
     <li><a href="#employee3">Employe 3</a></li> 
     <li><a href="#employee4">Employe 4</a></li> 
    </ul> 
</div> 
</div> 

Here is the demo