Develop Reference

Dropdown Menu showing invisible child boxes but only shows the child text when hovered upon them

I was creating a dropdown menu which when hovered upon displays sub-links.
But, I ran into a problem as when I hover on the dropdown, it shows a blank box and only shows the text when hovered upon it specifically.
I want that the text to be displayed at all times.
// Sticky Navbar
var h = document.getElementById("navbar");
var stuck = false;
var stickPoint = getDistance();
function getDistance() {
var topDist = h.offsetTop;
return topDist;
}
window.onscroll = function(e) {
var distance = getDistance() - window.pageYOffset;
var offset = window.pageYOffset;
if ( (distance <= 0) && !stuck) {
h.style.position = 'fixed';
h.style.top = '0px';
stuck = true;
} else if (stuck && (offset <= stickPoint)){
h.style.position = 'static';
stuck = false;
}
}
// Preloader
const preloader = document.querySelector('.preloader');
const fadeEffect = setInterval(() => {
// if we don't set opacity 1 in CSS, then //it will be equaled to "", that's why we // check it
if (!preloader.style.opacity) {
preloader.style.opacity = 1;
}
if (preloader.style.opacity > 0) {
preloader.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
}
}, 200);
window.addEventListener('load', fadeEffect);
/* Navbar */
#navbar {
height: 75px;
display: block;
background: #333;
width: 100%;
}
#navbar a{
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
padding-top: 10px;
text-align: center;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
#navbar a:hover, .dropdown:hover .dropbtn {
background-color: silver;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
margin-left: 49%;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
display: inline-block;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!-- Navbar -->
<div id="navbar">
<div class="dropdown">
<button class="dropbtn">Projects
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Drum Kit
Coming Soon...
</div>
</div>
</div>
Apart from this, I have implemented the Sticky Navbar and a Simple Preloader using Vanilla JS which I am sharing if it might help.
Just help me with the dropdown thing.
Any help will be appreciated.

As #Y.S. point out you have color set to white. Not sure what you've tried that didn't work, this works fine for me:
// Sticky Navbar
var h = document.getElementById("navbar");
var stuck = false;
var stickPoint = getDistance();
function getDistance() {
var topDist = h.offsetTop;
return topDist;
}
window.onscroll = function(e) {
var distance = getDistance() - window.pageYOffset;
var offset = window.pageYOffset;
if ( (distance <= 0) && !stuck) {
h.style.position = 'fixed';
h.style.top = '0px';
stuck = true;
} else if (stuck && (offset <= stickPoint)){
h.style.position = 'static';
stuck = false;
}
}
// Preloader
const preloader = document.querySelector('.preloader');
const fadeEffect = () =>
{
setInterval(() => {
// if we don't set opacity 1 in CSS, then //it will be equaled to "", that's why we // check it
if (!preloader.style.opacity) {
preloader.style.opacity = 1;
}
if (preloader.style.opacity > 0) {
preloader.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
}
}, 200);
}
window.addEventListener('load', fadeEffect);
/* Navbar */
#navbar {
height: 75px;
display: block;
background: #333;
width: 100%;
}
#navbar a{
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
padding-top: 10px;
text-align: center;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
#navbar a:hover, .dropdown:hover .dropbtn {
background-color: silver;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
margin-left: 49%;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
display: inline-block;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!-- Navbar -->
<div id="navbar">
<div class="dropdown">
<button class="dropbtn">Projects
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Drum Kit
Coming Soon...
</div>
</div>
</div>
<div class="preloader"></div>

Toggle Switch to disable and enable Links

In the code below, I have coded a switch that disables and enables my links using CSS.
The problem is that my switch is not changing its appearance. It's doing its job (the JavaScript functionality is working), but the appearance isn't. I don't have much experience with
HTML Button:
<label class="switch" isValue="0">
<div class="slider round">
</div>
</label>
CSS:
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input[type="checkbox"]:checked + input[type="hidden"] + .slider,
input[type="checkbox"]:checked + .slider {
background-color: #2196F3;
}
input[type="checkbox"]:focus + input[type="hidden"] + .slider,
input[type="checkbox"]:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input[type="checkbox"]:checked + input[type="hidden"] + .slider:before,
input[type="checkbox"]:checked + .slider:before {
transform: translateX(26px);
}
Rounded sliders
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.dim.disabled {
pointer-events: none;
background-color: grey;
}
JavaScript:
$(document).on('click', '.switch', function () {
var v = $(".switch").attr("isValue");
if (v == 1) {
$(".switch").attr("isValue", "0");
$(".dim").removeClass("disabled");
}
else {
$(".switch").attr("isValue", "1");
$(".dim").addClass("disabled");
}
});
I know there is something wrong with this because it is of the input type checkbox.
Thank you for any help you can provide.

