Develop Reference

How to add inline CSS to dynamically created elements with Javascript?

I would like to add inline CSS to the left and right messages that are generated, for example the left text is red and the right text is blue. (I know it's best to style in the CSS, but I'm testing something else). So I will have this HTML:
<ul class="messages">
<li class="message left appeared">
<div class="text_wrapper">
<p class="text" style="color:red;">blabla</p>
</div>
</li>
<li class="message right appeared">
<div class="text_wrapper">
<p class="text" style="color:blue;">blabla</p>
</div>
</li>
</ul>
Please see the code as reference for the functionality. Many thanks for your help.
(function() {
var Message;
Message = function({
text: text1,
message_side: message_side1
}) {
this.text = text1;
this.message_side = message_side1;
this.draw = () => {
var $message;
$message = $($('.message_template').clone().html());
$message.addClass(this.message_side).find('.text').html(this.text);
$('.messages').append($message);
return setTimeout(function() {
return $message.addClass('appeared');
}, 0);
};
return this;
};
$(function() {
var getMessageText, message_side, sendMessage;
message_side = 'right';
getMessageText = function() {
var $message_input;
$message_input = $('.message_input');
return $message_input.val();
};
sendMessage = function(text) {
var $messages, message;
if (text.trim() === '') {
return;
}
$('.message_input').val('');
$messages = $('.messages');
message_side = message_side === 'left' ? 'right' : 'left';
message = new Message({text, message_side});
message.draw();
return $messages.animate({
scrollTop: $messages.prop('scrollHeight')
}, 300);
};
$('.send_message').click(function(e) {
return sendMessage(getMessageText());
});
$('.message_input').keyup(function(e) {
if (e.which === 13) { // enter key
return sendMessage(getMessageText());
}
});
});
}).call(this);
* {
box-sizing: border-box;
}
.chat_window {
position: absolute;
width: calc(100% - 20px);
max-width: 600px;
height: 440px;
background-color: #fff;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
border: 1px solid #ddd;
overflow: hidden;
}
.messages {
position: relative;
list-style: none;
padding: 20px 10px 0 10px;
margin: 0;
height: 347px;
overflow: scroll;
}
.messages .message {
clear: both;
overflow: hidden;
margin-bottom: 20px;
transition: all 0.5s linear;
opacity: 0;
}
.messages .message.left .text_wrapper {
background-color: #ddd;
margin-left: 20px;
}
.messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before {
right: 100%;
border-right-color: #ddd;
}
.messages .message.left .text,
.messages .message.right .text {
color: #000;
margin: 0;
}
.messages .message.right .text_wrapper {
background-color: #ddd;
margin-right: 20px;
float: right;
}
.messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before {
left: 100%;
border-left-color: #ddd;
}
.messages .message.appeared {
opacity: 1;
}
.messages .message .text_wrapper {
display: inline-block;
padding: 20px;
width: calc(100% - 85px);
min-width: 100px;
position: relative;
}
.messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
top: 18px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.messages .message .text_wrapper::after {
border-width: 13px;
margin-top: 0px;
}
.messages .message .text_wrapper::before {
border-width: 15px;
margin-top: -2px;
}
.messages .message .text_wrapper .text {
font-size: 18px;
font-weight: 300;
}
.bottom_wrapper {
position: relative;
width: 100%;
background-color: #fff;
padding: 20px 20px;
position: absolute;
bottom: 0;
}
.bottom_wrapper .message_input_wrapper {
display: inline-block;
height: 50px;
border: 1px solid #bcbdc0;
width: calc(100% - 160px);
position: relative;
padding: 0 20px;
}
.bottom_wrapper .message_input_wrapper .message_input {
border: none;
height: 100%;
box-sizing: border-box;
width: calc(100% - 40px);
position: absolute;
outline-width: 0;
color: gray;
}
.bottom_wrapper .send_message {
width: 140px;
height: 50px;
display: inline-block;
background-color: #ddd;
border: 2px solid #ddd;
color: #000;
cursor: pointer;
transition: all 0.2s linear;
text-align: center;
float: right;
}
.bottom_wrapper .send_message:hover {
color: #000;
background-color: #fff;
}
.bottom_wrapper .send_message .text {
font-size: 18px;
font-weight: 300;
display: inline-block;
line-height: 48px;
}
.message_template {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat_window">
<ul class="messages"></ul>
<div class="bottom_wrapper clearfix">
<div class="message_input_wrapper">
<input class="message_input" placeholder="Type here..." />
</div>
<div class="send_message">
<div class="icon"></div>
<div class="text">
Send
</div>
</div>
</div>
</div>
<div class="message_template">
<li class="message">
<div class="text_wrapper">
<p class="text"></p>
</div>
</li>
</div>

You can also add:
$(".left").css("color", "yellow");
$(".right").css("color", "blue");

$("li.message.left > div.text_wrapper > p").css('color', 'red');
$("li.message.right > div.text_wrapper > p").css('color', 'blue');

Using jQuery you can add inline style to an element
$(".left").attr("style","whatever");
$(".right").attr("style","whatever");

You can use the classList of every HTML component. Simply, select the DOM element with class left (or right) and use the add method to assign whatever class:
var elementLeft = $('.left')
elementLeft.classList.add('yourClass')
You can also use the methods remove to remove any class, or toggle to toggle some class..
elementLeft.classList.remove('yourClass')
elementLeft.classList.toggle('yourClass')
The Element.classList contains more examples. This solution works without jQuery or others javascript library, but use the standard API.

Javascript change url onclick

I want to modify a url according to the click on the switch button (input checkbox).
I can not change the url on click as for the price. I would like that at the second click, the url (of the button) will return this initial value (url1).
The price is correct ... On click, change is good, but url is not good :/
Thank's for your help
function show() {
var x = document.getElementById("price");
if (x.innerHTML === "59€") {
x.innerHTML = "89€";
} else {
x.innerHTML = "59€";
}
var x = document.getElementById("url1").href;
if (x.href === "url1") {
document.getElementById("url1").href = "url2";
} else {
document.getElementById("url1").href = "url";
}
}
body{font-family:arial, 'sans serif';}
.btn{
background:#000;
padding:10px;
color:#fff;
text-decoration:none;
font-family:arial, 'sans serif';
margin:0 auto;
width:150px;
display:block;
text-align:center;
border-radius:10px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
h3{
text-align:center;
}
<p>Click here</p>
<label class="switch">
<input onclick="show()" type="checkbox">
<span class="slider round"></span>
</label>
<h3 class="price-presta" id="price">59€</h3>
<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->

There are 2 problems. First, here:
var x = document.getElementById("url1").href;
if (x.href === "url1") {
You put the href into the x variable, but then you try to examine the x variable's href - but strings don't have a href property. Just examine the x itself instead.
Secondly, the .href property will return the full path of the link. For example, in the Stack Snippet, it returns https://stacksnippets.net/url1. Use getAttribute instead:
function show() {
const price = document.getElementById("price");
price.textContent = price.textContent === "59€" ? "89€" : "59€";
const anchor = document.getElementById("url1");
anchor.href = anchor.getAttribute('href') === 'url1' ? 'url2' : 'url';
}
body {
font-family: arial, 'sans serif';
}
.btn {
background: #000;
padding: 10px;
color: #fff;
text-decoration: none;
font-family: arial, 'sans serif';
margin: 0 auto;
width: 150px;
display: block;
text-align: center;
border-radius: 10px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
h3 {
text-align: center;
}
<p>Click here</p>
<label class="switch">
<input onclick="show()" type="checkbox">
<span class="slider round"></span>
</label>
<h3 class="price-presta" id="price">59€</h3>
<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->

You already set the url to variable "x". So the if-condition has to be directly on the string and not the element:
//[...]
var x = document.getElementById("url1").href;
if (x === "url1") {
document.getElementById("url1").href = "url2";
}
//[...]

Perfect ! Thank you
Just ! : 'url' ? 'url2' : 'url'; VS 'url1' ? 'url2' : 'url'; :)
function show() {
const price = document.getElementById("price");
price.textContent = price.textContent === "59€" ? "89€" : "59€";
const anchor = document.getElementById("url1");
anchor.href = anchor.getAttribute('href') === 'url' ? 'url2' : 'url';
}
function show() {
const price = document.getElementById("price");
price.textContent = price.textContent === "59€" ? "89€" : "59€";
const anchor = document.getElementById("url1");
anchor.href = anchor.getAttribute('href') === 'url' ? 'url2' : 'url';
}
body {
font-family: arial, 'sans serif';
}
.btn {
background: #000;
padding: 10px;
color: #fff;
text-decoration: none;
font-family: arial, 'sans serif';
margin: 0 auto;
width: 150px;
display: block;
text-align: center;
border-radius: 10px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
h3 {
text-align: center;
}
<p>Click here</p>
<label class="switch">
<input onclick="show()" type="checkbox">
<span class="slider round"></span>
</label>
<h3 class="price-presta" id="price">59€</h3>
<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->

Checkbox ace.js (online editor)

I am using ace.js and there are some themes. The basic theme is dark theme and I have checkbox that changes themes. But first 2 times, when I click the checkbox, themes are changing, but then, they don't change. The problem is only with themes.
Thanks for your help.
var eh = ace.edit("htmlEditor");
eh.setTheme("ace/theme/monokai");
eh.session.setMode("ace/mode/html");
document.getElementById('htmlEditor').style.fontSize='15px';
var ec = ace.edit("cssEditor");
ec.setTheme("ace/theme/monokai");
ec.session.setMode("ace/mode/css");
document.getElementById('cssEditor').style.fontSize='15px';
eh.getSession().on('change', function() {
update();
})
ec.getSession().on('change', function() {
update();
})
function update() {
var res = document.getElementById('result').contentWindow.document;
res.open();
res.write('<style>' + ec.getValue() + '</style>');
res.write(eh.getValue());
res.close();
}
update();
function showTheme() {
var eh = ace.edit("htmlEditor");
var cbox = document.getElementById('checkbox');
if (cbox.checked == false) {
eh.setTheme('ace/theme/tomorrow.css');
}
else {
eh.setTheme('ace/theme/monokai');
}
}
showTheme();
*{
padding: 0;
margin: 0;
}
#htmlEditor {
height: 100%;
min-height: 50vh;
width: 33%;
display: inline-block;
}
#cssEditor {
height: 100%;
min-height: 50vh;
width: 33%;
display: inline-block;
}
#container {
height: 100%;
width: auto;
white-space: nowrap;
overflow: hidden;
position: relative;
padding: 0 0 0 1%;
}
#result {
min-height: 424px;
position: relative;
}
body {
background-color: #afafaf;
}
#title-of-textarea {
display: flex;
}
#title-css {
margin: auto;
padding-right: 35%;
}
#header-code {
display: flex;
}
.mnu-code {
display: flex;
list-style-type: none;
padding: 0 0 0 2%;
}
.mnu-code li {
padding-left: 5%;
}
#menu-code {
width: 20%;
cursor: pointer;
}
#settings {
margin: 0 0 0 auto;
padding: 0 5% 0 0;
}
#header-code {
padding: 1% 0 1% 0;
}
#set {
cursor: pointer;
}
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>
</head>
<body>
</div>
<div id="header-code">
<div id="menu-code">
<ul class="mnu-code">
<li>Проиграть</li>
<li>Сохранить</li>
<li>Поменять вид</li>
</ul>
</div>
<div id="settings">
<span id="set" onclick="openMenu()">Настройки
<p>
<label class="container">One
<input type="checkbox" id="checkbox" checked="" onclick="showTheme()">
<span class="checkmark"></span>
</label>
<p></p>
<p></p>
</span>
</div>
</div>
<div id="container">
<div id="title-of-textarea">
<div id="title-Html">
<h1>HTML</h1>
</div>
<div id="title-css">
<h1>CSS</h1>
</div>
</div>
<div id="htmlEditor"></div>
<div id="cssEditor"></div>
</div>
<iframe id="result" frameborder="0"></iframe>

