Типы отображения CSS: вкладки

Question

Я пытаюсь создать макет с табуляцией, я работаю, если он находится в вертикальной ориентации, но я хотел бы сделать их горизонтальными. Когда щелкнута вкладка, я хотел бы сделать расширение div, а затем вкладка, у меня возникли проблемы с этим. Я также добавил X для выхода. Это мой jsFiddle.

<div id="header"> 
<div id="music"><a href="#">Music</a></div>    
<div id="about"><a href="#">About</a></div> 
<div id="contact"><a href="#">Contact</a></div> 
</div> 

<div id="musicinfo"> 
<p>Music info div</p> 
<p id='close'>x</p> 
</div> 

$("#music").click(function() { 
$("#musicinfo").show(); 
$('#close').click(function() { 
$("#musicinfo").hide(); 

}); 


}); 

Я не добавлял jquery на свою скрипку, так что это не было причиной того, что она не работала. Поэтому я изменю свой вопрос, потому что думаю, что этот пост все равно поможет людям. Любые лучшие идеи о том, как делать то, что я пытаюсь выполнить?

Answer 1

Могу ли я предложить более простое решение, которое не использует jQuery? Я действительно не понимаю, почему каждый хочет использовать его, даже если это не надо ... (я полагаю, ваш вопрос заключается в том, чтобы сделать содержимое вкладок появляется при нажатии его имени)

http://jsfiddle.net/EPDqR/

<div id="header"> 
<div id="music" onclick="getElementById('musicinfo').style.display='block';"><a href="#">Music</a></div>    
<div id="about"><a href="#">About</a></div> 
<div id="contact"><a href="#">Contact</a></div> 
</div> 

<div id="musicinfo"> 
<p>Music info div</p> 
<p id='close' onclick="getElementById('musicinfo').style.display='none';">x</p> 
</div> 

Answer 2

Вы должны импортировать JQuery в скрипку

$("something")... // this is jQuery object 

Теперь работа: http://jsfiddle.net/FFjSk/23/