JSFiddle - React, Tailwind, and code Playground
HTML
<div id="slide" class="sticker1">
<div class="block">123456</div>
<div class="btn">Авторизация</div>
</div>
<div id="slide" class="sticker2">
<div class="block"><?php get_search_form(); ?></div>
<div class="btn">Поиск</div>
</div>
CSS
/*stiker*/
.sticker1, .sticker2 {
position:relative;
width:290px;
}
.sticker1 {
float:left;
}
.sticker1 a, .sticker2 a {
color: #627CD2;
}
.sticker2, .sticker2 .btn {
float:right;
right:150px;
}
.sticker1 .btn, .sticker2 .btn {
background-image: url(../maidenhair/images/arr1.png);
background-repeat: no-repeat;
background-position:160px center;
}
.sticker3 {
float:left;
z-index:600;
position:absolute;
margin-top: 120px;
font-size: 16px;
}
.third {
background: none repeat scroll 0 0 transparent !important;
position: relative;
}
.sticker3 .btn {
width:50px !important;
height:50px !important;
float:right;
background-image: none !important;
border-radius: 0px 5px 5px 0px !important;
}
.sticker3 .block {
float: left;
width:450px;
}
.opened {
background-image: url(../maidenhair/images/arr2.png) !important;
}
.closed {
position:relative;
left:-450px;
}
.button, .readmore {
background-color: #7F97E7;
border: medium none;
color: #FFFFFF;
padding: 5px;
cursor: pointer;
}
.inputbox {
width: 200px;
}
#slide .btn{
height: 25px;
width: 180px;
background-color: #C4DAF2;
border-radius: 0 0 5px 5px;
color: #627CD2;
text-align:center;
cursor:pointer;
position: absolute;
z-index: 13;
}
#slide .block {
height: auto;
background-color: #C4DAF2;
display:none;
padding: 5px;
}
#slide .block li {
list-style:none;
}
JavaScript
$(document).ready(function(){
$('.sticker1 .btn, .sticker2 .btn').click(function(){
$(this).prev('div').animate({height: 'toggle'}, 300)
$(this).toggleClass('opened');
});
$('.sticker3 .btn').click(function(){
$(this).prev('div').animate({width: 'toggle'}, 500)
$(this).toggleClass('opened');
})
})