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

@Ципихович Эндрю · Регистрация: 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 минуты
в изходнике все файлы вместе .

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@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

@Ципихович Эндрю 1712 / 579 / 76 Регистрация: 10.04.2009 Сообщений: 9,328
	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