На странице слева раздвигающийся влево\вправо лифт как в файле справки

@Ципихович Эндрю · Регистрация: 10.04.2009

Студворк — интернет-сервис помощи студентам

Здравствуйте как сделать?

Добавлено через 11 часов 42 минуты
вот здесь http://jsfiddle.net/ZZszj/23/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
            <ul>
                <li><span class="click">List1</span>
                <div class="block">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nibh non eros scelerisque blandit ut quis sapien. Phasellus quis ultrices turpis. Vestibulum facilisis convallis lorem, at fermentum libero sagittis at. 
        </div>
    </li>
 
               <li><span class="click">List2</span>
                <div class="block">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nibh non eros scelerisque blandit ut quis sapien. Phasellus quis ultrices turpis. Vestibulum facilisis convallis lorem, at fermentum libero sagittis at. 
        </div>
    </li>
     <li><span class="click">List3</span>
         <div class="block">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nibh non eros scelerisque blandit ut quis sapien. Phasellus quis ultrices turpis. Vestibulum facilisis convallis lorem, at fermentum libero sagittis at. 
        </div>
    </li>
            </ul>

CSS
1
2
3
4
5
6
7
8
.block {
    display: none;
}
 
.click {
    font-weight: bold;
    cursor: pointer;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(function(){       
    $('.click').click(function(){
            var block$ = $(this).closest('li').find('.block');
                if (block$.is(':hidden')) {
                    block$.show();
                }
                else {
                    block$.hide();
                }
            });
});

как сделаны области, которые мышью зацепляешь и двигаешь?

Комментарий модератора

Правила форума пункт 5.19

Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.

@Forastero · 07.07.2013, 11:13

Это называется двойной панелью, или Splitter.

В сети есть плагины. Вот, пример работы: http://methvin.com/splitter/vsplitter.html

И здесь же инструкции на все случаи: http://methvin.com/splitter/

Можно, конечно, и другой плагин поискать. Этот наверняка устарел.

@Ципихович Эндрю · 07.07.2013, 11:44 **[ТС]**

да, спасибо оно, спасибо, есть ссыль на адекватный пример в одном файле?

@Forastero · 07.07.2013, 12:34

Вот здесь посмотри. Читал эту статью недавно. Хоть и перевод, но читается легко.

http://novice2ninja.ru/ninja-b... itter.html

@Ципихович Эндрю · 07.07.2013, 19:54 **[ТС]**

как бы я нашёл, код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<!--html5-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Vertical splitter</title>
 
</head>
<body>
 
<div id="MySplitter">
 
    <div id="LeftPane">
        <p>Левая</p>
    </div>
    
    <div id="RightPane">
        <p>Правая</p>
    </div>
 
</div>
</body>
</html>

помогите дополнить кодом css и js чтобы всё было в одном файле на одну страницу и работало

@Ruisenor · 10.07.2013, 00:35

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

Вот здесь посмотри. Читал эту статью недавно. Хоть и перевод, но читается легко. http://novice2ninja.ru/ninja-b... itter.html

Вот же вам дали страницу на ней есть и хтмл и css и js - а внизу этой страницы можно исходники скачать полностью . Теперь вижу что вам нужно было .

Добавлено через 2 минуты
в изходнике все файлы вместе .

Новые блоги и статьи Все статьи Все блоги /
Звёздная пыль kumehtar 20.06.2025 Я просто это себе представляю: как создавался этот мир. Как энергия слипалась в маленькие частички. Как они собирались в первые звёзды, как во вселенной впервые появился Свет. Как эти звёзды. . .	Создание нейросети с PyTorch AI_Generated 19.06.2025 Ключевое преимущество PyTorch — его питоновская натура. В отличие от TensorFlow, который изначально был построен как статический вычислительный граф, PyTorch предлагает динамический подход. Это. . .	JWT аутентификация в ASP.NET Core UnmanagedCoder 18.06.2025 Разрабатывая веб-приложения, я постоянно сталкиваюсь с дилеммой: как обеспечить надежную аутентификацию пользователей без ущерба для производительности и масштабируемости? Классические подходы на. . .	Краткий курс по С# aaLeXAA 18.06.2025 Здесь вы найдете все необходимые функции чтоб написать програму на C# Задание 1: КЛАСС FORM 1 public partial class Form1 : Form { Spisok listin = new Spisok(); . . .	50 самых полезных примеров кода Python для частых задач py-thonny 17.06.2025 Эффективность работы разработчика часто измеряется не количеством написаных строк, а скоростью решения задач. Готовые сниппеты значительно ускоряют разработку, помогают избежать типичных ошибок и. . .
C# и продвинутые приемы работы с БД stackOverflow 17.06.2025 Каждый . NET разработчик рано или поздно сталкивается с ситуацией, когда привычные методы работы с базами данных превращаются в источник бессонных ночей. Я сам неоднократно попадал в такие ситуации,. . .	Angular: Вопросы и ответы на собеседовании Reangularity 15.06.2025 Готовишься к техническому интервью по Angular? Я собрал самые распространенные вопросы, с которыми сталкиваются разработчики на собеседованиях в этом году. От базовых концепций до продвинутых. . .	Архитектура Onion в ASP.NET Core MVC stackOverflow 15.06.2025 Что такое эта "луковая" архитектура? Термин предложил Джеффри Палермо (Jeffrey Palermo) в 2008 году, и с тех пор подход только набирал обороты. Суть проста - представьте себе лук с его. . .	Unity 4D GameUnited 13.06.2025 Четырехмерное пространство. . . Звучит как что-то из научной фантастики, правда? Однако для меня, как разработчика со стажем в игровой индустрии, четвертое измерение давно перестало быть абстракцией из. . .	SSE (Server-Sent Events) в ASP.NET Core и .NET 10 UnmanagedCoder 13.06.2025 Кажется, Microsoft снова подкинула нам интересную фичу в новой версии фреймворка. Работая с превью . NET 10, я наткнулся на нативную поддержку Server-Sent Events (SSE) в ASP. NET Core Minimal APIs. Эта. . .

@Forastero 562 / 339 / 87 Регистрация: 15.05.2013 Сообщений: 812 Записей в блоге: 1
	07.07.2013, 11:13
	Это называется двойной панелью, или Splitter. В сети есть плагины. Вот, пример работы: http://methvin.com/splitter/vsplitter.html И здесь же инструкции на все случаи: http://methvin.com/splitter/ Можно, конечно, и другой плагин поискать. Этот наверняка устарел. 1

@Ципихович Эндрю 1699 / 568 / 74 Регистрация: 10.04.2009 Сообщений: 9,236
	07.07.2013, 11:44 [ТС]
	да, спасибо оно, спасибо, есть ссыль на адекватный пример в одном файле? 0

@Forastero 562 / 339 / 87 Регистрация: 15.05.2013 Сообщений: 812 Записей в блоге: 1
	07.07.2013, 12:34
	Вот здесь посмотри. Читал эту статью недавно. Хоть и перевод, но читается легко. http://novice2ninja.ru/ninja-b... itter.html 1

Опции темы