Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Открывается-Закрывается :)

Автор: R.M. 4.10.2005, 11:33

Видел на некоторых сайтах такую штуку пишется например новость:

Заголовок
сама новость сама новость сама новость сама новость сама новость
подробнее

И когда нажимаеш "подробнее" вся эта штукенция раздвигается вниз

Заголовок
сама новость сама новость сама новость сама новость сама новость
сама новость сама новость сама новость сама новость сама новость
сама новость сама новость сама новость сама новость сама новость
сама новость сама новость сама новость сама новость сама новость
сама новость сама новость сама новость сама новость сама новость
свернуть

Нажмиаеш "свернуть" и всё преобредает первозданный вид, как организовать такую штуку? Я так подогзреваю я по адресу обратился smile

Автор: sergejzr 4.10.2005, 11:49

Код


<div >сама новость сама новость сама новость сама новость сама новость 
   <br />
   <a href="#" onclick="document.getElementById('news1').style.display='block'; return false;">подробнее</a>
</div>
<br />
<div id="news1" style="display:none">
   сама новость сама новость сама новость сама новость сама новость<br />
   сама новость сама новость сама новость сама новость сама новость<br />
   сама новость сама новость сама новость сама новость сама новость<br />
   сама новость сама новость сама новость сама новость сама новость<br />
   сама новость сама новость сама новость сама новость сама новость<br />
   <a href="#" onclick="document.getElementById('news1').style.display='none'; return false;">свернуть</a>
</div>

Автор: R.M. 4.10.2005, 11:58

sergej.z

почти то smile

тока "подробнее" почемута остаётся а должен ищезать

Автор: Aliance 4.10.2005, 12:45

Я нираз давал этот скрипт.
Для себя я написал свой, его работу можешь увидить здесь: http://www.sut.net.ru

Код


// Сокращеная запись в новостях
function showHide(lay, block) {
var nod = document.getElementById(block);
var la = document.getElementById(lay);
 if (la.style.display == 'none') {
   la.style.display = '';
   nod.innerHTML = '<B>Спрятать</B>';
 } else {
   la.style.display = 'none';
   nod.innerHTML = '<B>Показать</B>';
 }
}

Код


<a id="text0" href="javascript:{}" onclick="showHide('lay0', 'text0')"><B>Показать</B></a>
<div id='lay0' style='display:none'>
тут расвернутая новость....
<br />контент
<br />контент
<br />контент
<br />контент
<br />контент
<br />контент
<br />контент
</div>

Автор: R.M. 4.10.2005, 12:56

Aliance
Спасибо

Автор: Payne 5.10.2005, 16:15

Мне кажется, что приведенный sergej.z пример был проще и удовлетворял тому условию
Куксикус'а, что слова "подробнее" и "свернуть" должны быть внизу, под новостями.

Цитата

тока "подробнее" почемута остаётся а должен ищезать

Тут все дело в том, что после показа расширенной версии новостей нужно было прятать краткую версию и наоборот, чего не делает код sergej.z. Попробуй так:

Код


<div id="news">сама новость сама новость сама новость сама новость сама новость 
   <br />
   <a href="#" onclick="document.getElementById('news1').style.display='block';
                                     <!-- следующая строка прячет краткую новость -->
             document.getElementById('news').style.display='none';
             return false;">подробнее</a>
</div>

<div id="news1" style="display:none">
   сама новость сама новость сама новость сама новость сама новость<br />
   сама новость сама новость сама новость сама новость сама новость<br />
   сама новость сама новость сама новость сама новость сама новость<br />
   сама новость сама новость сама новость сама новость сама новость<br />
   сама новость сама новость сама новость сама новость сама новость
   <br />
   <a href="#" onclick="document.getElementById('news1').style.display='none';
                                     <!-- следующая строка вновь показывает краткую новость -->
                                     document.getElementById('news').style.display='block';
             return false;">свернуть</a>
</div>

Автор: R.M. 6.10.2005, 01:08

Payne

Спасибо, это полностью то, что нужно

Автор: Gravip 6.10.2005, 18:52

Код


<form action="1.php" method="get">
<input type="radio" name="m" value="1" onclick="document.getElementById('n1').style.display='block'; document.getElementById('n2').style.display='none'; return false;" checked="checked">Из списка<br>
 <select name="re" id="n1" style="display:none">
    <option value="1" selected>1
    <option value="2">2
    <option value="3">Test
 </select><br>
<input type="radio" name="m" value="2" onclick="document.getElementById('n2').style.display='block'; document.getElementById('n1').style.display='none'; return false;">Свое<br>  
<div id="n2" style="display:none">http:\\<input type=text size=30 name="re"></div> <br>
<input type="submit" value="поехали!">
</form>

Переделал под форму , скрытие работает , но вот сами radio кнопки перестали smile

все вермя активна вторая кнопка, че делать smile

Автор: sergejzr 6.10.2005, 19:02

Gravip, Дык ты false возвращаешь, вот событие прибивается после скрытия.

Код


<form action="1.php" method="get">
<input type="radio" name="m" value="1" onclick="document.getElementById('n1').style.display='block'; document.getElementById('n2').style.display='none'; return true;" checked="checked">Из списка<br>
 <select name="re" id="n1" style="display:none">
    <option value="1" selected>1
    <option value="2">2
    <option value="3">Test
 </select><br>
<input type="radio" name="m" value="2" onclick="document.getElementById('n2').style.display='block'; document.getElementById('n1').style.display='none'; return true;">Свое<br>  
<div id="n2" style="display:none">http:\\<input type=text size=30 name="re"></div> <br>
<input type="submit" value="поехали!">
</form>

Автор: Gravip 6.10.2005, 20:05

Да действительно smile

Спасибо