Develop Reference

Horizontally expand input on click with bootstrap animation?

I found some examples of expanding a textarea vertically using bootstrap.
I would like to horizontally expand a text input from this [..] to this [........] on click event with an animation.
Is there something in bootstrap that would simplify this or do I have to roll my own?

I ended up using pure css from codepen by someone named Prinzadi
body {
background: #fff;
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
h1 {
font: 1.7em;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* Demo 2 */
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}
<h1>Expandable Search Form</h1>
<p>Pen by Prinzadi</p>
<h3>Demo 1</h3>
<form>
<input type="search" placeholder="Search">
</form>
<h3>Demo 2</h3>
<form id="demo-2">
<input type="search" placeholder="Search">
</form>

Display Tooltip after a Click instead when Hover

I have a Clipboard Tooltip button script that display tooltip when hover with the cursor on it.
In the Clipboard page under Copy text from attribute example, it display tooltip after a click to copy, while hover do nothing.
And that exactly what i want to achive. Cuz i only success display tooltip when hover.
I have tried to play with the Clipboard page main.css and primer.css and didnt got it to work as i want (display tooltip after clicking)
Also looked at the tooltip creator documentation but even there it has only hover tooltips.
Here is the HTML code:
<div id="example-text" class="example">
<div class="table">
<div class="table-row">
<div class="table-cell">ebay</div>
<div class="table-cell">amazon</div>
</div>
<div class="table-row"><p></p></div>
<div class="table-row">
<div class="table-cell"><button class="btn" data-clipboard-text="ebay">ebay-link</button></div>
<div class="table-cell"><button aria-label="copied!" class="btn tooltipped tooltipped-e border p-2 mb-2 mr-2 left" data-clipboard-text="amazon">amazon-link</button></div>
</div>
</div>
<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
</script>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
And here is the CSS:
#example-text {width: 500px;}
.table
{
display:table;
text-align: center;
}
.table-row
{
display:table-row;
width: 400px;
}
.table-cell
{
display:table-cell;
width: 200px;
color: black;
font-family: arial;
font-size: 14px;
}
.btn[disabled] .clippy {
opacity: .3;
}
.example {
position: relative;
margin: 15px 0 0;
padding: 39px 19px 14px;
background-color: #fff;
border-radius: 4px 4px 0 0;
border: 1px solid #ddd;
z-index: 2;
}
.example p {
color: #666;
}
.example:after {
content: "copy the link";
position: absolute;
top: 0;
right: 0;
padding: 2px 8px;
font-size: 14px;
font-weight: bold;
background-color: #f5f5f5;
color: #9da0a4;
border-radius: 4px 0 4px 0;
}
.example+.snippet {
background: #f8f8f8;
border-radius: 4px;
border: 1px solid #ddd;
clear: both;
top: -20px;
padding: 20px 0 0;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],
html input[disabled] {
cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
.form-control.focus,
.form-control:focus,
input[type="text"].focus,
input[type="text"]:focus,
input[type="password"].focus,
input[type="password"]:focus,
input[type="email"].focus,
input[type="email"]:focus,
input[type="number"].focus,
input[type="number"]:focus,
input[type="tel"].focus,
input[type="tel"]:focus,
input[type="url"].focus,
input[type="url"]:focus,
select.focus,
select:focus,
textarea.focus,
textarea:focus {
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)
}
select:not([multiple]) {
height: 34px;
vertical-align: middle
}
input.input-contrast,
.input-contrast {
background-color: #fafafa
}
input.input-contrast:focus,
.input-contrast:focus {
background-color: #fff
}
::-webkit-input-placeholder {
color: #aaa
}
::-moz-placeholder {
color: #aaa
}
:-ms-input-placeholder {
color: #aaa
}
::placeholder {
color: #aaa
}
input.input-mini {
min-height: 26px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 12px
}
input.input-large {
padding: 6px 10px;
font-size: 16px
}
.input-block {
display: block;
width: 100%
}
.input-monospace {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace
}
.select {
display: inline-block;
max-width: 100%;
padding: 7px 24px 7px 8px;
vertical-align: middle;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 8px center;
background-size: 8px 10px;
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 8px \9;
background-image: none \9
}
.select:focus {
outline: none;
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)
}
.select::-ms-expand {
opacity: 0
}
.select-sm {
padding-top: 3px;
padding-bottom: 3px;
font-size: 12px
}
.select-sm:not([multiple]) {
height: 26px;
min-height: 26px
}
.clearfix:before {
display: table;
content: ""
}
.clearfix:after {
display: table;
clear: both;
content: ""
}
.btn {
position: relative;
display: inline-block;
padding: 6px 12px;
font-size: 13px;
font-weight: bold;
line-height: 20px;
color: #333;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none
}
.btn i {
font-style: normal;
font-weight: 500;
opacity: 0.6
}
.btn .octicon {
vertical-align: text-top
}
.btn .counter {
text-shadow: none;
background-color: #e5e5e5
}
.btn:focus {
text-decoration: none;
border-color: #51a7e8;
outline: none;
box-shadow: 0 0 5px rgba(81, 167, 232, 0.5)
}
.btn:focus:hover,
.btn.selected:focus {
border-color: #51a7e8
}
.btn:hover,
.btn:active,
.btn.zeroclipboard-is-hover,
.btn.zeroclipboard-is-active {
text-decoration: none;
background-color: #ddd;
background-image: linear-gradient(#eee, #ddd);
border-color: #ccc
}
.btn:active,
.btn.selected,
.btn.zeroclipboard-is-active {
background-color: #dcdcdc;
background-image: none;
border-color: #b5b5b5;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15)
}
.btn.selected:hover {
background-color: #cfcfcf
}
.btn:disabled,
.btn:disabled:hover,
.btn.disabled,
.btn.disabled:hover {
color: rgba(102, 102, 102, 0.5);
cursor: default;
background-color: rgba(229, 229, 229, 0.5);
background-image: none;
border-color: rgba(197, 197, 197, 0.5);
box-shadow: none
}
.btn-primary {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
background-color: #60b044;
background-image: linear-gradient(#8add6d, #60b044);
border-color: #5ca941
}
.btn-primary .counter {
color: #60b044;
background-color: #fff
}
.btn-primary:hover {
color: #fff;
background-color: #569e3d;
background-image: linear-gradient(#79d858, #569e3d);
border-color: #4a993e
}
.btn-primary:active,
.btn-primary.selected {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
background-color: #569e3d;
background-image: none;
border-color: #418737
}
.btn-primary.selected:hover {
background-color: #4c8b36
}
.btn-primary:disabled,
.btn-primary:disabled:hover,
.btn-primary.disabled,
.btn-primary.disabled:hover {
color: #fefefe;
background-color: #add39f;
background-image: linear-gradient(#c3ecb4, #add39f);
border-color: #b9dcac #b9dcac #a7c89b
}
.btn-danger {
color: #900
}
.btn-danger:hover {
color: #fff;
background-color: #b33630;
background-image: linear-gradient(#dc5f59, #b33630);
border-color: #cd504a
}
.btn-danger:active,
.btn-danger.selected {
color: #fff;
background-color: #b33630;
background-image: none;
border-color: #9f312c
}
.btn-danger.selected:hover {
background-color: #9f302b
}
.btn-danger:disabled,
.btn-danger:disabled:hover,
.btn-danger.disabled,
.btn-danger.disabled:hover {
color: #cb7f7f;
background-color: #efefef;
background-image: linear-gradient(#fefefe, #efefef);
border-color: #e1e1e1
}
.btn-danger:hover .counter,
.btn-danger:active .counter,
.btn-danger.selected .counter {
color: #b33630;
background-color: #fff
}
.btn-outline {
color: #4078c0;
background-color: #fff;
background-image: none;
border: 1px solid #e5e5e5
}
.btn-outline .counter {
background-color: #eee
}
.btn-outline:hover,
.btn-outline:active,
.btn-outline.selected,
.btn-outline.zeroclipboard-is-hover,
.btn-outline.zeroclipboard-is-active {
color: #fff;
background-color: #4078c0;
background-image: none;
border-color: #4078c0
}
.btn-outline:hover .counter,
.btn-outline:active .counter,
.btn-outline.selected .counter,
.btn-outline.zeroclipboard-is-hover .counter,
.btn-outline.zeroclipboard-is-active .counter {
color: #4078c0;
background-color: #fff
}
.btn-outline.selected:hover {
background-color: #396cad
}
.btn-outline:disabled,
.btn-outline:disabled:hover,
.btn-outline.disabled,
.btn-outline.disabled:hover {
color: #767676;
background-color: #fff;
background-image: none;
border-color: #e5e5e5
}
.btn-with-count {
float: left;
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btn-sm {
padding: 2px 10px
}
.tooltipped {
position: relative
}
.tooltipped:after {
position: absolute;
z-index: 1000000;
display: none;
padding: 5px 8px;
font: normal normal 11px/1.5 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: rgba(0, 0, 0, 0.8);
border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased;
}
.tooltipped:before {
position: absolute;
z-index: 1000001;
display: none;
width: 0;
height: 0;
color: rgba(0, 0, 0, 0.8);
pointer-events: none;
content: "";
border: 5px solid transparent
}
.tooltipped:hover:before,
.tooltipped:hover:after,
.tooltipped:active:before,
.tooltipped:active:after,
.tooltipped:focus:before,
.tooltipped:focus:after {
display: inline-block;
text-decoration: none
}
.tooltipped-multiline:hover:after,
.tooltipped-multiline:active:after,
.tooltipped-multiline:focus:after {
display: table-cell
}
.tooltipped-s:after,
.tooltipped-se:after,
.tooltipped-sw:after {
top: 100%;
right: 50%;
margin-top: 5px
}
.tooltipped-s:before,
.tooltipped-se:before,
.tooltipped-sw:before {
top: auto;
right: 50%;
bottom: -5px;
margin-right: -5px;
border-bottom-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-se:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-sw:after {
margin-right: -15px
}
.tooltipped-n:after,
.tooltipped-ne:after,
.tooltipped-nw:after {
right: 50%;
bottom: 100%;
margin-bottom: 5px
}
.tooltipped-n:before,
.tooltipped-ne:before,
.tooltipped-nw:before {
top: -5px;
right: 50%;
bottom: auto;
margin-right: -5px;
border-top-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-ne:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-nw:after {
margin-right: -15px
}
.tooltipped-s:after,
.tooltipped-n:after {
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%)
}
.tooltipped-w:after {
right: 100%;
bottom: 50%;
margin-right: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-w:before {
top: 50%;
bottom: 50%;
left: -5px;
margin-top: -5px;
border-left-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-e:after {
bottom: 50%;
left: 100%;
margin-left: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-e:before {
top: 50%;
right: -5px;
bottom: 50%;
margin-top: -5px;
border-right-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-multiline:after {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
max-width: 250px;
word-break: break-word;
word-wrap: normal;
white-space: pre-line;
border-collapse: separate
}
.tooltipped-multiline.tooltipped-s:after,
.tooltipped-multiline.tooltipped-n:after {
right: auto;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.tooltipped-multiline.tooltipped-w:after,
.tooltipped-multiline.tooltipped-e:after {
right: 100%
}
#media screen and (min-width: 0\0) {
.tooltipped-multiline:after {
width: 250px
}
}
.tooltipped-sticky:before,
.tooltipped-sticky:after {
display: inline-block
}
.tooltipped-sticky.tooltipped-multiline:after {
display: table-cell
}
.fullscreen-overlay-enabled.dark-theme .tooltipped:after {
color: #000;
background: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-se:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-sw:before {
border-bottom-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-n:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-ne:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-nw:before {
border-top-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-e:before {
border-right-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-w:before {
border-left-color: rgba(255, 255, 255, 0.8)
}
EDIT: Getting closer:
This is the related code:
<div id="example-text" class="example">
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>
<pre class="snippet">
<button class="btn" data-clipboard-snippet="">
<img class="clippy" width="13" src="./index_files/clippy.svg" alt="Copy to clipboard">
</button>
<code class="html hljs xml">
<span class="hljs-comment"><!-- Trigger --></span>
<span class="hljs-tag"><<span class="hljs-title">button</span>
<span class="hljs-attribute">class</span>=<span class="hljs-value">"btn"</span>
<span class="hljs-attribute">data-clipboard-text</span>=<span class="hljs-value">"Just because you can doesn't mean you should — clipboard.js"</span>></span>
Copy to clipboard
<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
</code>
</pre>
Tried and still without success- Wonder what exactly triger that.
How do i get tooltip After i click (like in the clipboardpage)?
Here's a live one:

Got it. It was hiding in the demoes.js file.
And especially that line:
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
This is the corrected code:
<script src="https://clipboardjs.com/assets/scripts/demos.js"></script>
<div id="example-text" class="example">
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
Now it is working.
Here's the result: HERE

Customize toggle button in Bootstrap using only CSS?

I have a demo that uses the toggle dropdown button of bootstrap. I've customized the bootstrap.css but not boostrap.js. Can I use toggle without boostrap.js?
Demo
Here is the snippet:
$(document).ready(function() {
$('#firstvalue').addClass('user-click');
$('#usr').val("(" + $("#firstTag").text() + ")");
$('#demolist li a').on('click', function() {
$('.user-click').removeClass('user-click');
$(this).find('.user-check').addClass('user-click');
$('#usr').val("(" + $(this).text() + ")");
});
});
.user-check {
cursor: pointer;
display: block;
height: 16px;
margin: 0px 0px 0px 0px;
outline: 0 none;
padding: 8px 5px 0px 0px;
position: relative;
top: 1px;
width: 16px;
z-index: 1;
float: left;
}
.user-click:before {
bottom: 10px;
content: "\2713";
display: block;
position: relative;
right: 0px;
transform: rotate(15deg);
transition: all 1s ease-out 0s;
width: 14px;
font-size: 15px;
color: #444444;
}
.btnAlpha-inverse {
color: #fff;
height: 20px;
width: 20px;
background-color: #444444;
border-color: #444444;
/*set the color you want here*/
}
.btnAlpha-inverse:hover,
.btnAlpha-inverse:focus,
.btnAlpha-inverse:active,
.btnAlpha-inverse.active,
.btnAlpha-inverse.disabled,
.btnAlpha-inverse[disabled] {
color: #ffffff;
background-color: #444444;
*background-color: #444444;
}
.btnAlpha-small {
padding: 2px 10px;
font-size: 11.9px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #444444;
white-space: nowrap;
font-weight: bold;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-submenu:hover>a,
.dropdown-submenu:focus>a {
text-decoration: none;
color: #444444;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #f5f5f5, #f5f5f5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f5f5f5));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f5f5f5);
background-image: -o-linear-gradient(top, #f5f5f5, #f5f5f5);
/* background-image: linear-gradient(to bottom, #0088cc, #0077b3); */
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.btnAlpha-groupAlpha-lg>.btnAlpha,
.btnAlpha-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px
}
.btnAlpha-groupAlpha-sm>.btnAlpha,
.btnAlpha-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px
}
.btnAlpha-groupAlpha-xs>.btnAlpha,
.btnAlpha-xs {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px
}
.btnAlpha-block {
display: block;
width: 100%
}
.btnAlpha-groupAlpha-vertical>.btnAlpha,
.btnAlpha-groupAlpha>.btnAlpha {
position: relative;
float: left
}
.btnAlpha-groupAlpha-vertical>.btnAlpha.active,
.btnAlpha-groupAlpha-vertical>.btnAlpha:active,
.btnAlpha-groupAlpha-vertical>.btnAlpha:focus,
.btnAlpha-groupAlpha-vertical>.btnAlpha:hover,
.btnAlpha-groupAlpha>.btnAlpha.active,
.btnAlpha-groupAlpha>.btnAlpha:active,
.btnAlpha-groupAlpha>.btnAlpha:focus,
.btnAlpha-groupAlpha>.btnAlpha:hover {
z-index: 2
}
.btnAlpha-groupAlpha .btnAlpha+.btnAlpha,
.btnAlpha-groupAlpha .btnAlpha+.btnAlpha-groupAlpha,
.btnAlpha-groupAlpha .btnAlpha-groupAlpha+.btnAlpha,
.btnAlpha-groupAlpha .btnAlpha-groupAlpha+.btnAlpha-groupAlpha {
margin-left: -1px
}
.btnAlpha-toolbar {
margin-left: -5px
}
.btnAlpha-toolbar .btnAlpha,
.btnAlpha-toolbar .btnAlpha-groupAlpha,
.btnAlpha-toolbar .input-group {
float: left
}
.btnAlpha-toolbar>.btnAlpha,
.btnAlpha-toolbar>.btnAlpha-groupAlpha,
.btnAlpha-toolbar>.input-group {
margin-left: 5px
}
.btnAlpha-groupAlpha>.btnAlpha:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha:first-child {
margin-left: 0
}
.btnAlpha-groupAlpha>.btnAlpha:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha:last-child:not(:first-child),
.btnAlpha-groupAlpha>.dropdown-toggle:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha {
float: left
}
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha:not(:first-child):not(:last-child)>.btnAlpha {
border-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha:first-child:not(:last-child)>.btnAlpha:last-child,
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha:first-child:not(:last-child)>.dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha:last-child:not(:first-child)>.btnAlpha:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.btnAlpha-groupAlpha .dropdown-toggle:active,
.btnAlpha-groupAlpha.open .dropdown-toggle {
outline: 0
}
.btnAlpha-groupAlpha>.btnAlpha+.dropdown-toggle {
padding-right: 8px;
padding-left: 8px
}
.btnAlpha-groupAlpha>.btnAlpha-lg+.dropdown-toggle {
padding-right: 12px;
padding-left: 12px
}
.btnAlpha-groupAlpha.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}
.btnAlpha-groupAlpha.open .dropdown-toggle.btnAlpha-link {
-webkit-box-shadow: none;
box-shadow: none
}
.btnAlpha .caret {
margin-left: 0
}
.btnAlpha-lg .caret {
border-width: 5px 5px 0;
border-bottom-width: 0
}
.dropup .btnAlpha-lg .caret {
border-width: 0 5px 5px
}
.btnAlpha-groupAlpha-vertical>.btnAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha>.btnAlpha {
display: block;
float: none;
width: 100%;
max-width: 100%
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha>.btnAlpha {
float: none
}
.btnAlpha-groupAlpha-vertical>.btnAlpha+.btnAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha+.btnAlpha-groupAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha+.btnAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha+.btnAlpha-groupAlpha {
margin-top: -1px;
margin-left: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha:not(:first-child):not(:last-child) {
border-radius: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 4px
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:not(:first-child):not(:last-child)>.btnAlpha {
border-radius: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:first-child:not(:last-child)>.btnAlpha:last-child,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:first-child:not(:last-child)>.dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:last-child:not(:first-child)>.btnAlpha:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0
}
.btnAlpha-groupAlpha-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate
}
.btnAlpha-groupAlpha-justified>.btnAlpha,
.btnAlpha-groupAlpha-justified>.btnAlpha-groupAlpha {
display: table-cell;
float: none;
width: 1%
}
.btnAlpha-groupAlpha-justified>.btnAlpha-groupAlpha .btnAlpha {
width: 100%
}
.btnAlpha-groupAlpha-justified>.btnAlpha-groupAlpha .dropdown-menu {
left: auto
}
[data-toggle=buttons]>.btnAlpha input[type=checkbox],
[data-toggle=buttons]>.btnAlpha input[type=radio],
[data-toggle=buttons]>.btnAlpha-groupAlpha>.btnAlpha input[type=checkbox],
[data-toggle=buttons]>.btnAlpha-groupAlpha>.btnAlpha input[type=radio] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none
}
.btnAlpha-groupAlpha,
.btnAlpha-groupAlpha-vertical {
position: relative;
display: inline-block;
vertical-align: middle
}
.btnAlpha-groupAlpha>.btnAlpha,
.input-group-btnAlpha:first-child>.dropdown-toggle,
.input-group-btnAlpha:last-child>.btnAlpha-groupAlpha:not(:last-child)>.btnAlpha,
.input-group-btnAlpha:last-child>.btnAlpha:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.input-group-addon:first-child {
border-right: 0
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btnAlpha:first-child>.btnAlpha-groupAlpha:not(:first-child)>.btnAlpha,
.input-group-btnAlpha:first-child>.btnAlpha:not(:first-child),
.input-group-btnAlpha:last-child>.btnAlpha,
.input-group-btnAlpha:last-child>.btnAlpha-groupAlpha>.btnAlpha,
.input-group-btnAlpha:last-child>.dropdown-toggle {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.input-group-addon:last-child {
border-left: 0
}
.input-group-btnAlpha {
position: relative;
font-size: 0;
white-space: nowrap
}
.input-group-btnAlpha>.btnAlpha {
position: relative
}
.input-group-btnAlpha>.btnAlpha+.btnAlpha {
margin-left: -1px
}
.input-group-btnAlpha>.btnAlpha:active,
.input-group-btnAlpha>.btnAlpha:focus,
.input-group-btnAlpha>.btnAlpha:hover {
z-index: 2
}
.input-group-btnAlpha:first-child>.btnAlpha,
.input-group-btnAlpha:first-child>.btnAlpha-groupAlpha {
margin-right: -1px
}
.input-group-btnAlpha:last-child>.btnAlpha,
.input-group-btnAlpha:last-child>.btnAlpha-groupAlpha {
z-index: 2;
margin-left: -1px
}
.btnAlpha-groupAlpha .btnAlpha+.btnAlpha {
margin-left: -1px
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:after,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:before,
.btnAlpha-toolbar:after,
.btnAlpha-toolbar:before,
.clearfix:after,
.clearfix:before,
.container-fluid:after,
.container-fluid:before,
.container:after,
.container:before,
.dl-horizontal dd:after,
.dl-horizontal dd:before,
.form-horizontal .form-group:after,
.form-horizontal .form-group:before,
.modal-footer:after,
.modal-footer:before,
.nav:after,
.nav:before,
.navbar-collapse:after,
.navbar-collapse:before,
.navbar-header:after,
.navbar-header:before,
.navbar:after,
.navbar:before,
.pager:after,
.pager:before,
.panel-body:after,
.panel-body:before,
.row:after,
.row:before {
display: table;
content: " "
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:after,
.btnAlpha-toolbar:after,
.clearfix:after,
.container-fluid:after,
.container:after,
.dl-horizontal dd:after,
.form-horizontal .form-group:after,
.modal-footer:after,
.nav:after,
.navbar-collapse:after,
.navbar-header:after,
.navbar:after,
.pager:after,
.panel-body:after,
.row:after {
clear: both
}
.btnAlpha-groupAlpha-xs>.btnAlpha .badge,
.btnAlpha-xs .badge {
top: 0;
padding: 1px 5px
}
a.badge:focus,
a.badge:hover {
color: #fff;
text-decoration: none;
cursor: pointer
}
.open>.dropdown-menu {
display: block;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #444444;
white-space: nowrap;
font-weight: bold;
}
.ul {
margin-top: 0;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
text-decoration: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: transparent;
}
.list-unstyled {
padding-left: 0;
list-style: none
}
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none
}
.list-inline>li {
display: inline-block;
padding-right: 5px;
padding-left: 5px
}
<div class="dropdown btnAlpha-groupAlpha">
<button class="btnAlpha btnAlpha-small btnAlpha-inverse dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
V
</button>
<ul class="dropdown-menu" id="demolist">
<li class="dropdown-header">Search in:</li>
<li>
<a href="#" id="firstTag">
<div class="user-check" id="firstvalue"></div>Korean</a>
</li>
<li>
<a href="#">
<div class="user-check"></div>Chinese</a>
</li>
<li>
<a href="#">
<div class="user-check"></div>Japanese</a>
</li>
</ul>
<input type="text" class="form-control" id="usr">
</div>

Jquery Show / Hide toggle not working on Mobile

Glad to be on Stack Overflow. I'm new to JS /Jquery and can use HTML/CSS and have managed to piece together the following code.
It's for a box with an expand button that upon clicking shows / hides a slider panel under it.
It works on desktop but doesnt not work on smartphones (Tested on iPhone5 with Chrome & Safari up to date versions.
Can you please guide me as to why this is not functioning at all on the mobile?
Thanks
Vila
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<div id="card_bg">
<p class="hero_text">We love design</p>
<p class="sub_text">We love design</p>
<p class="link showSingle" id="2">EXPAND ></p>
<div class="share_sheet_2 collapse_share"></div>
</div>
#card_bg {
background-position: 50% 100%;
box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px -2px;
box-sizing: border-box;
width: auto;
height: auto;
min-width:320px;
position: relative;
text-align: left;
text-rendering: optimizelegibility;
background: rgb(255, 255, 255) linear-gradient(transparent 50%, rgb(255, 255, 255) 50%) repeat-x scroll 50% 100% / 2px 2px padding-box border-box;
border: 0px none rgba(55, 70, 72, 0.8);
border-radius: 2px 2px 2px 2px;
overflow: auto;
outline: rgba(55, 70, 72, 0.8) none 0px;
-webkit-font-smoothing: antialiased;
}
.hero_text {
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
color: green;
font-weight: bold;
font-size: 55px;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
margin: 0px;
letter-spacing: -2px;
-webkit-font-smoothing: antialiased;
}
.sub_text {
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #535860;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
padding-top: 0px;
margin-top: -2px;
-webkit-font-smoothing: antialiased;
}
.link {
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #535860;
font-size: 16px;
padding-left: 20px;
padding-right: 10px;
padding-top: 16px;
padding-bottom: 8px;
line-height: 0px;
margin-top: 0px;
float: left;
-webkit-font-smoothing: antialiased;
}
.link:hover {
color: green;
}
.collapse_share {
position: relative;
margin-top: 60px;
display: none;
height:54px;
background-color: green;
clear: both;
text-align: center;
-webkit-box-shadow: inset 0px 8px 9px -5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0px 8px 9px -5px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 8px 9px -5px rgba(0, 0, 0, 0.5)
}
.share_icons {
width: 20%;
height: 54px;
float:left;
opacity: 0.9;
}
.ico_padding {
width: 20%;
height: 25px;
float: left;
padding-top: 14px;
}
jQuery(document).ready(function () {
$(document).on("click", ".showSingle", function () {
$('.showSingle').toggleClass('hide');
var index = $(this).attr('id');
newTarget = $('.share_sheet_' + index).slideDown('fast');
$('.collapse_share').not(newTarget).slideUp('fast');
});
$(document).on("click", ".collapse_share", function () {
$('.collapse_share').slideUp('fast');
$('.showSingle').removeClass('hide');
});
$(document).on("click", ".hide", function () {
$('.collapse_share').slideUp('fast');
});
});

CSS positioning works with chrome but not other browsers?

The items on my website are positioned correctly when viewed in Google Chrome, as they should be left to the store box and stay inside the dark gray container. But in IE/Mozilla/Other browsers, it drops the items far down.
body {
font-family: Arial, "Free Sans";
margin: 0;
padding: 0;
}
#main {
background: #0099cc;
margin-top: 0;
padding: 2px 0 4px 0;
text-align: center;
}
#main a {
color: #ffffff;
text-decoration: none;
font-size: 12px;
font-weight: bold;
font-family: Arial;
}
#main a:hover {
text-decoration: underline;
}
#item_container {
width: 200px;
margin-left:10px;
margin-top: -360px;
height:400px;
margin-bottom: 10px;
}
.item {
background: #fff;
float: left;
padding: 5px;
margin: 5px;
cursor: move;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
box-shadow: 0 1px 2px rgba(0,0,0,.5);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
z-index: 5;
}
.title, .price {
display: block;
text-align: center;
font-size: 14px;
letter-spacing: -1px;
font-weight: bold;
cursor: move;
}
.title {
color: #333;
}
.price {
color: #0099cc;
margin-top: 5px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}
.icart, .icart label {
cursor: e-resize;
}
.divrm {
text-align: right;
}
.remove {
text-decoration: none;
cursor: pointer;
font-weight: bold;
font-size: 20px;
position: relative;
top: -7px;
}
.remove:hover {
color: #999;
}
.clear {
clear: both;
}
#cart_container {
margin-top:0px;
margin-left:260px;
width: 565px;
}
#cart_title span {
border: 8px solid #666;
border-bottom-width: 0;
background: #333;
display: block;
float: left;
color: #fff;
font-size: 11px;
font-weight: bold;
padding: 5px 10px;
-webkit-border-radius: .5em .5em 0 0;
-moz-border-radius: .5em .5em 0 0;
border-radius: .5em .5em 0 0;
}
#cart_toolbar {
overflow: hidden;
border: 8px solid #666;
height: 290px;
z-index: -2;
width: 565px;
-webkit-border-radius: 0 .5em 0 0;
-moz-border-radius: 0 .5em 0 0;
border-radius: 0 .5em 0 0;
background: #ffffff;
}
#cart_items {
height: 100%;
width: 100%;
position: relative;
padding: 0 0 0 2px;
z-index: 0;
cursor: e-resize;
border-width: 0 2px;
}
.back {
background: #e9e9e9;
}
#navigate {
width: 545px;
margin: 0 auto;
border: 8px solid #666;
border-top-width: 0;
-webkit-border-radius: 0 0 .5em .5em;
-moz-border-radius: 0 0 .5em .5em;
border-radius: 0 0 .5em .5em;
padding: 10px;
font-size: 14px;
background: #333;
font-weight: bold;
}
#nav_left {
float: left;
}
#nav_left a {
padding: 4px 8px;
background: #fff;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
text-decoration: none;
color:#0099cc;
}
#nav_left a:hover {
background: #666;
color: #fff;
}
#nav_right {
float: right;
}
.sptext {
background: #ffffff;
padding: 4px 8px;
margin-left: 8px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
color: #666;
}
.count {
color: #0099cc;
}
.drop-active {
background: #ffff99;
}
.drop-hover {
background: #ffff66;
}

Add float:left to #item_container.
#item_container {
float:left;
width: 200px;
margin-left:10px;
margin-top: -360px;
height:400px;
margin-bottom: 10px;
}