Jump to content
  • 0

раскрывающийся текст


Rilo
 Share

Question

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

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0

jQuery (javascript)

<script type="text/javascript" src="js/jQuery1.4.1.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$('a.example').click(function() {

$('p.example').toggle('fast');

return false;

});

});

</script>

HTML

<a class="example" href="#">пример</a>

<p class="example">

Введите в строке «Адрес» <span class="code">%appdata%</span> и нажмите Enter<br /><br />

<img border="0" src="http://quake-live.ucoz.ru/img/article/install/adress_row.jpg" /><br /><br />

После этого попадете в папку текущего пользователя, у меня это<br /><br />

<img border="0" src="http://quake-live.ucoz.ru/img/article/install/adress_row2.jpg"><br /><br />

В нее и извлекайте архив.<br />

</p>

Стили

<style type="text/css">

a.example {border-bottom:1px dashed #8C8C9C;text-decoration:none;}

p.example {display:none;padding-left:20px;}

</style>

Живой пример: Quake-Live.ucoz.ru/index/Download_QuakeLive/0-6

Edited by aTei
Link to comment
Share on other sites

  • 0

можете дать хороший вариант? почему нельзя сделать урок на сайте с этим очень востребованным вариантом, чтобы человек мог взять, прочитать какой элемент куда и для чего поместить и сделать, не вникая в особенности, но понимая общую концепцию?

Link to comment
Share on other sites

  • 0
можете дать хороший вариант? почему нельзя сделать урок на сайте с этим очень востребованным вариантом, чтобы человек мог взять, прочитать какой элемент куда и для чего поместить и сделать, не вникая в особенности, но понимая общую концепцию?

Нет проблем, лови. :)

Link to comment
Share on other sites

  • 0

Когда-то для подобных целей нарисовал такой скриптик:

<html>
<head>
<script type="text/javascript">
function pokaz(descr){
var vid = document.getElementById(descr).style;
if (vid.display == "none") {vid.display = "inline"; }
else {vid.display = "none";}
}
</script>
</head>
<body>
<span><a href="#" onClick="pokaz('des1')">1.Ссылка</a>
<div id="des1" style="display: none">
-текст...</br>
-текст...</br>
-текст...</br>
<a href=...>Ссылка на 1-е занятие</a>
-текст...</br>
-текст...</br>
</div></span>
</br><a href="#" onClick="pokaz('des2')"> 2.Ссылка*</a></br>
<div id="des2" style="display: none">
- текст-ссылка текст</br>
- текст-ссылка текст</br>
- текст-ссылка текст</br>
<a href=...> *-ссылка</a></br>
текст
</div>
<a href="#" onClick="pokaz('des3')">3.Ссылка</a><br>
<div id="des3" style="display: none">
текст</br>
текст</br>
</div>
4.Текст</br>

</div>
</body>
</html>

Link to comment
Share on other sites

  • 0
можете дать хороший вариант? почему нельзя сделать урок на сайте с этим очень востребованным вариантом, чтобы человек мог взять, прочитать какой элемент куда и для чего поместить и сделать, не вникая в особенности, но понимая общую концепцию?

потому что незачем придумывать велосипед.

http://habrahabr.ru/blogs/jquery/38208/#

Link to comment
Share on other sites

  • 0
jQuery (javascript)

<script type="text/javascript" src="js/jQuery1.4.1.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$('a.example').click(function() {

$('p.example').toggle('fast');

return false;

});

});

</script>

HTML

<a class="example" href="#">пример</a>

<p class="example">

Введите в строке «Адрес» <span class="code">%appdata%</span> и нажмите Enter<br /><br />

<img border="0" src="http://quake-live.ucoz.ru/img/article/install/adress_row.jpg" /><br /><br />

После этого попадете в папку текущего пользователя, у меня это<br /><br />

<img border="0" src="http://quake-live.ucoz.ru/img/article/install/adress_row2.jpg"><br /><br />

В нее и извлекайте архив.<br />

</p>

Стили

<style type="text/css">

a.example {border-bottom:1px dashed #8C8C9C;text-decoration:none;}

p.example {display:none;padding-left:20px;}

</style>

Живой пример: Quake-Live.ucoz.ru/index/Download_QuakeLive/0-6

спасибо конечно)) но не могу настроить

javascript закидовать между head? или создовать файл и сохраться в на сайте. просто обьясните куда вставлять java csript

Link to comment
Share on other sites

  • 0

все разобрался.надо было скачать свкжый js

сделал два сполера. открываю один и кто муже открываються все. как сделать чтоб один открывался?

ЗЫ. зарание спасибо

Edited by juNk3r
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy