Вариант на скорую руку.
http://learn.javascript.ru/play/fqkLOb
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style type="text/css">
.spoiler:not(:first-child) > div {
display: none;
}
</style>
</head>
<body>
<section class="spoiler">
<a href="#">Спойлер 1</a>
<div>короче, это спойлер-гармошка, пример тут
он должен открывать один споил и закрывать при этом предыдущий!
Мне нужно было только, что бы при загрузке страницы он открыл первый споил!</div>
</section>
<section class="spoiler">
<a href="#">Спойлер 2</a>
<div>короче, это спойлер-гармошка, пример тут
он должен открывать один споил и закрывать при этом предыдущий!
Мне нужно было только, что бы при загрузке страницы он открыл первый споил!</div>
</section>
<section class="spoiler">
<a href="#">Спойлер 3</a>
<div>короче, это спойлер-гармошка, пример тут
он должен открывать один споил и закрывать при этом предыдущий!
Мне нужно было только, что бы при загрузке страницы он открыл первый споил!</div>
</section>
<script type="text/javascript">
$(function() {
var activeSpoiler = $('.spoiler:first > a');
$(document).on('click', '.spoiler > a', function() {
var self = $(this)
if(this == activeSpoiler[0]) self.next().slideToggle();
else {
activeSpoiler.next().slideUp();
self.next().slideDown();
activeSpoiler = self;
}
});
});
</script>
</body>
</html>