jQuery toggle multiple details divs with clicks

by nickadeemus2002

HTML

<div id="container">
    <div class="clips">
    <a href="#">
        Sommeren da hagen oppsto
        <span>Dikt av Mona Høvring </span>
        <em>02:11 min</em>
    </a>
    <a href="#">
        Olav H. Hauge leser fem dikt
        <span>Haugesundfestivalen 1972</span>
        <em>02:35 min</em>   
    </a>
    <a href="#">
        Kjærligheten til barnet ...
        <span>Dikt av Ingvild Burkey</span>
        <em>01:40 min</em>   
    </a>
    </div>
    <div id="info">
    <ul>
    <li><span>Mona is reading a poem!</span></li>
    <li><span>Olav is reading a poem!</span></li>
    <li><span>Ingvild is reading a poem!</span></li>
    </ul>
  </div>
</div>

CSS

#info {
    width: 195px;
    height: 338px;
    border: 2px black solid;
}
.clips a{margin:10px 30px;display:block;}
#info li {display: none;}

JavaScript

//handle clicked video link
$('.clips a').click(function(e){
    var idx=$(this).index();
    $('#info li').hide().eq(idx).show(300);
       return false;
    
});