class DarkRaha extends com { // разработка приложений
            String a="Главная" b="Контакты" c="О сайте"
};

HTML

DOM HTML

введение
объектной модель DHTML
события
свойства и методы
объект window
объект navigator
объект screen
объект history
объект location
объект document
объект event
объект Canvas

разное

генерация кода
фреймы
вставка текста в позицию каретки
скрыть/показать текст
ширина ячеек таблицы

Справочник по DHTML

Скрыть/показать текст

Ниже представлены некоторые способы скрытия/отображения текста без использования дополнительных библиотек как JQuery.

1. С использованием выбранного значения в выпадающем списке.


<script language="JavaScript">
<!-- 
// обработчик выбора элемента 
// в выпадающем списке
function showhideBlocks(val){
if(val==0){
document.getElementById('i1').style.display='block';
document.getElementById('i2').style.display='block';
document.getElementById('i3').style.display='block';    
}
else{
document.getElementById('i1').style.display='none';
document.getElementById('i2').style.display='none';
document.getElementById('i3').style.display='none';    
document.getElementById('i'+val).style.display='block';    
}
}
-->
</script>

<!-- вместо value можно this.value -->
<select name="items" onchange="showhideBlocks(value)">
<option value="0"> All
<option value="1"> Block 1
<option value="2"> Block 2
<option value="3"> Block 3
</select>

<div id="i1">block 1 </div>
<div id="i2">block 2 </div>
<div id="i3">block 3 </div>
Результат:
block 1
block 2
block 3


2. С использованием события onckick на элементе. Для подцветки элемента, на который можно кликнуть, используются события onmouseover и onmouseout (можно реализовать через соответствующие псевдоклассы CSS).


function showhideBlock(idclick,idtext){
var objclick = document.getElementById(idclick);
var objtext  = document.getElementById(idtext);

 if(objtext.style.display=='none') {
    objclick.innerHTML=objclick.innerHTML.replace("+Показать","-Скрыть");       
    objtext.style.display='block';
    }
 else { 
   objclick.innerHTML=objclick.innerHTML.replace("-Скрыть","+Показать");
   objtext.style.display='none';     
   }
}
-->
</script>

<span id='bl1'
onclick="showhideBlock('bl1','textbl1');" 
onmouseover="style.color='green'" 
onmouseout="style.color='black'"
>+Показать</span> первый блок<br>
<div id='textbl1' style="display:none">ЭТО ПЕРВЫЙ БЛОК</div>
  
<span id='bl2'
onclick="showhideBlock('bl2','textbl2');" 
onmouseover="style.color='green'" 
onmouseout="style.color='black'"
>+Показать</span> второй блок
<div id='textbl2' style="display:none">ЭТО ВТОРОЙ БЛОК</div>
Результат
+Показать первый блок
+Показать второй блок

Рейтинг@Mail.ru