Плавно открывающийся/закрывающийся div. Помогите

[Almat]

Доброго времени суток!
Извиняюсь за такой вопрос, вроде бы материала много, но исчерпывающего ответа не нашел.
Нужно
- чтобы блок плавно открывался и закрывался
- при откр/закр менялся фон заголовка
- чтобы можно было разместить на одной странице несколько таких блоков и чтобы они все работали

Варианты с iQuery подойдут, тока jQuery я совсем не знаю))) так что желательно с подробным кодом
вид блока

<div class="someShowHide"><div>Заголовок</div>
<span>Тело
тут еще будет другой <span>а внутри <ul><li>Список</li></ul></span>
</span>
</div>

Получилось с js плавно открывать внешний див, но все что внутри появляется моментально.
Искал на форумах, в гуугле но ничего стоящего не нашел, уже устал((( Помогите разобраться с этим вопросом раз и навсегда. Заранее спасибо всем ответившим!!!

 

[A1x]

http://api.jquery.com/toggle/

 

[Almat]

Спасибо за ответ!
Возникла небольшая проблема не могу применить именно к спану который внутри дива

$(".Class").click(function () {
$("this а тут нужно выбрать спан ").toggle("slow");
});

 

[Духовность™]

Варианты с iQuery подойдут, тока jQuery я совсем не знаю)))

научись.

 

[Almat]

если прописать просто $(span).toogle() то применяется ко всем спанам на странице((

 

[Almat]

Решил проблему так, может кому то будет полезно
<script>
$("#openid").click(function () {
$("#id").toggle("slow"); });
</script>

 

[A1x]

бесполезно, потому что

чтобы можно было разместить на одной странице несколько таких блоков и чтобы они все работали

придется прописывать отдельно все id для каждого блока... и при каждом добавлении блока менять скрипт
это плохое решение

 

[Духовность™]

очень хороший ман по теме http://jquery.page2page.ru/index.php5/Заглавная_страница

 

[KorP]

Что бы понять как это делать (да и не только это), надо задачу разложить по пунктам:
1. Доблжен быть див заголовок, который будет менять цвет после нажатия (ну или открытия - пофиг)
2. должен быть див со скрываемм контентом
3. Раз у нас должно быть несколько таких дивов - у низ должны быть уникальные id
соответственно должно быть что то типа:

<div class="header" onclick="function_open(1)"><div>Заголовок</div>
<div class="body" id="1">Тело
тут еще будет другой <span>а внутри <ul><li>Список</li></ul>
</div>

Соответственно html готов, дальше css:
у нашего div class="body" по дефолту должно быть display: none; если он должен быть изначально скрыт
Ну а дальше всё просто: на js нам нужно написать нашу функцию function_open, в которую мы передаёт id div`а который нужно открыть/закрыть, на чистом js там пара строк, а что бы добавить задержку/плавность можно воспользоваться jquery, там есть для этого slideDown/slideUp, 5 минут на чтение мана и примеров и задача будет выполнена.
Ну как то так это, на самом деле проще написать, чем объяснить

 

[A1x]

KorP мне кажется там можно обойтись без id"ов

<div class="smart-block">
    <div class="smart-block-title"></div>
    <div class="smart-block-content"></div>
</div>

яваскрипт:

<script>
$(function() {
    $('.smart-block').click(function() {
        var block = this;
        $(block).find('.smart-block-content').toggle('slow', function(block) {
            /* здесь меняем стиль заголовка (оставляю это ТС)  */
        });
    });
});
</script>

как-то так хотя не проверял

ЗЫ id="1" это не по стандарту, насколько я помню ид должен начинаться с буквы

 

[KorP]

мне кажется там можно обойтись без id"ов

можно, но тогда jsка будет проще и меньше юзать jquery, я предпочитаю обходить их стороной по максимуму, благо id сгенерить не проблема, но твой вариант пожалуй более красив, согласен, но у меня неприязнь к js/jquery

id="1" это не по стандарту

это был пример, для более простого понимания

 

[HEm]

Если ты программист или верстальщик - разбирайся, у jQ отличные доки, все понятно, переводов и статей по теме тоже море.

даю наводку - http://api.jquery.com/category/selectors/

 

[KorP]

HEm
это мне? да я админ

 

[A1x]

на вкус и цвет конечно... но jQ сокращает количество кода в разы, особенно ajax

 

[KorP]

Да я не спорю, но у меня код попроще, что то типа:

function expand(id)
{
	var div = "#"+id;
	if ($(div).is(":hidden"))
	{
		$(div).slideDown("slow");
		$(div+"_arrow").attr("src","images/arrow_down.png");
	} 
	else 
	{
		$(div).slideUp("slow");
		$(div+"_arrow").attr("src","images/arrow.png");
	}
	return false;
}

с селекторами не очень хотелось разбираться

а вообще если бы не задача делать это плавно, там вообще примитив на js

function foo(id) { 
if (document.getElementById(id).style.display != "block")
   {document.getElementById(id).style.display = "block"}
else 
   {document.getElementById(id).style.display = "none"}
}

 

[HEm]

HEm
это мне? да я админ

тс-у конечно

 

[Almat]

Огромное спасибо за ответы и советы! Есть что изучать и на кого ровняться))) Все ссылки обязательно прочту. А неприязнь к JQ наверно из за веса, но надеюсь это не будет проблемой с учетом развития скорости интернета))

 

[HEm]

Almat
Какой вес, ты о чем?
Сесть на jQ после всяческой возни с js - это как из старых жигулей пересесть в лексус

 

[Almat]

Ну на счет этого не спорю))) просто на форумах которые я читал все жаловались на 56Кб веса))) хотя не знаю насколько сильно это влияет на скорость загрузки

 

[HEm]

в то время как космические корабли бороздят пространство жалеть 56кб трафика....