Okay, ignoring the proposed code that is too vague, here's how a jQuery class toggle works:
$(".switch").on('click', function () {
$(this)
.toggleClass('disabled')
.data('status', ($(this).hasClass("disabled")? '0':'1'));
console.clear();
console.log('data-status value is :', $(this).data('status') );
});
.switch > span {
display: block;
width: 68px;
height: 68px;
background-color: green;
border-radius: 34px;
}
.switch.disabled > span {
background-color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="switch" data-status="1"><span></span></div>

Using just CSS, incase you wanted to go that route. Figured it might be useful since you are saying the Javascript works but the appearance will not change.
Basic switch
/** Format Example Body **/
body {
margin: 0;
padding: 0;
background: #f0f0f0;
}
* {
box-sizing: border-box;
}
.container {
max-width: 500px;
margin: 0 auto;
background: #fff;
}
.components {
padding: 20px;
}
.components .content {
margin-bottom: 20px;
}
.default {
margin: 0 5px;
}
.switch {
display: inline-block;
}
.switch input {
display: none;
}
.switch small {
display: inline-block;
width: 100px;
height: 18px;
background: #3a3a3a;
border-radius: 5px;
position: relative;
cursor: pointer;
}
.switch small:after {
content: "No";
position: absolute;
color: #fff;
font-size: 11px;
font-weight: 600;
width: 100%;
text-align: right;
padding: 0 6px;
box-sizing: border-box;
line-height: 18px;
}
.switch small:before {
content: "";
position: absolute;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
top: 3px;
left: 3px;
transition: .3s;
box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1);
}
.switch input:checked~small {
background: #3fc55c;
transition: .3s;
}
.switch input:checked~small:before {
transform: translate(25px, 0px);
transition: .3s;
}
.switch input:checked~small:after {
content: "Yes";
text-align: left;
}
<div class="container">
<div class="components">
<div class="content">
<label class="switch default">
<input type="checkbox">
<small></small>
</label>
</div>
</div>
</div>

I think you just need to have a specific name of a class for an enabled link or disabled link
style
.link_enabled {
/* style for enabled link */
}
.link_disabled {
/* style for disabled link */
}
script
$(document).on('click', '.switch', function () {
var v = $(".switch").attr("isValue");
if (v == 1) {
$(".switch").attr("isValue", "0");
$(".switch").removeClass("link_enabled").addClass("link_disabled");
$(".dim").removeClass("disabled");
}
else {
$(".switch").attr("isValue", "1");
$(".switch").removeClass("link_disabled").addClass("link_enabled");
$(".dim").addClass("disabled ");
}
});

For the record, please note that it is simpler in JS (es6).
And because the subject only mentions javascript (not jQuery) on tag list.
document.querySelector('.switch').onclick = function(e) {
this.dataset.status = this.classList.toggle('disabled')?'0':'1';
console.clear();
console.log('data-status value is :', this.dataset.status );
}
.switch>span {
display: block;
width: 68px;
height: 68px;
background-color: green;
border-radius: 34px;
}
.switch.disabled>span {
background-color: grey;
}
<div class="switch" data-status="1" ><span></span></div>

CSS select field and text position

