Здравствуйте, Подскажите или посоветуйте, как сделать чтобы скрывать-сворачивать часть большого текста на странице, а потом, нажав на какую-нибудь кнопку(ссылку), разворачивать его и читать на этой же странице. Я такое видел на разных сайтах. Стоит ссылочка под куском текста, кликаешь на нее, и тут же раскрывается остальная часть. Заранее спасибо! Для примера Код (Text): php $large_text; // Принимает очень большой текст
слыхал =))) Все обрил не могу найти... До нажатия текст имеет вид: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... Текст после того как раскрылся: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. То-есть нужно что бы строка была цельная(продолжалась), а не начиналась с новой строки !
Спасибо может где есть пример как это сделать. И еще нужно сменить текст в силке Expand this post на Collapse this post и наоборот Добавлено спустя 31 минуту 12 секунд: Сделал следующее Код (Text): <script type="text/javascript"> $(document).ready(function() { var showText="Show"; var hideText="Hide"; $('.toggle').hide(); $('a.toggleLink').click(function() { if ($(this).html()==showText) { $(this).html(hideText); } else { $(this).html(showText); } $(this).parent().prev('.toggle').toggle('slow'); return false; }); }); </script> <p class="cool"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <span style="display: none;" class="toggle">ddddddddddddddddddddddddd</span> <p><a href="#" class="toggleLink">Show</a></p> </p> Все прекрасно работает пока отсутствует <p class="cool"> Как сделать что бы оно искало через функцию find() или другим образом, что бы работало.
Не тут то было ... Появилась такая проблема... Дополнительный текст для страницы который подгружается с базы(по мере необходимости), имеет функцию скрывать-сворачивать часть текста. В некоторых случаях почему то не работает функция скрывать-сворачивать... Как выловить или проверить что выдает (принимает) эта функция, через алерт по клику ? Не могу понять с чем функция конфликтует ... можно ли это проверить ? Код (Text): <script type="text/javascript"> $(document).ready(function() { var showText="Expand this post"; var hideText="Collapse this post"; $('.togglel').hide(); $('a.toggleLinkl').click(function() { if ($(this).html()==showText) { $(this).html(hideText); } else { $(this).html(showText); } $(this).parent().parent().find('.togglel').toggle(); // alert ($(this).parent().parent().find('.togglel').attr('class')); Проверял так вроде находит нужный класс. return false; }); }); </script> <p class="cool"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <span style="display: none;" class="togglel">ddddddddddddddddddddddddd</span> <p><a href="#" class="toggleLinkl">Show</a></p> </p> ЗЫ: Когда проверял через алерт, работало следующем образом ... Когда кликаю на Show : - Открыло дополнительный текст - закрыло - Открыло - закрыло - Открыло - закрыло Возможно оно не может что то найти. Как сделать что бы оно работало по уникальному id=''
лучше использовать parents(selector) , вдруг будете вёрстку изменять - будет не весело переделывать js глючить может из-за toggle , если его вызвать 2 раза , то он и поставится 2 раза , так что проверьте может ли он прикрепляться ещё раз. лично я убираю тоглы из-за подобных багов и не использую вообще. в общем глючить может именно прикреплённый toggle Добавлено спустя 13 минут 46 секунд: Не признаю тоггл , на сайте с аяксовой загрузкой страниц с ним хорошие приколы бывают Вот вариант без тоггла , ну и сравнение текста ссылки с текстом переменной как-то не гуд , вдруг захотите переименовать ссылку - в яваскрипте тоже прийдётся. молчу про мультиязычность. делать действия нужно в зависимости от эл-та Код (Text): $(document).ready(function() { var showText="Expand this post"; var hideText="Collapse this post"; $('a.toggleLinkl').click(function() { if ($('.togglel').css('display')=='none') { $(this).html(hideText); $('.togglel').show(); } else { $(this).html(showText); $('.togglel').hide(); } }); });
.Click() вешается на те элементы, которые существовали в момент вешанья. для автоматического навеса функции на события еще не существующих элементов юзают c недавних пор вроде как http://api.jquery.com/on/
Вся проблема в том, что в файле подгрузки текста присутствует этот скрипт. При каждой подгрузке текста, скрипт вызывается по несколько раз, поэтому все путается. Подскажите как решить эту проблему? Может можно сделать через append()... ЗЫ: В файле подгрузки есть еще скрипт, с ним никаких проблем нет... Код (Text): <script type="text/javascript"> $(document).ready(function(){ $('.cank').hover( function(){ $(this).find('.lfowf').css({"visibility":"visible"}); }, function(){ $(this).find('.lfowf').css("visibility", "hidden"); } ); }); </script>