Исход на днях я нашел на просторах интернета у меня работает....
Иногда есть необходимость показать какой-либо текст нажав на ссылочку, при этом не перезагружая страницу. Сделать это легко с помощью JavaScript. Пишем вот такой простой скрипт:
|
Код:
|
<script>
function look(type){
param=document.getElementById(type);
if(param.style.display == "none") param.style.display = "block";
else param.style.display = "none"
}
</script>
<a href="javascript:look('div1');">показать/скрыть</a>
<div id="div1" style="display:none">
Скрытый текст
</div> |
Если у вас таких блоков больше чем один, просто меняйте ID DIV. Можно указать не только цифру, вы можете написать что-нибудь, так будет потом проще разобраться.
Есть другой вариант. При нажатии на ссылку меняется надпись "ПОКАЗАТЬ-СКРЫТЬ"
|
Код:
|
<script>
function on(n){
eval("document.all.text"+n+".style.display='block';");
eval("document.all.ontext"+n+".style.display='none';");
eval("document.all.offtext"+n+".style.display='inline';");
}
function off(n){
eval("document.all.text"+n+".style.display='none';");
eval("document.all.ontext"+n+".style.display='inline';");
eval("document.all.offtext"+n+".style.display='none';");
}
</script> |
<!-- Скрытый текст -->
|
Код:
|
<div id='text1' style='display: none;'>
Скрытый текст
</div> |
|
Код:
|
<span id='ontext1' style='display: inline;'>
<a href="javascript:on('1');">подробнее</a>
</span>
<span id='offtext1' style='display: none;'>
<a href="javascript:off('1');">кратко</a>
</span> |
Есть третий вариант, очень красивый, для его реализации нам понадобится скрипт jquery.js
Подгружаем скрипт:
|
Код:
|
<script type="text/javascript" src="jquery.js"></script> |
Создаем стиль для блоков с появляющимся текстом:
|
Код:
|
.opis{display:none; text-align: justify;}
Далее скрытый текст:
<div class="opis" id="opis1"> |