Develop Reference

Custom selector wont click because of display property

So i have made a custom selector like
<div class="search">
<input class="custom-selector" type="text" autocomplete="off" >
<ul class="custom-options hidden">
<li>New York</li>
<li>Moscow</li>
<li>Baku</li>
</ul>
</div>
and whenever i focus on the input the class hidden(only has display:none;) gets removed, and on blur(unfocus) it gets added back
$('.custom-selector').focus(function() {
$(".custom-options").removeClass("hidden");
}).blur(function() {
$(".custom-options").addClass("hidden");
})
On the next step i needed a function to onclick get the li value and copy it to the input ,but whenever i click on the li ,the input gets unfocused and the onclick function cant work on a display none,one solution i found was opacity 0 instead of display none for hidden class,is there more optimal and correct way to fix this issue?

Edit: You can add a timeout maybe?
$('.custom-selector').focus(function() {
$(".custom-options").removeClass("hidden");
}).blur(function() {
setTimeout(function () { $(".custom-options").addClass("hidden") }, 350);
})
$('.custom-options > li').click(function(e) {
$('.custom-selector').val($(this).text());
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
<input class="custom-selector" type="text" autocomplete="off">
<ul class="custom-options hidden">
<li>New York</li>
<li>Moscow</li>
<li>Baku</li>
</ul>
</div>

You could use a combination of focusable elements and the :focus-within pseudo-class to not lose focus.
$('.custom-options a').click(function (ev) {
const selected = ev.target.textContent;
$('.custom-selector').val(selected);
ev.target.blur();
});
.custom-options {
display: none;
}
.search:focus-within .custom-options {
display: block;
}
.custom-options a {
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
<input class="custom-selector" type="text" autocomplete="off">
<ul class="custom-options">
<li>
New York
</li>
<li>
Moscow
</li>
<li>
Baku
</li>
</ul>
</div>

Toggle dropdown and hide on outside click

I got this dropdown menu which works, but I would also like it to close when I click outside it… I've tried some answered solutions but something's wrong and I can't figure it out..Could someone point what am I missing out here? Thanks a lot
$("#toggle").on('click', function() {
$(".dropdown").toggleClass("dropdown--visible");
});
$(document).click(function(){
$(".dropdown").hide();
});
$(".dropdown").click(function(e){
e.stopPropagation();
});
.dropdown {
background: red;
display: none;
}
.dropdown--visible {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle">Toggle dropdown</button>
<div class="dropdown">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>

$("#toggle").on('blur click', function() {
$(".dropdown").toggleClass("dropdown--visible");
});
$(document).click(function(){
});
.dropdown {
background: red;
display: none;
}
.dropdown--visible {
display: block!important;
}
.dropdown--invisible {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle">Toggle dropdown</button>
<div class="dropdown">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>

You have setup a click event listener for document and it will execute all the time when you click anywhere.
You can use a common class to filter out the dropdown events.
<button id="toggle" class="dd">Toggle dropdown</button>
<div class="dropdown dd">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
$(document).click(function(e){
if (!$(e.target).hasClass('dd')) {
$(".dropdown").removeClass("dropdown--visible");
}
});
Also better use removeClass() without using hide() since hide() adds a display:none; directly to the element and will be hard to control.

This vanilla-flavored solution uses a handleDropdown function that checks two conditions:
- Was the toggle button clicked?
- Is the dropdown currently hidden?
If both are true, it shows the dropdown. Otherwise, it hides the dropdown.
const dropdown = document.getElementsByClassName("dropdown")[0],
toggle = document.getElementById("toggle");
document.addEventListener("click", handleDropdown);
function handleDropdown(event){
if(event.target == toggle && dropdown.style.display != "block"){
dropdown.style.display = "block";
}
else{
dropdown.style.display = "none";
}
}
.dropdown {
background: red;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle">Toggle dropdown</button>
<div class="dropdown">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>

jQuery change z-index with data-*

I have divs that all occupy the same space, and I want to set up jQuery that has one div come on top of the other as different tabs are clicked. I assume this has to be done by changing the z-index attribute using a data-* attribute that connects the tab to the div.
/*The tabs to be clicked*/
<ul class="tabs">
<li class="tab" data-tabcontainer-id="websites" style="background-color:#1aa3ff;">Websites</li>
<li class="tab" data-tabcontainer-id="sitemaps">Sitemaps</li>
<li class="tab" data-tabcontainer-id="pages">Pages</li>
</ul>
/*The divs that need to come on top of each other*/
<div id="websites" class="tabcontainer">Websites</div>
<div id="sitemaps" class="tabcontainer">Sitemaps</div>
<div id="pages" class="tabcontainer">Pages</div>

DEMO
http://plnkr.co/edit/aNomjINfbYYrRUhMj63A?p=preview
This is how you can change the z-index property using the data attribute.
JS:
jQuery(document).ready(function(){
$('.tab').click(function(){
var target = $(this).data('tabcontainer-id');
$('.tabcontainer').css('z-index', '0'); //resets z-index to 0 for all other
$('.tabcontainer#'+target).css('z-index', '1'); //sets z-index for current target to 1
})
});
I wrote the answer just to meet what you were asking. But reading your question I think you should have a look at the tabs feature by jQuery UI. May be it will help.
https://jqueryui.com/tabs/

madalin ivascu's answer is quite right according to me.
May be bit off the topic, but you can use Jquery UI for the tabs. Easy to implement and work with.
You don't need to worry about managing the z-index in this case. But it might not be appropriate for your case.
<div id="tabs">
<ul >
<li>Websites</li>
<li>Sitemaps</li>
<li>Pages</li>
</ul>
<div id="websites" class="tabcontainer">Websites</div>
<div id="sitemaps" class="tabcontainer">Sitemaps</div>
<div id="pages" class="tabcontainer">Pages</div>
</div>
Fiddle : https://jsfiddle.net/uxwyj4d4/

better go with toggle display:block/none
$('.tabcontainer').not('.tabcontainer:first').hide();
$('.tab').click(function(){
//toggle active class on tabs
$('.tab').removeClass('active');
$(this).addClass('active');
//show corresponding tab container
var id = '#'+$(this).attr('data-tabcontainer-id');
$('.tabcontainer').hide();//here you can go with another class like above that will toggle between block and none
$(id).show();
});
demo:http://plnkr.co/edit/gPIwv80vUIUTQ46Bderj?p=preview

Example for showing tabs using vanilla js, no jQuery is required.
This example use only display instead of z-index.
// get tabs
var targets = {
websites: document.getElementById('websites'),
sitemaps: document.getElementById('sitemaps'),
pages: document.getElementById('pages')
},
show = function(target) {
hideAll();
targets[target.dataset.tabcontainerId].style.display = '';
},
hideAll = function() {
// hide all tabs
Object.keys(targets).forEach(function(key) {
targets[key].style.display = 'none';
});
};
// when click on link show tab
document.getElementById('w').addEventListener('click', function(event) {
show(event.target);
});
document.getElementById('s').addEventListener('click', function(event) {
show(event.target);
});
document.getElementById('p').addEventListener('click', function(event) {
show(event.target);
});
#websites,
#sitemaps,
#pages {
position: absolute;
top: 150px;
width: 100px;
height: 100px;
}
#websites {
background-color: red;
}
#sitemaps {
background-color: blue;
}
#pages {
background-color: green;
}
<ul class="tabs">
<li id="w" class="tab" data-tabcontainer-id="websites" style="background-color:#1aa3ff;">Websites</li>
<li id="s" class="tab" data-tabcontainer-id="sitemaps">Sitemaps</li>
<li id="p" class="tab" data-tabcontainer-id="pages">Pages</li>
</ul>
<div id="websites" class="tabcontainer">Websites</div>
<div id="sitemaps" class="tabcontainer">Sitemaps</div>
<div id="pages" class="tabcontainer">Pages</div>

Menu drawer toggle (slide up/down)

I have a simple menu and from it, i am using jQuery to toggle visibility of few DIV's.
Code is pretty straightforward, like bellow, and if i am not asking too much, i could use some help with additional functionalities.
<div id="one" class="navLinks"> content 1 </div>
<div id="two" class="navLinks"> content 2 </div>
<div id="three" class="navLinks"> content 3 </div>
<div class="nav">
<nav>
1
2
3
Normal Link
</nav>
</div>
$('nav a').click(function() {
$('.navLinks').hide();
$(this.getAttribute('href')).slideToggle('slow')
});
So, currently, if the user click on the link, a div will slide from the top, but except that, i would need 2 more things.
If user opens, lets say link no.2, and after that, he wants to close it by clicking on the same link, div should slide up (instead of down like it currently does).
Similiar to this, if the user opens link no2, and after that wants to open link no1, after the click, that div would need to slide up and be shown.
I know i am asking too much, but any help would be greately appreciated.
FIDDLE http://jsfiddle.net/4rfYB/38/

I suggest using jQuery's not() to exclude the requested element from those being hidden.
That way, you can hide all content areas that are not the requested one.
I've also used slideUp('slow') instead of hide(), purely for stylistic reasons.
$('nav a').click(function() {
var $requested = $(this.getAttribute('href'));
$('.navLinks').not($requested).slideUp('slow');
$requested.slideToggle('slow')
});
.navLinks {
display: none;
color: white;
}
div#one {
background: red;
height: 100px;
}
div#two {
background: blue;
height: 80px;
}
div#three {
background: black;
height: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<nav>
1
2
3
</nav>
</div>
<div id="one" class="navLinks">content 1</div>
<div id="two" class="navLinks">content 2</div>
<div id="three" class="navLinks">content 3</div>