Generating HTML based on search functions result

I am working in ASP.NET MVC 5 and I want to generate HTML based on the search functions result. A simple filter that filters on Title. This is how I want the accordion to look.
//Accordion-----------------------------------------------
$(".accordion-desc").fadeOut(0);
$(".accordion").click(function() {
$(".accordion-desc").not($(this).next()).slideUp('fast');
$(this).next().slideToggle(400);
});
$(".accordion").click(function() {
$(".accordion").not(this).find(".rotate").removeClass("down");
$(this).find(".rotate").toggleClass("down");
});
//-----------------------------------------------------------
body {
background-color: #eee;
font-family: "Open Sans", sans-serif;
}
header {
background-color: #2cc185;
color: #fff;
padding: 2em 1em;
margin-bottom: 1.5em;
}
h1 {
font-weight: 300;
text-align: center;
}
.container {
position: relative;
margin: 0 auto;
}
button {
background-color: #2cc185;
color: #fff;
border: 0;
padding: 1em 1.5em;
}
button:hover {
background-color: #239768;
color: #fff;
}
button:focus {
background-color: #239768;
color: #fff;
}
.accordion {
position: relative;
background-color: #fff;
display: inline-block;
width: 100%;
border-top: 1px solid #f1f4f3;
border-bottom: 1px solid #f1f4f3;
font-weight: 700;
color: #74777b;
vertical-align: middle;
}
/*Rotation-------------------------------------*/
.accordion .fa {
position: relative;
float: right;
}
.rotate {
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.rotate.down {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
/*------------------------------------------*/
.link {
text-align: right;
margin-bottom: 20px;
margin-right: 30px;
}
.accordion h4 {
position: relative;
/* top: 0.8em; */
margin: 0;
font-size: 14px;
font-weight: 700;
float: left;
}
.accordion a {
position: relative;
display: block;
color: #74777b;
padding: 1em 1em 2.5em 1em;
text-decoration: none;
}
.accordion a:hover {
text-decoration: none;
color: #2cc185;
background-color: #e7ecea;
transition: 0.3s;
}
.accordion-desc {
background-color: #f1f4f3;
color: #74777b;
z-index: 2;
padding: 20px 15px;
}
#media (min-width:480px) {
.container {
max-width: 80%;
}
}
#media (min-width:768px) {
.container {
max-width: 1000px;
}
}
.accordion-desc p {
word-break: break-all;
}
.accordion .status {
position: relative;
float: right;
right: 20%;
vertical-align: middle;
}
.btn {
margin-top: 10px;
}
.heading {
margin: 10px 0px 10px 0px;
vertical-align: middle;
display: inline-block;
position: relative;
width: 100%;
}
.heading h2 {
float: left;
position: relative;
margin: auto;
vertical-align: middle;
}
.heading .searcheBar {
float: right;
position: relative;
margin: auto;
vertical-align: middle;
}
.checkboxInput {
float: right;
position: relative;
margin: auto;
vertical-align: middle;
right: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="acc" class="accordion">
<a href="#">
<h4 id="title"></h4>
<h4 class="status">#Resource.AccordionStatus</h4>
<i class="fa fa-chevron-right rotate"></i>
</a>
</div>
<div class="accordion-desc">
<h3>#Resource.AccordionProjectLead</h3>
<h4>Kay Wiberg</h4>
<h3>#Resource.AccordionDescription</h3>
<p id="description">
<p>
<div class="link">
<a id="link" class="btn btn-success" href="">#Resource.AccordionGoTo</a>
</div>
</div>
I wanted to show a snippet of the malfunctioning code, but could not get it to work as a snippet. But here it is flat:
$("#searcheBar").on("keyup", function () {
var input = "";
input = this.value;
var strInput = globalModel;//Array from Ajax call
var accordionWrapper = document.getElementById("acc");
var myHtml = "";
for (i = 0; i < strInput.length; i++) {
if (strInput[i]["Title"].indexOf(input) > -1) {
myHtml += '<h4 id="title">' + (strInput[i]["Title"]) + '</h4><h4 class="status">#Resource.AccordionStatus</h4><i class="fa fa-chevron-right rotate"></i> </div><div class="accordion-desc"><h3>#Resource.AccordionProjectLead</h3><h4>Kay Wiberg</h4><p id ="description">' + (strInput[i]["Description"]) + '<p><div class="link"><a id="link" class ="btn btn-success" href="' + (strInput[i]["Url"]) + '">#Resource.AccordionGoTo</a></div></div>';
}
}
accordionWrapper .innerHTML = myHtml;
});//OnKey up
I am perhaps going in the wrong direction, but I wanted to try and build a search function for my self at first. What I wish is that a full list of items will be shown at first and On keyup the search function should filter the content. But if the search box is emptied the full list should reappear. I am retrieving the content with an Ajax call that returns an array. As of now i am not populating the code with data on initial load of the dom. Was going to use the same idea as this , but this method messes up the classes and click event.

Is the last line supposed to be
accordionWrapper.innerHTML instead of accordion.innerHTML?

You can pass the event object into the function:
$("#searcehBar").on("keyup", function (evt) {
var input = "";
input = evt.target.value;
...

Solved it. went back to my initial build with strongly typed model and the using jquery to .show() and hide() the element. fadeIn(), fadeOut()
$("#searcheBar").on("keyup", function () {
var g = $(this).val().toLowerCase();
$(".accordion #title").each(function () {
var s = $(this).text().toLowerCase();
if (s.indexOf(g) !== -1) {
$(this).parent().parent().fadeIn();
}
else {
$(this).parent().parent().fadeOut();
}
});
});

How to Create a Customized Search Function for Shortcut

Goal:
When you click on the button with icon reading-glass a, a text field should be entering from right to left.
After you have pressed the button, the cursor should be located in the text field and to be ready to retrieve input data and a color frame around the button for instance yellow should appear.
When you use to the curser outside of the text field and suddently you press the left button of your mouse, the text field and the yellow color around the button should disappear.
Problem:
I do not now how to create it.
Info:
*I'm using bootstrap and jQuery.
*Today, I do not have a available sourcecode.

What you need is two actions on your button:
show the input field
fire the form
The code below does that. The input will have a zero width on page load. The jQuery functions binds a click event on the button.
When it's clicked it will look if the input field has a width. When not, it will prevent the default action (submitting the form), and instead animates the input to a width of 200px. After that it focuses on the field.
The second time you click on the button, the input won't have zero width, so the buttons acts normal and will submit the form.
Hope it suits you.
$(function() {
$('#search-form button').on('click', function(e) {
var btn = $(this);
var inp = $(this).parent().find("input");
if( inp.width() == 0 ) {
e.preventDefault();
inp.animate({width: "200px"}, 500).focus();
btn.addClass('active-btn');
}
});
});
* {
box-sizing: border-box;
}
body {
background: black;
}
#search-form input {
color: #fff;
height: 50px;
background: #484848;
border: 0;
float: right;
width: 0;
}
#search-form button {
background: #484848;
color: #fff;
width: 50px;
height: 50px;
border: 1px solid #484848;
float: right;
}
#search-form .active-btn {
border: 1px solid #57ABD9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="search-form">
<button type="submit">🔎</button><input type="text" name="search" />
</form>

I hope something like this:
Note - It is responsive too
DEMO and FULL SCREEN DEMO
HTML
<div id="sb-search" class="sb-search " >
    <form>
<input class="sb-search-input " onkeyup="buttonUp();" placeholder="Enter your search term..." type="search" value="" name="search" id="search"/>
<input class="sb-search-submit" type="submit" value=""/>
        <span class="sb-icon-search"><i class="glyphicon glyphicon-search"></i></span>
    </form>
</div>
CSS [if needed]
body{
margin: 40px 60px;
background:#555;
}
.sb-search {
position: relative;
margin-top: 10px;
width: 0%;
min-width: 60px;
height: 60px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
-webkit-backface-visibility: hidden;
}
.sb-search-input {
position: absolute;
top: 0;
right: 0px;
border: none;
outline: none;
background: #fff;
width: 100%;
height: 60px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #2c3e50;
}
input[type="search"].sb-search-input {
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
.sb-search-input::-webkit-input-placeholder {
color: #efb480;
}
.sb-search-input:-moz-placeholder {
color: #efb480;
}
.sb-search-input::-moz-placeholder {
color: #efb480;
}
.sb-search-input:-ms-input-placeholder {
color: #efb480;
}
.sb-icon-search,
.sb-search-submit {
width: 60px;
height: 60px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
color:red;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: #fff;
background: #e67e22;
z-index: 90;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.sb-icon-search:before {
content: "";
}
.sb-search.sb-search-open,
.no-js .sb-search {
width: 100%;
}
.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
background: #da6d0d;
color: #fff;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
/* z-index: 90;*/
}
JS
function buttonUp(){
var valux = $('.sb-search-input').val();
valux = $.trim(valux).length;
if(valux !== 0){
$('.sb-search-submit').css('z-index','99');
} else{
$('.sb-search-input').val('');
$('.sb-search-submit').css('z-index','-999');
}
}
$(document).ready(function(){
var submitIcon = $('.sb-icon-search');
var submitInput = $('.sb-search-input');
var searchBox = $('.sb-search');
var isOpen = false;
$(document).mouseup(function(e){
if(isOpen == true){
submitInput.val('');
$('.sb-search-submit').css('z-index','-999');
submitIcon.click();
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('sb-search-open');
$('.sb-search-input').focus();
isOpen = true;
} else {
searchBox.removeClass('sb-search-open');
$('.sb-search-input').blur();
isOpen = false;
}
});
});