Раскрывающаяся форма справа 2

by AJIEKCEU

HTML

<div class="feed_back feed_back_b ">
			<div class="feed_back__left js_feed_back_t">
				<div class="feed_back_t">Поддержка</div>
			</div>
			<div class="feed_back__right feed_back_form js_f_feed_back">
				<div class="feed_back__right_wr">
					<div class="feed_back_f">
						<div class="feed_back_form_t">Связаться со <span class="txt__bold">службой поддержки</span></div>
						<form action="" class="feed_back_form">

							<div class="feed_back_it_wr cl feed_back_row">
								<input class="feed_back_it_black it feed_back_it" placeholder="Тема сообщения" name=""  type="text"/>
							</div>

							<div class="feed_back_it_wr cl feed_back_row">
								<select name="" class="feed_back_it_black feed_back_select">
			                        <option class="feed_back_type_i" value="" selected="" >Тип сообщения</option>
			                        <option class="feed_back_type_i" value="">Нужна помощь</option>
			                        <option class="feed_back_type_i" value="">Вопрос по обмену/возврату авиабилета</option>
			                        <option class="feed_back_type_i" value="">Сообщение об ошибке на сайте</option>
			                        <option class="feed_back_type_i" value="">Выразить претензию</option>
			                        <option class="feed_back_type_i" value="">Сотрудничество</option>
			                    </select>
							</div>

							<div class="feed_back_it_wr cl feed_back_row feed_back_it_black feed_back_textarea_b">
								<textarea class="it feed_back_textarea" placeholder="Текст сообщения" name=""></textarea>
								<div class="feed_back_file feed_back_file_b">
									<a href="" class="feed_back_file_a hide">Прикрепить файл</a>
									<div class="feed_back_file_wr">
										<input type="file" name=""  class="feed_back_file_it" value="">
									</div>
								</div>
							</div>

							<div class="feed_back_it_wr cl feed_back_row">
								<input class="feed_back_it feed_back_it_black it" placeholder="Ваш e-mail"...

CSS

@charset "utf-8";
/*----------------------------------
* el   element,			i    item,			tx 	 text,				ico  icon,			sp 	sprite,
* nav  navigation,		cl   clear,			col  column,			cnt  content,
* img  image,			a    link,			act  active,			er   error,
* d    date,			b    block,			js   java scripts,		pgn  pagination,
* brd  breadcrumb,		dsc  desriptiton,	it   input text,		is 	 input submit,
* itx  textarea,		ir   input radio,	ic   input checkbox		frm  form,
*----------------------------------*/


/*----------------------------------
 *  Reset
 *----------------------------------*/
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
hr{border:0;border-top:1px solid #ccc;display:block;height:1px;margin:1em 0;padding:0;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;}
input[type="text"]:focus{outline:none;}
ol,ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
a img{border:none;-ms-interpolation-mode:bicubic;}
button, input[type="submit"]{background-color:transparent;border:0;}
audio, canvas, video...

JavaScript

/*----------------------------------
 *  Feed Back form
 *----------------------------------*/
(function(){

    var feed_back_form = {
        init: function(){
            this.setUpListeners();
        },

        feed_back_t: $(".js_feed_back_t"),
        f_feed_back_btn: $(".js_f_feed_back_btn"),
        f_feed_back_show: $(".js_f_feed_back_show"),
        f_feed_back: $(".js_f_feed_back"),
        stat: null,

        setUpListeners: function(){
            this.f_feed_back_btn.on('click', $.proxy(this.toggleFormShowOrHide, this));
            this.f_feed_back_show.on('click', $.proxy(this.toggleFormShowOrHide, this));
            this.feed_back_t.on('click', $.proxy(this.slideFeedBackForm, this));
        },
        slideFeedBackForm: function(e) {
                if(!this.stat){
                    this.f_feed_back
                        .stop(true, false)
                        .animate({
                            width: 336
                        }, 1000 );
                    this.stat = 1;
                } else{
                    this.f_feed_back
                        .stop(true, false)
                        .animate({
                            width: 0
                        }, 1000 );
                    this.stat = null;
                }
            e.preventDefault();
        },
        toggleFormShowOrHide: function(e) {
            this.f_feed_back.toggleClass('feed_back_form');
            e.preventDefault();
        }
    }

    feed_back_form.init();
 
}());