Аккордеон

@Dzvene · Регистрация: 27.09.2013

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

Подскажите,как сделать аккордеон открывающийся влево, при этом чтобы все его элементы также плавно открывались влево.
Вот что пока сделал:

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="help_me">
        <a class="masseg_for_admin" href="#"></a>
        <div class="help_block">
            <form class="help_form">
                <textarea class="help_ques_txt" cols="" rows="" value="текст сообщения"  onfocus="if(this.value=='текст сообщения')this.value=''" onblur="if(this.value=='')this.value='текст сообщения'"></textarea>
                <input class="help_input_txt" type="email" name="email_help" value="оставьте Ваш e-mail" onfocus="if(this.value=='оставьте Ваш e-mail')this.value=''" onblur="if(this.value=='')this.value='оставьте Ваш e-mail'">
                <input class="button_question-help" type="submit" value="Отправить">
            </form>
        </div>
    </div><!--help_me-->

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.help_me{
    overflow: hidden;
    position: fixed;
    top: 158px;
    right: 0;
}
.masseg_for_admin{
    color: #3f3a2c;
    background: url("../images/bg_mass_admin.png") no-repeat center;
    display: block;
    width: 38px;
    height: 295px;
    float: left;
    background:red;
}
.help_block{
    display: none;
    float: right;
    height: 258px;
    position: relative;
    width: 260px;
    z-index: 2147483647;
    padding: 18px 12px;
    background: #ef9134;
    border-top: 1px solid #c97929;
    border-botom: 1px solid #c97929;
}
.help_ques_txt {
    height: 180px;
    width: 99%;
    padding: 4px 0 4px 1%;
    font-size: 12px;
    color: #969696;
    border: none;
}
.help_input_txt {
    height: 20px;
    margin: 10px 0;
    width: 99%;
    padding: 4px 0 4px 1%;
    font-size: 12px;
    color: #969696;
    border: none;
}
.button_question-help{
    background: #fa8104;
    border: none;
    color: #ffffff;
    cursor: pointer;
    margin-top: 5px;
    padding: 5px 15px;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function accordion() {
        var accLink = $('.masseg_for_admin');
 
        accLink.click(function (e) {
            e.preventDefault();
 
            var currentLinkParent = $(this).parent();
            if (currentLinkParent.hasClass('active')) {
                currentLinkParent.removeClass('active');
                currentLinkParent.find('.help_block').slideUp('10');
 
            } else {
                currentLinkParent.addClass('active');
                currentLinkParent.find('.help_block').slideDown('10');
 
            }
        });
    }

Вот для наглядности:

http://jsfiddle.net/dzvene/x2Lvc/

@Faust971 · 27.05.2014, 08:37

Вот тут есть интересные варианты:
http://kotweb.ru/for_web_devel... sayta.html

Сегодня сил нет уже код смотреть.

Добавлено через 8 часов 26 минут
Накидал немного то?

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="help_me">
        <a class="masseg_for_admin" href="#"></a>
        <div class="help_block">
            <form class="help_form">
                <textarea class="help_ques_txt" cols="" rows="" value="текст сообщения"  onfocus="if(this.value=='текст сообщения')this.value=''" onblur="if(this.value=='')this.value='текст сообщения'"></textarea>
                <input class="help_input_txt" type="email" name="email_help" value="оставьте Ваш e-mail" onfocus="if(this.value=='оставьте Ваш e-mail')this.value=''" onblur="if(this.value=='')this.value='оставьте Ваш e-mail'">
                <input class="button_question-help" type="submit" value="Отправить">
            </form>
        </div>
    </div><!--help_me-->

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.help_me{
    overflow: hidden;
    position: fixed;
    top: 158px;
    right: 0;
}
.masseg_for_admin{
    color: #3f3a2c;
    background: url("../images/bg_mass_admin.png") no-repeat center;
    display: block;
    width: 38px;
    height: 295px;
    float: left;
    background:red;
}
.help_block{
   display:none;
    float: right;
    height: 258px;
    position: relative;
    width: 0px;
    z-index: 2147483647;
    padding: 18px 12px;
    background: #ef9134;
    border-top: 1px solid #c97929;
    border-botom: 1px solid #c97929;
}
.help_ques_txt {
    height: 180px;
    width: 99%;
    padding: 4px 0 4px 1%;
    font-size: 12px;
    color: #969696;
    border: none;
}
.help_input_txt {
    height: 20px;
    margin: 10px 0;
    width: 99%;
    padding: 4px 0 4px 1%;
    font-size: 12px;
    color: #969696;
    border: none;
}
.button_question-help{
    background: #fa8104;
    border: none;
    color: #ffffff;
    cursor: pointer;
    margin-top: 5px;
    padding: 5px 15px;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 $(document).ready(function () {
     accordion();
 });
 
function accordion() {
        var accLink = $('.masseg_for_admin');
 
        accLink.click(function (e) {
            e.preventDefault();
 
            var currentLinkParent = $(this).parent();
            if (currentLinkParent.hasClass('active')) {
                currentLinkParent.removeClass('active');
                currentLinkParent.find('.help_block').animate({width:0},1000, function(){$(this).css('display','none');});
 
            } else {
                currentLinkParent.addClass('active');
                currentLinkParent.find('.help_block').css('display','block').animate({width:"600px"},1000);
 
            }
        });
    }

http://jsfiddle.net/x2Lvc/2/

Добавлено через 53 секунды
Единственное что с паддингами ещё решить вопрос надо.

@Dzvene · 27.05.2014, 11:22 **[ТС]**

Спасибо!)

Новые блоги и статьи Все статьи Все блоги /
Автозаполнение реквизитов при создании документа Maks 26.03.2026 Код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки на предмет заполнения реквизитов реализован с целью установки значения по умолчанию,. . .	Команды "Заполнить" и "Очистить" на форме документа Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". На примере нетипового документа разработанного в конфигурации КА2. В качестве источника данных указан регистр накопления, в который записываются данные о. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .
модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip	Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .

@Dzvene 11 / 11 / 5 Регистрация: 27.09.2013 Сообщений: 278
	27.05.2014, 11:22 [ТС]
	Спасибо!) 0