Javascript-форум - раскрывающиqся свиток, пример использования

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

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - раскрывающиqся свиток, пример использования (https://javascript.ru/forum/dom-window/46474-raskryvayushhiqsya-svitok-primer-ispolzovaniya.html)

раскрывающиqся свиток, пример использования

Подскажите пожалуйста примеры сайтов или лучше сразу Js или css код для создания эффекта раскрывающихся свитка на сайте.

Без флеша, свиток представляет из себя некий div элемент который при клике должен плавно разворачиваться, но не просто в бок выезжать, а действительно разворачиваться.

Уже весь нет перерыл, можно нонечно использовать новые свойства CSS для трансформации объектов, но это не подходит так как мало где будет работать

tribatar,
Вы даже непредставляите столько сотен спойлеров этом форуме.

Можете привести пример?

tribatar,

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>tabs demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>

<body>
  <div id="tabs">
    <ul>
      <li>
        <a href="#fragment-1"><span>One</span></a>
      </li>

      <li>
        <a href="#fragment-2"><span>Two</span></a>
      </li>

      <li>
        <a href="#fragment-3"><span>Three</span></a>
      </li>
    </ul>

    <div id="fragment-1">
      <p>First tab is active by default:</p>
      <pre>
<code>$( "#tabs" ).tabs(); </code>
</pre>
    </div>

    <div id="fragment-2">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
      tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
      aliquam erat volutpat.
    </div>

    <div id="fragment-3">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
      tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
      aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
  </div><script>

  $( "#tabs" ).tabs({collapsible: true ,show: { effect: "blind", duration: 800 }, hide: { effect: "blind", duration: 800 }});

  </script>
</body>
</html>

Вы меня не поняли, возможно моя вина, мне нужен не спойлер, а разворачивающийся свиток

tribatar,
что значит разворачиваться - можно пример?
http://api.jquery.com/slideDown/

Вы хотите чтоб мы за вас анимацию развёртывания нарисовали? Губа не дура. Не зависимо от способа реализации - это вопрос далеко не пары строчек кода.

Я не прошу написать скрипт анимации за меня, я прошу помочь найти пример подобного свитка, пример http://codepen.io/thebabydino/pen/kugzo что то на подобии такого

Ну вот вы нашли, допиливайте для себя. И не смотрите что код коротенький - итоговый css портянка на 2000 строк. Наркоман какой-то это писал, имхо.)

Данная реализация основана на css следовательно заставить это работать на старых устройствах будет проблемно, предпочтительней js без новшеств css типа tranform rotate и прочего

Ну рисуйте тогда раскадровку и анимируйте через js. Мы за вас этого не сделаем. Даже если случится чудо и вы найдёте что-то похожее, то рисовать всё равно придётся.

Первичный набросок codepen.io/tribatar/full/ozdxg
Все таки это не гут...

tribatar, бросай это дело. В css нет средств для реализации такой идеи. Здесь - костыльное решение just for lulz.

autodromo,

Цитата:

Сообщение от рони

на форуме много ...очень много подобных примеров ...

http://javascript.ru/forum/jquery/46...-dropdown.html

autodromo,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Пример с табами, как раз почти то, что я ищу, только я в js вообще не занимался, и в подключаемом jquery-ui совсем под свою задачу не смогу подпилить код. А задача очень похожа на те табы.

Задача: например есть 3 ссылки в ряд, но по умолчанию они "захлопнуты"(display:none).
1 - Нажатие на любую ссылку, делает активной ссылке highlight и "разворачивает" под ней информацию;

2- Повторный клик на активную захлопывает её, так же активную (текущую) ссылку должен захлопывать клик на любую другую ссылку и разворачивать в тот же момент содержание нажатой ссылки ну и естественно highlight уже у другой активной.

Пока я реализовал только закрытие/открытие по одной и той же ссылке, а вот как сделать подсветку активной и захлопывать ее еще и по нажатию другой ссылки для меня проблема. Может поможете?

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" 
</head>
<body>

<div class="links">
<a id="1" class="pseudo-link" href="#">link1</a>
<a class="pseudo-link align" href="#" id="2">link2</a> 
<a class="pseudo-link align" href="#" id="3">link3</a>

<div id="1-1" class="hidden-text">Текст1</div>
<div id="2-2" class="hidden-text">Текст2</div>
<div id="3-3" class="hidden-text">Текст3</div>
</div>
</body>
</html>

.pseudo-link {
text-decoration: none;
border-bottom: 1px dashed #999;
display:inline;
}

.hidden-text {
display: none;
padding-top: 10px;
font-size: .9em
}
.align {margin-left: 15px}

$("#1").click(function(){
$("#1-1").slideToggle("slow");
});
$("#2").click(function(){
$("#2-2").slideToggle("slow");
});
$("#3").click(function(){
$("#3-3").slideToggle("slow");
});

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<style>
.pseudo-link {
text-decoration: none;
border-bottom: 1px dashed #999;
display:inline;
}

.hidden-text {
display: none;
padding-top: 10px;
font-size: .9em
}
.align {margin-left: 15px}
</style>

<div class="links">
<a id="1" class="pseudo-link" href="#">link1</a>
<a class="pseudo-link align" href="#" id="2">link2</a> 
<a class="pseudo-link align" href="#" id="3">link3</a>

<div id="1-1" class="hidden-text">Текст1</div>
<div id="2-2" class="hidden-text">Текст2</div>
<div id="3-3" class="hidden-text">Текст3</div>
</div>
<script language="javascript">
$("#1").click(function(){
$("#1-1").slideToggle("slow");
});
$("#2").click(function(){
$("#2-2").slideToggle("slow");
});
$("#3").click(function(){
$("#3-3").slideToggle("slow");
});
</script>
</body>
</html>

рони,
Отредактировал. Даже работает. Может можно туда пару строк кода записать под мою задачу?

Цитата:

Сообщение от autodromo

Отредактировал.

:dance:
всё же вам дали по ссылке - только своё вписать - и так ~~версия 100500~~ копипаст :cray:

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
.pseudo-link {
text-decoration: none;
border-bottom: 1px dashed #999;
display:inline;
}

.hidden-text {
display: none;
padding-top: 10px;
font-size: .9em
}
.align {margin-left: 15px}

a.active:after {
      content: "Моя нажата";
      color: #006400;
      background-color: #FFFACD;
      font-size: 90%;
      padding: 2px;
    }

</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function () {
       var $links = $(".links a"),
           $divs = $(".links div");
       $(".links").on("click", "a", function (event) {
           event.preventDefault();
           $links.not(this).removeClass("active");
           $(this).toggleClass("active");
           var indx = $links.index(this),
               div = $divs.eq(indx);
           div.slideToggle("slow");
           $divs.not(div).slideUp("slow");
       })
       $(document).on("click", function (event) {
           if ($(".links").has(event.target).length === 0) {$divs.slideUp("slow");$links.removeClass("active")}
       });
   })
  </script>
</head>

<body>
 <div class="links">
<a id="1" class="pseudo-link" href="#">link1</a>
<a class="pseudo-link align" href="#" id="2">link2</a>
<a class="pseudo-link align" href="#" id="3">link3</a>

<div id="1-1" class="hidden-text">Текст1</div>
<div id="2-2" class="hidden-text">Текст2</div>
<div id="3-3" class="hidden-text">Текст3</div>
</div>
</body>
</html>

рони,
Спасибо огромное! А как добавить background highlight у кликнутой ссылки? Или это уже может сделать css?

autodromo,
смотрите код выше

.active{}

добавлен класс для активной ссылки