ksa,
HTML код
<div class="content" id="content">
<div class="calendar">
<section id="ex1">
<jdoc:include type="modules" name="navig" />
<p class="pointer">ВЫБЕРИТЕ ИНТЕРЕСУЮЩИЙ ВАС РЕЙС</p>
<div class="wrapper-demo">
<div id="d" class="wrapper-dropdown-6" tabindex="1">Календарь
<div id="informer2" class="dropdown3"></div>
</div>
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Формат мероприятия</span>
<ul id="informer" class="dropdown">
<li><a href="#"><i class="icon-envelope icon-large"></i>Текст 1</a></li>
<li><a href="#"><i class="icon-truck icon-large"></i>Текст 2</a></li>
<li><a href="#"><i class="icon-plane icon-large"></i>Текст 3</a></li>
</ul>
</div>
<div id="ddd" class="wrapper-dropdown-4" tabindex="1">
<span>Название теплохода</span>
<ul id="informer1" class="dropdown1">
<li><a href="#"><i class="icon-envelope icon-large"></i>Текст 1</a></li>
<li><a href="#"><i class="icon-truck icon-large"></i>Текст 2</a></li>
<li><a href="#"><i class="icon-plane icon-large"></i>Текст 3</a></li>
</ul>
</div>
<div class="choose"><button id="class5" class="class5">Выбрать</button></div>
</div>
</div>
</section>
</div>
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
jQuery(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = jQuery(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
jQuery(function() {
var dd = new DropDown( jQuery('#dd') );
jQuery(document).click(function() {
// all dropdowns
jQuery('.wrapper-dropdown-3').removeClass('active');
});
});
//ative1
function DropDown1(el) {
this.ddd = el;
this.placeholder = this.ddd.children('span');
this.opts = this.ddd.find('ul.dropdown1 > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown1.prototype = {
initEvents : function() {
var obj = this;
obj.ddd.on('click', function(event){
jQuery(this).toggleClass('active1');
return false;
});
obj.opts.on('click',function(){
var opt = jQuery(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
jQuery(function() {
var dd = new DropDown1( jQuery('#ddd') );
jQuery(document).click(function() {
// all dropdowns
jQuery('.wrapper-dropdown-4').removeClass('active1');
});
});
//ative2
function DropDown2(el) {
this.dddd = el;
this.placeholder = this.dddd.children('span');
this.opts = this.dddd.find('ul.dropdown2 > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown2.prototype = {
initEvents : function() {
var obj = this;
obj.dddd.on('click', function(event){
jQuery(this).toggleClass('active2');
return false;
});
obj.opts.on('click',function(){
var opt = jQuery(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
jQuery(function() {
var dddd = new DropDown2( jQuery('#dddd') );
jQuery(document).click(function() {
// all dropdowns
jQuery('.wrapper-dropdown-5').removeClass('active2');
});
});
//ative3
function DropDown3(el) {
this.d = el;
this.placeholder = this.d.children('span');
this.opts = this.d.find('ul.dropdown3 > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown3.prototype = {
initEvents : function() {
var obj = this;
obj.d.on('click', function(event){
jQuery(this).toggleClass('active3');
return false;
});
obj.opts.on('click',function(){
var opt = jQuery(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
jQuery(function() {
var d = new DropDown3( jQuery('#d') );
jQuery(document).click(function() {
// all dropdowns
jQuery('.wrapper-dropdown-3').removeClass('active3');
});
});
//Кнопка "Формат мероприяти"
jQuery(document).ready(function(){
jQuery('#dd').click(function() {
if (jQuery('.calendar').height() < 300) {
jQuery('.calendar').animate({
height: 400
}, 500)
} else if (jQuery('.calendar').height() > 300) {
jQuery('.calendar').animate({
height: 400
}, 500)
}
else {
jQuery('.calendar').animate({
height: 240
}, 500)
}
})
jQuery('body').not('#dd').click(function() {
jQuery('.calendar').animate({
height: 240
}, 500)
})
})
//Кнопка "Название теплохода"
jQuery(document).ready(function(){
jQuery('#ddd').click(function() {
if (jQuery('.calendar').height() < 300) {
jQuery('.calendar').animate({
height: 400
}, 500)
} else if (jQuery('.calendar').height() > 300) {
jQuery('.calendar').animate({
height: 400
}, 500)
}
else {
jQuery('.calendar').animate({
height: 240
}, 500)
}
})
jQuery('body').not('#ddd').click(function() {
jQuery('.calendar').animate({
height: 240
}, 500)
})
})
//Кнопка "Календарь"
jQuery(document).ready(function(){
jQuery('#d').click(function() {
if (jQuery('.calendar').height() < 300) {
jQuery('.calendar').animate({
height: 400
}, 500)
} else if (jQuery('.calendar').height() > 300) {
jQuery('.calendar').animate({
height: 400
}, 500)
}
else {
jQuery('.calendar').animate({
height: 240
}, 500)
}
})
jQuery('body').not('#d').click(function() {
jQuery('.calendar').animate({
height: 240
}, 500)
})
})