Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   JQuerry, раскрывающиеся div, нужна помощь. (https://javascript.ru/forum/dom-window/19478-jquerry-raskryvayushhiesya-div-nuzhna-pomoshh.html)

SeriousSam 05.08.2011 17:12

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>


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

TicTac 05.08.2011 18:56

можно так
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-код, и сделать по нормальному

SeriousSam 05.08.2011 19:23

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

инклюдю внешний файл 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>


Часовой пояс GMT +3, время: 23:38.