Javascript-форум - подскажите скрипт для сворачивания текста

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - подскажите скрипт для сворачивания текста (https://javascript.ru/forum/misc/48934-podskazhite-skript-dlya-svorachivaniya-teksta.html)

подскажите скрипт для сворачивания текста

Здравтсвуйте. Подскажите JQuery скрипт для свертки/развертки текста.
Вроде нашел что-то похожее: roothelp.ru/lessons_post.php?id=26, но в исходниках нет сайта автора, следовательно и документации нет, а мне нужно не совсем то, что нужно в "уроке".
Мне нужно, чтобы был полуразвернутый div с кнопкой внизу типа "больше параметров" и соответвенно при нажатии разворачивался и показывал все доступные параметры и наоборот.

задайте блоку overflow: hidden и изменяйте его высоту от фиксированного значения до auto и наоборот.

Моих скиллов хватает, чтобы подпилить готовые скрипты по инструкциям, но не написать новые.

Исход на днях я нашел на просторах интернета у меня работает....

Иногда есть необходимость показать какой-либо текст нажав на ссылочку, при этом не перезагружая страницу. Сделать это легко с помощью 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">

Sonnic, я писал, что у меня не работает? Нет! Я писал, что мне нужно кое-что немного другое. Возможно и этот скрипт мог бы выполнить то же самое, но мануала нет, а есть только небольшой "урок".

<style>
#spoiler {
 overflow: hidden;
 height: 30px;
 line-height: 15px;
}
#spoiler.active {
 height: auto;
}
</style>
<div id="spoiler">
немного параметров<br>
еще чуть-чуть параметров<br>
больше параметров<br>
еще больше параметров<br>
намного больше параметров<br>
</div>
<button onclick="document.getElementById('spoiler').className='active'; this.style.display = 'none'">больше параметров</button>

Спасибо за код, правда почему-то нужного эффекта не происходит: кнопка пропадает, класс вроде тоже привязывается, но перерендера окна не происходит. height: auto! important; не помогает

frenzy,
Используйте jQuery и будет вам счастье. То что вам нужно там есть, называется slideDown, slideUp или slideToggle. И документации навалом.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
  #spoiler div {
    display: none
  }
</style>
<div id="spoiler">
немного параметров<br>
еще чуть-чуть параметров<br>
  <div>
    больше параметров<br>
    еще больше параметров<br>
    намного больше параметров<br>
  </div>
</div>
<button>больше параметров</button>
    <script>
      $("button").click(function () {
          $("#spoiler div").slideToggle();
      })
    </script>

Ыгы, работает. Только мне ж нужно из позиции
overflow: hidden;
height: 500px;
В height: auto; попасть, а эта функция похоже переключает display:none/block.
Я же писал, что display: none; - это не мой вариант, иначе я бы просто воспользовался скриптом, который сам и нашел в начале.