Миледи, спасибо
Добавлено 13.09.13 в 22:27:19:
Вот есть такая штука которая открывает всё поочерёдно:
<a href=\"javascript:sh(\'1\')\">Загаловок(спойлер)</a>
<div id=\"blabla_1\" style=\"display:none\">здесь открывается скрытый текст</div>
<a href=\"javascript:sh(\'2\')\">Загаловок(спойлер) 2</a>
<div id=\"blabla_2\" style=\"display:none\">здесь открывается скрытый текст</div>
<a href=\"javascript:sh(\'3\')\">Загаловок(спойлер) 3</a>
<div id=\"blabla_3\" style=\"display:none\">здесь открывается скрытый текст</div>
<script type=\"text/javascript\">
function sh(num) {
obj = document.getElementById(\"blabla_\"+num);
if( obj.style.display == \"none\" ) { obj.style.display = \"block\"; } else { obj.style.display = \"none\"; }
}
</script>
А мне нужно что бы при открытии другого спойлера предыдущий закрылся...
HTML:
<a class=\"ToggleBlock\">
<div class=\"name\" id=0>показать</div>
<div class=\"text\">содержимое</div>
</a>
========================================
JQuery:
$(\'a.ToggleBlock\').click(function(){
var id=parseInt($(this).children(\'div.name\').attr(\'id\'));
if(id==0){
$(this).children(\'div.name\').attr(\'id\',1);
$(this).children(\'div.name\').text(\'скрыть\');
}else{
$(this).children(\'div.name\').attr(\'id\',0);
$(this).children(\'div.name\').text(\'показать\');
}
$(this).children(\'div.text\').toggle();//fadeToggle();//slideToggle();
});
==========================================
CSS:
a.ToggleBlock{cursor:pointer;}
==========================================
пример на JQuery
anti_dot,
Вот как то так?
<head>
<style>
a.ToggleBlock{cursor:pointer;}
</style>
</haed>
<body>
<script src=\"http://code.jquery.com/jquery-1.10.1.min.js\"></script>
<script src=\"http://code.jquery.com/jquery-migrate-1.2.1.min.js\"></script>
<script>
$(\'a.ToggleBlock\').click(function(){
var id=parseInt($(this).children(\'div.name\').attr(\'id\'));
if(id==0){
$(this).children(\'div.name\').attr(\'id\',1);
$(this).children(\'div.name\').text(\'скрыть\');
}else{
$(this).children(\'div.name\').attr(\'id\',0);
$(this).children(\'div.name\').text(\'показать\');
}
$(this).children(\'div.text\').toggle();//fadeToggle();//slideToggle();
});
</script>
<a class=\"ToggleBlock\">
<div class=\"name\" id=0>показать</div>
<div class=\"text\">содержимое</div>
</a>
</body>
Изм. 1 раз. / Посл. изм. (13 сен 2013, 22:32)
да но этот код не предусматривает открытие только одного блока... да и у блока display:none; забыл прописать)
anti_dot,
<head>
<style>
a.ToggleBlock{cursor:pointer;}
</style>
</head>
<body>
<script src=\"http://code.jquery.com/jquery-1.10.1.min.js\"></script>
<script src=\"http://code.jquery.com/jquery-migrate-1.2.1.min.js\"></script>
<script>
$(\'a.ToggleBlock\').click(function(){
var id=parseInt($(this).children(\'div.name\').attr(\'id\'));
if(id==0){
$(this).children(\'div.name\').attr(\'id\',1);
$(this).children(\'div.name\').text(\'скрыть\');
}else{
$(this).children(\'div.name\').attr(\'id\',0);
$(this).children(\'div.name\').text(\'показать\');
}
$(this).children(\'div.text\').toggle();//fadeToggle();//slideToggle();
});
</script>
<a class=\"ToggleBlock\">
<div class=\"name\" id=0>показать</div>
<div class=\"text\" style=\"display:none\">содержимое</div>
</a>
<a class=\"ToggleBlock\">
<div class=\"name\" id=1>показать</div>
<div class=\"text\" style=\"display:none\">содержимое 2</div>
</a>
</body>
Сделал так только что-то оно не работает...
скрипт в:
document.ready(function(){
CODE_JQuery
});
или ниже html напиши... в консоле запускал все работает...
anti_dot, дайте мне код который вы запускали
А то я сделал так как вы сказали, а эффекта ни какого...
