JQuerry, раскрывающиеся div, нужна помощь.
 

Здравствуйте форумчане.

Нужна ваша помощь, с JQuerry не дружу, нашел интересующий меня скрипт, но нужна маленькая поправка.


Суть вот в чем: есть 10 ссылок на странице, при нажатии на каждую из них выводится скрытый блок. Хотелось что бы при нажатии на каждую последующую ссылку - предыдущий блок сворачивался. Помогите пожалуйста.

Код скрипта:

<script>
function gosts (objName) {
  if ( $(objName).css('display') == 'none' ) {
    $(objName).animate({height: 'show'}, 400);
  } else {
    $(objName).animate({height: 'hide'}, 200);
  }
}
</script>

Элементы его использующие

<a href="#" onclick="gosts('#divId'); return false"><img src="images/spoiler.gif" /></a>
<div id="divId" style="display: none">
Тут скрытый текст который нужно вывести
</div>

Заранее всем благодарен за советы.

можно так

function gosts (objName) {
  if ( $(objName).css('display') == 'none' ) {
    $("div").animate({height: 'hide'}, 200);
	$(objName).animate({height: 'show'}, 400);
  } else {
    $(objName).animate({height: 'hide'}, 200);
  }
}

но лучше отделить JavaScript и HTML-код, и сделать по нормальному

Да, спасибо, я уже пошуршал по форуму и нашел решение, чуть подредактировав уже имеющееся :)

инклюдю внешний файл js с этим скриптом

$(document).ready(function () {
	    showContext = function (event) {
	        var id = $(event.target).attr('id').slice(4);
	        var $id = $('#' + id);
	        var idStatus = $id.css('display');
	        $('.show_display').animate({height: 'hide'}, 200);
	        idStatus === 'none' ?
	            $id.animate({height: 'show'}, 400) : $id.animate({height: 'hide'}, 200);
	    }
	    $('img').bind('click', $.proxy(showContext, this));
	});

в стили добавляю

.show_display {display: none;}

В коде выглядит так

<ul>
           <li><a href="#"><img id="abcd1" src="images/img.gif" /></a></li>  
               <div id="1" class="show_display">текст</div>
</ul>