You can do something like this:
$('nav a').click(function() {
$(this.getAttribute('href')).toggleClass('open').slideToggle('slow',function() {
$(this).siblings('.open').slideToggle('slow').toggleClass('open');
});
});
http://jsfiddle.net/4rfYB/39/

Refresh list after adding an item with jQuery UI sortable plugin

Alright so I have a nested sortable list, each item is therefore both a container and a sortable element.
The problem I am facing is that, whenever I add a new element, I want jQuery to refresh its internal state with the new item.
According to the documentation, one has to call the sortable method passing as parameter 'refresh', but still I can't make it work.
Sample code:
http://jsfiddle.net/X5sBm/
JavaScript:
$(document).ready(function() {
var list = $('#mycontainer ul').sortable({
connectWith: '#mycontainer ul',
placeholder: 'myplaceholder'
});
function addElement(text) {
$('#mycontainer > ul').append('<li>' + text + '<ul></ul></li>');
list.sortable('refresh');
}
addElement('yolo');
});
HTML:
<div id="mycontainer">
<ul>
<li>
Some text
<ul>
</ul>
</li>
<li>
Some text 2
<ul>
</ul>
</li>
</ul>
</div>
CSS:
#mycontainer > ul {
display: block;
}
#mycontainer > ul ul {
min-height: 10px;
padding-left: 20px;
}
.myplaceholder {
background-color: yellow;
}
Try to drag one pre existing item under the newly added one, you won't be able to do so even after the refresh.

I found a cheap fix:
I call sortable again on the same tag reinitialising the Sortable plugin like so:
$('#mycontainer ul').sortable({
connectWith: '#mycontainer ul',
placeholder: 'myplaceholder'
});
and it works.

The key understanding and take-away is to make the dynamically created <ul></ul> initialized with the sortable options. I suggest making an options object for easy re-use.
$(document).ready(function() {
const container = $('#mycontainer ul');
const options = {
connectWith: '#mycontainer ul',
placeholder: 'myplaceholder'
};
container.sortable(options);
function addElement(text) {
let newListItem = $('<li>').text(text);
newListItem.append($('<ul>').sortable(options)); // <- key concept
$('#mycontainer > ul').append(newListItem);
//container.sortable('refresh');
}
addElement('yolo');
});
#mycontainer > ul {
display: block;
}
#mycontainer ul ul {
min-height: 10px;
padding-left: 20px;
}
.myplaceholder {
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="mycontainer">
<ul>
<li>
Some text
<ul>
</ul>
</li>
<li>
Some text 2
<ul>
</ul>
</li>
<li>
Some text 3
<ul>
</ul>
</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</body>
</html>