I'm developing a multi-platform app using Ionic v1.
The problem is with CSS, this is the page that I want to perform in graphical purpose:
In particular I want to center vertically the input list in the red circle: I want to align them with the caption to the left.
I want also to center vertically the text in the second circle, aligning with the red button.
This is the html and CSS code of that page:
app.controller('Wallet_management_Ctrl',['$scope','$http','Lang', function($scope,$http,Lang) {
var binance = localStorage.getItem("binance");
binance = (binance) ? JSON.parse(binance) : [];
$scope.binance = binance;
var coinmarketcapsymbol = localStorage.getItem("Coinmarketcap");
coinmarketcapsymbol = (coinmarketcapsymbol) ? JSON.parse(coinmarketcapsymbol) : [];
$scope.coinmarketcapsymbol = coinmarketcapsymbol;
var symbolsBitfinex = localStorage.getItem("symbolsBitfinex");
symbolsBitfinex = (symbolsBitfinex) ? JSON.parse(symbolsBitfinex) : [];
//console.log(symbolsBitfinex);
$scope.symbolsBitfinex = symbolsBitfinex;
var symbolsBittrex = localStorage.getItem("Bittrex");
symbolsBittrex = (symbolsBittrex) ? JSON.parse(symbolsBittrex) : [];
//console.log(symbolsBitfinex);
$scope.symbolsBittrex = symbolsBittrex;
var symbolsPoloniex = localStorage.getItem("Poloniex");
symbolsPoloniex = (symbolsPoloniex) ? JSON.parse(symbolsPoloniex) : [];
//console.log(symbolsBitfinex);
$scope.symbolsPoloniex = symbolsPoloniex;
var symbolsCryptopia = localStorage.getItem("Cryptopia");
symbolsCryptopia = (symbolsCryptopia) ? JSON.parse(symbolsCryptopia) : [];
//console.log(symbolsBitfinex);
$scope.symbolsCryptopia = symbolsCryptopia;
var language = Lang.getlang();
$scope.showlang = language;
if (language=="ita"){
$scope.title= "Gestione Wallet"
}
if (language=="en"){
$scope.title= "Wallet management"
}
var weblist = ["Binance","Bitfinex","Bitstamp","Bittrex", "Coinmarketcap","Cryptopia","Poloniex"];
var BitstampList = ["bch", "btc", "eth", "ltc", "xrp"];
$scope.weblist = weblist;
$scope.symbolsBitstamp = BitstampList;
var walletlist = localStorage.getItem("walletlist");
walletlist = (walletlist) ? JSON.parse(walletlist) : [];
// console.log(walletlist);
var item = [];
if (walletlist === null)
var walletlist = [];
$scope.walletlist = walletlist;
$scope.add = function() {
if($scope.site == null || $scope.currency == null || $scope.amount == null || $scope.price == null){
if (language=="ita"){
alert("Devi riempire tutti i campi");
};
if (language=="en"){
alert("Fill in all the labels");
};
}
else{
if ($scope.amount == 0 || $scope.price == 0){
if (language=="ita"){
alert("La quantità o il prezzo non possono essere nulli");
};
if (language=="en"){
alert("The amount or the price can't be null");
};
}
else{
item = [$scope.site,$scope.currency,$scope.amount, $scope.price];
walletlist.push(item);
window.localStorage.setItem("walletlist", JSON.stringify(walletlist));
$scope.site = null;
$scope.currency = null;
$scope.amount == null;
$scope.price == null;
}
}
};
$scope.delete = function(item) {
var index = walletlist.indexOf(item);
if (index > -1) {
walletlist.splice(index, 1);
}
window.localStorage.removeItem("walletlist");
window.localStorage.setItem("walletlist", JSON.stringify(walletlist));
//location.reload();
};
$scope.showBitfinex = function() {
if ($scope.site == "Bitfinex"){
return true;
}
else
return false;
};
$scope.showBinance = function() {
if ($scope.site == "Binance"){
return true;
}
else
return false;
};
$scope.showCoinmarketcap = function() {
if ($scope.site == "Coinmarketcap"){
return true;
}
else
return false;
};
$scope.showBittrex = function() {
if ($scope.site == "Bittrex"){
return true;
}
else
return false;
};
$scope.showPoloniex = function() {
if ($scope.site == "Poloniex"){
return true;
}
else
return false;
};
$scope.showCryptopia = function() {
if ($scope.site == "Cryptopia"){
return true;
}
else
return false;
};
$scope.showBitstamp = function() {
if ($scope.site == "Bitstamp"){
return true;
}
else
return false;
};
$scope.$on('$ionicView.leave', function() {
location.reload();
});
}]);
/* Empty. Add your own CSS if you like */
/* Utilities */
* {
font-family: 'Comfortaa';
}
.pane {
background-color: #E8EAF6;
}
/*menu laterale img in alto*/
.menu .bar.bar-header.expanded {
background-image: url('../img/menu.jpg');
background-size: 120%;
background-position: 0%;
transition: all .5s ease-in-out;
}
/*menu laterale img in alto*/
.menu.menu-left * {
background-color: #303F9F;
font-weight: bold;
font-family: 'Comfortaa';
font-size: 1.05em;
color: white;
}
.nav-bar-block,
.bar {
background-color: #303F9F !important;
font-family: 'Comfortaa';
font-weight: bold;
}
.link {
color: #116262;
font-weight: bold;
}
h4 {
color: #283593;
font-size: 1.875em;
margin-bottom: 16px;
}
h4:first-child {
border-top: none;
padding-top: initial;
}
h3 {
color: #283593;
font-size: 1.4em;
margin-bottom: 16px;
}
h3:first-child {
border-top: none;
padding-top: initial;
}
.title-bordered {
border-top: solid 2px #bbb;
padding-top: 30px;
}
p {
color: #555;
margin: 0 0 25px;
}
.no-border {
border: none;
}
.static {
position: static;
}
.bold {
font-weight: bold;
}
.border-top {
border-top: solid 1px #ccc;
padding-top: 30px;
}
.blue-grey-900 {
background-color: #263238 !important;
color: #fff;
}
/* Menu */
.menu.menu-left * {
font-weight: bold;
}
.item-radio input:checked~.item-content {
background: transparent;
}
.menu-open .ion-navicon {
transform: rotate(-360deg);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.menu-open .ion-navicon:before {
content: "\f2ca";
}
.item.item-radio .radio-icon {
opacity: 1;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.item.item-radio:active .radio-icon {
opacity: 0;
transform: scale(1.6);
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.directions.button-bar {
margin: 0 auto;
width: 33.333%;
}
.directions.button-bar button {
line-height: 26px;
}
.ion-arrow-right-c.top-left:before {
transform: rotate(-135deg);
}
.ion-arrow-right-c.top-right:before {
transform: rotate(-45deg);
}
.ion-arrow-right-c.bottom-left:before {
transform: rotate(-225deg);
}
.ion-arrow-right-c.bottom-right:before {
transform: rotate(45deg);
}
#modal {
background-color: #ef4e3a;
border-radius: 100%;
box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.2);
position: fixed;
height: 50%;
bottom: 0;
opacity: 0;
width: 700px;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.expand #modal {
background-color: #DBDBDB;
border-radius: 0;
border-top: solid 4px #ef4e3a;
opacity: 1;
z-index: 9;
}
/* CODE */
.code {
color: #333;
font-family: monospace;
padding: 10px;
white-space: pre;
}
.code-wrapper {
padding-bottom: 30px;
padding-top: 15px;
}
.code-wrapper::before {
color: #1B5E20;
font-family: "Ionicons";
speak: none;
font-size: 18px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
content: '\f216 ';
}
.code-wrapper.active::before {
content: '\f207 ';
}
.code-wrapper .toggle {
color: #4CAF50;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: bold;
padding: 10px 8px;
text-decoration: underline;
}
.code-wrapper .code {
opacity: 0;
margin-top: -20px;
height: 0;
overflow: hidden;
position: absolute;
transition: 0.1s all ease-in-out;
z-index: 9999999999;
}
.code-wrapper.code-wrapper-last .code {
position: relative;
}
.code-wrapper.active .code {
background: #f9f9f9;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
left: 16px;
height: initial;
margin-top: 15px;
padding: 15px;
right: 16px;
opacity: 1;
transition: 0.3s all ease-in-out;
width: initial;
}
.popover {
left: initial !important;
right: 16px !important;
top: 16px !important;
}
.platform-android .popover {
margin-top: 10px;
}
.color-green {
color: green;
}
.color-blue {
color: blue;
}
.color-red {
color: red;
}
div.relative {
position: relative;
left: -30px;
}
.round-button {
width: 25%;
}
.round-button-circle {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 50%;
border: 10px solid #cfdcec;
overflow: hidden;
background: #4679BD;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background: #30588e;
}
.round-button a {
display: block;
float: left;
width: 100%;
padding-top: 50%;
padding-bottom: 50%;
line-height: 1em;
margin-top: -0.5em;
text-align: center;
color: #e2eaf3;
font-family: Verdana;
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
}
/* SlideShow */
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
/* Select styles */
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background: #fff;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #fff;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
#media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}
<ion-view ng-model="title" view-title={{title}}>
<ion-content ng-controller="Wallet_management_Ctrl">
<br /><br /><br />
<label class="item item-input notIE item-select">
<div ng-if="showlang == 'en'" class="input-label" ng-model="weblist">Site</div>
<div ng-if="showlang == 'ita'" class="input-label" ng-model="weblist">Sito</div>
<select ng-model ="site">
<option ng-repeat="item in weblist" >{{item}}</option>
</select>
</label>
<label class="item item-input item-select">
<div ng-if="showlang == 'en'" class="input-label" >Currency</div>
<div ng-if="showlang == 'ita'" class="input-label" >Valuta</div>
<select ng-model="currency" >
<option ng-if = "showBitfinex()" ng-repeat="item in symbolsBitfinex" >{{item}}</option>
<option ng-if = "showBinance()" ng-repeat="item in binance" >{{item}}</option>
<option ng-if = "showCoinmarketcap()" ng-repeat="item in coinmarketcapsymbol" >{{item.symbol}}</option>
<option ng-if = "showBittrex()" ng-repeat="item in symbolsBittrex" >{{item}}</option>
<option ng-if = "showPoloniex()" ng-repeat="item in symbolsPoloniex" >{{item}}</option>
<option ng-if = "showCryptopia()" ng-repeat="item in symbolsCryptopia" >{{item}}</option>
<option ng-if = "showBitstamp()" ng-repeat="item in symbolsBitstamp" >{{item}}</option>
</select>
</label>
<div class="list">
<label class="item item-input">
<span ng-show="showlang == 'en'" class="input-label">Amount</span>
<span ng-show="showlang == 'ita'" class="input-label">Quantità</span>
<input ng-show="showlang == 'en'" type="number" placeholder="Amount" min="0" ng-model="amount">
<input ng-show="showlang == 'ita'" type="number" placeholder="Quantità" min="0" ng-model="amount">
</label>
</div>
<div class="list">
<label class="item item-input">
<span ng-show="showlang == 'en'" class="input-label">Price in $ </span>
<span ng-show="showlang == 'ita'" class="input-label">Prezzo in $ </span>
<input ng-show="showlang == 'en'" type="number" step="0.01" placeholder="Price in $" min="0" ng-model="price">
<input ng-show="showlang == 'ita'" type="number" step="0.01" placeholder="Prezzo in $" min="0" ng-model="price">
</label>
</div>
<div class="col text-center">
<button ng-show="showlang == 'en'" class="button button-block button-positive" ng-click="add()">Add</button>
<button ng-show="showlang == 'ita'" class="button button-block button-positive" ng-click="add()">Aggiungi</button>
</div>
<ion-item-group>
<ion-divider color=#9FA8DA>
<ion-item ng-if="showlang == 'en'" class="row">
<h3 class="col" align="center">Site</h3>
<h3 class="col" align="center">Currency</h3>
<h3 class="col" align="center">Amount</h3>
<h3 class="col" align="center">Purch. P. </h3>
<h3 class="col" align="center"></h3>
</ion-item>
<ion-item ng-if="showlang == 'ita'" class="row">
<h3></h3>
<h3 class="col" align="center">Sito</h3>
<h3 class="col" align="center">Valuta</h3>
<h3 class="col" align="center">Qnt.</h3>
<h3 class="col" align="center">P. Acq. </h3>
<h3 class="col" align="center"></h3>
</ion-item>
<ion-item class="row" ng-model="walletlist" ng-repeat="item in walletlist">
<div class="col" align="center">{{item[0]}} </div>
<div class="col" align="center">{{item[1]}} </div>
<div class="col" align="center">{{item[2]}} </div>
<div class="col" align="center">{{item[3]}} </div>
<div class="col" align="center"><button class="button button-assertive button-small, ion-ios-trash" ng-click="delete(item)"></button></div>
</ion-item>
</ion-divider>
</ion-item-group>
</ion-content>
</ion-view>
A think that I should modify CSS file, but I don't know how I can do! I tried with some similar mistakes solved, but I didn't solve the problem

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;
}
});
});