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

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

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

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

Sonnic 22.07.2014 17:18
Исход на днях я нашел на просторах интернета у меня работает....

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

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

BETEPAH 22.07.2014 22:02 
<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>

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

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

tsigel 23.07.2014 15:23 
<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>

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

tsigel 23.07.2014 15:56 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
#spoiler {
 overflow: hidden;
 height: 30px;
 line-height: 15px;
}
#spoiler.active {
 height: auto;
}
</style>
<div id="spoiler">
немного параметров<br>
еще чуть-чуть параметров<br>
больше параметров<br>
еще больше параметров<br>
намного больше параметров<br>
</div>
<button>больше параметров</button>
    <script>
      $("button").click(function () {
      if ($("#spoiler").css("height") == "30px") {  
         var height = $("#spoiler").css("height", "auto").height();
         $("#spoiler").css("height", "30px")
         $("#spoiler").animate({"height": height});
     } else {
         $("#spoiler").animate({"height": "30px"});
     }
});
    </script>

frenzy 23.07.2014 16:11
Что-то не работает. Файрбаг показывает, что var height = $("#spoiler").css("height", "auto").height(); выполняется и всё, но в итоге ничего не меняется и всегда выполянется только первое условие
А нет просто стандартной функции, которая могла бы перерендерить страницу после изменения height? Анимация мне не так важна.

tsigel 23.07.2014 16:19
location.reload()

frenzy 23.07.2014 16:37
Разобрался, что-то с условным переходом не то.
Если поставить $("#spoiler").css("height") != "auto", то анимация происходит развертка, но сворачиваться не хочет. В JS точно можно просто так взять и сравнить строки?
Поалертал. В общем округлять как-то нужно, ибо alert($("#jshop_unijax_filter").css("height")); выдает 500.5164px,(в css 500px)

tsigel 23.07.2014 16:44 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
#spoiler {
 overflow: hidden;
 height: 30px;
 line-height: 15px;
}
#spoiler.active {
 height: auto;
}
</style>
<div id="spoiler">
немного параметров<br>
еще чуть-чуть параметров<br>
больше параметров<br>
еще больше параметров<br>
намного больше параметров<br>
</div>
<button>больше параметров</button>
    <script>
    (function () {
      var flag = true;

    $("button").click(function () {
      if (flag) {  
         var height = $("#spoiler").css("height", "auto").height();
         $("#spoiler").css("height", "30px")
         $("#spoiler").animate({"height": height});
     } else {
         $("#spoiler").animate({"height": "30px"});
     }

flag = !flag;

});

   })()      
    </script>

рони 23.07.2014 16:45
Цитата:
Сообщение от frenzy
$("#spoiler").css("height") != "auto"
это условие будет всегдачаще всего истинно

tsigel 23.07.2014 16:45
Строки сравнивать можно.
Если не важна анимация можно писать вместо 
$("#spoiler").animate({"height": height});

вот так
$("#spoiler").css("height", "30px");
$("#spoiler").css("height", "auto");

рони 23.07.2014 16:57
Цитата:
Сообщение от tsigel
Если не важна анимация можно
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
#spoiler {
 overflow: hidden;
 height: 30px;
 line-height: 15px;
}
#spoiler.active {
 height: auto;
}
</style>
<div id="spoiler">
немного параметров<br>
еще чуть-чуть параметров<br>
больше параметров<br>
еще больше параметров<br>
намного больше параметров<br>
</div>
<button>больше параметров</button>
    <script>
    	(function ()
    	  {
    	    var flag = true;
    	    $("button").click(function ()
    	      {$("#spoiler").toggleClass('active')
    	      }
    	    )
    	  }
    	)()
    </script>

frenzy 23.07.2014 17:04
tsigel
27 $("#spoiler").css("height", "30px") - что делает эта строчка вообще и почему нет ; изначально? Ибо я убераю и ничего не происходит.

Вообще ПОЧТИ.
(function($){
	  
	  var collapsed = false;
	  $("#showmore").click(function () {
	  alert($("#jshop_unijax_filter").css("height"));
	  if (collapsed == 0) {  
		 collapsed = true;
		 var height = $("#jshop_unijax_filter").css("height", "auto").height();
		 $("#jshop_unijax_filter").animate({"height": height});
	 } else {
		 $("#jshop_unijax_filter").animate({"height": "500px"});}
		 collapsed = false;
		 })
	  
	  })(jQuery)

Вот только collapsed на true почему-то не меняется вообще. Уж не с локальностью переменных ли проблемы?

tsigel 23.07.2014 17:12
Цитата:
Сообщение от frenzy (Сообщение 322413) 
if (collapsed == 0) {
должно быть
if (collapsed) {

frenzy 23.07.2014 17:31
Ну да, что-то я с английским затупил. Но остается программерская проблема: collapsed - локальная переменная, которая похоже обнуляется после выполнения функции и переинициализируется каждый раз

tsigel 23.07.2014 17:34 
(function($){
	  
	  var collapsed = false;
	  $("#showmore").click(function () {
	  alert($("#jshop_unijax_filter").css("height"));
	  if (collapsed) {  
		 collapsed = false;
		 var height = $("#jshop_unijax_filter").css("height", "auto").height();
		 $("#jshop_unijax_filter").animate({"height": height});
	 } else {
		 $("#jshop_unijax_filter").animate({"height": "500px"});}
		 collapsed = true;
		 })
	  
	  })(jQuery)

frenzy 23.07.2014 17:43
Да оно так и есть у меня:
<script>
      (function($){
	  
	  var collapsed = true;
	  $("#showmore").click(function () {
	  if (collapsed) {  
		 collapsed = false;
		 var height = $("#jshop_unijax_filter").css("height", "auto").height();
		 $("#jshop_unijax_filter").animate({"height": height});
	 } else {
		 $("#jshop_unijax_filter").animate({"height": "500px"});}
		 collapsed = true;
		 })
	  
	  })(jQuery)
    </script>

Но при каждом нажатии кнопки collapsed = true;, не зависимо от того, как оно было в конце исполнения предыдущей интерации. Говорю же, что переменная, похоже, локальная и дохнет сразу после исполнения.


Часовой пояс GMT +3, время: 22:47.