We Keep Coding

Bulma hoverable dropdown doesn't show

js computes the structure below, i need a dropdown when the button is hovered whereas onclick should trigger the form submit.
nothing happens when i hover the button area. Is it because of is-active missing?

In Bulma's official docs about the dropdown menu, the example's indent can be confusing.
The "dropdown-menu" 'div' is a childnode of the main dropdown 'div'.
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Hover me</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
</div>
</div>
</div>
</div>

Data-filter showing nothing by default

i have this code and i wanted him to not show anything unless clicking on the div.By default it shows everything listed but i need it to just show things filtered by click. Any ideas?
<section class="our_services_tow">
<div class="container">
<div class="architecture_area services_pages">
<div class="portfolio_filter portfolio_filter_2">
<ul>
<li data-filter=".enc"><i class="fa fa-archive" aria-hidden="true"></i>ENCOMENDAS</li>
<li data-filter=".format"><i class="fa fa-file" aria-hidden="true"></i>FORMATOS FICHEIRO</li>
<li data-filter=".prazos"><i class="fa fa-calendar" aria-hidden="true"></i>PRAZOS</li>
<li data-filter=".entreg"><i class="fa fa-truck" aria-hidden="true"></i>ENTREGAS</li>
<li data-filter=".pag"><i class="fa fa-credit-card" aria-hidden="true"></i>PAGAMENTOS</li>
</ul>
</div>
<div class="portfolio_item portfolio_2">
<div class="grid-sizer-2"></div>
<div class="single_facilities col-sm-7 enc">
<div class="who_we_area">
<div class="subtittle">
<h2>blablabla</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
<div class="single_facilities col-sm-7 format">
<div class="who_we_area">
<div class="subtittle">
<h2>Preferência de formatos de ficheiro.</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>

make the div hidden using css so it would load up hidden, make another div to have onclick() event(why div? you can use a button) to call a JavaScript function and display the div that is hidden using that function

Selecting an element that has just been clicked JQuery

I have a <div> containing a <a> tags and further divs:
<div>
<div class="icons">
<div class="group popOutDisplay">
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fas fa-bicycle"></i>
</div>
<div class="group">
<i class="fa fa-globe"></i>
</div>
<div class="group bottom">
<i class="fa fa-trash"></i>
</div>
</div>
<div class="content">
<div id="128910";>
<p>some content</p>
</div>
<div id="239019";>
</div>
<div id="346653";>
</div>
</div>
</div>
Im trying to select the data attribute on the anchor tag with jquery so that i can display the the <div> tags in <div class="content"> which have the same ID (if that makes sense?).
So far i've been able to identify the data id with
$(".group.popOutDisplay a")[0].attributes[1].value;
but this only gives the ID of the first element, due to the [0] index.
tldr:
How can I get the data-ID of the <a> tag that has just been clicked?

Here we go:
$('.popOutDisplay a').click(function(e) {
e.preventDefault();
console.log($(this).data('id'));
});
Here the documentation of .data() attribute.
Demo: https://jsfiddle.net/ru4pjz3c/2/

You can use ".click()" for this. check snippet below..
$('.popOutDisplay a').click(function(e){
e.preventDefault();
var elID = $(this).data('id');
console.log(elID);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<div>
<div class="icons">
<div class="group popOutDisplay">
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fas fa-bicycle"></i>
</div>
<div class="group">
<i class="fa fa-globe"></i>
</div>
<div class="group bottom">
<i class="fa fa-trash"></i>
</div>
</div>
<div class="content">
<div id="128910";>
<p>some content</p>
</div>
<div id="239019";>
</div>
<div id="346653";>
</div>
</div>
</div>

$(".group a").click(function(){
var data=$(this).attr("data-id");
alert(data)
});
To retrieve the value's attribute as a string without any attempt to convert it, use the attr() method.

$(document).on("click", "[data-id]", function (event){
event.preventDefault();
var id = $(this).attr("data-id");
// Apply your logic here
// $("#" + id)
});

bind click event listener on the a element container div <div class="group popOutDisplay". the reason is because click events on the a elements will bubble up to div container.
something like
$('.group.popOutDisplay').bind('click', function(e) {
var target = e.target;
if (target.tagName.toLowerCase() === 'a') {
e.preventDefault(); //prevent the default action of navigating to the url
var id = target.dataset.id;
//you now have the id;
$('#' + id).css('display', 'block'); //display the div
}
});

Why is this div completely invisible to jQuery?

I have this div (the topmost one in the markup below) in my HTML code that I'm trying to find via jQuery .children(). For some reason jQuery just can't find it.
This can be tested by running this:
$($('<p class="info-item"><span class="info-item-key">Gender:</span><span class="info-item-value">Male</span><span class="info-item-edit-button"> <a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a></span><div class="form-inline info-item-edit-input"><div class="form-group"><div class="input-group"><input type="text" class="form-control" value="" /><div class="input-group-addon"><a class="black-link info-item-edit-save-link"><i class="fa fa-check"></i></a></div></div></div></div></p>')[0]).children()
Here is the same markup contained in that code, but better formatted:
<p class="info-item">
<span class="info-item-key">Gender:</span>
<span class="info-item-value">Male</span>
<span class="info-item-edit-button">
<a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a>
</span>
<div class="form-inline info-item-edit-input">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" value="" />
<div class="input-group-addon">
<a class="black-link info-item-edit-save-link">
<i class="fa fa-check"></i>
</a>
</div>
</div>
</div>
</div>
</p>
For context, I'm trying to use jQuery to show the edit form when the edit button is clicked.
Is there any reason why this div seems to be invisible to jQuery? .contents() can't find it either. (Try it.)
If it helps, that div is initially hidden with display: none in CSS, but even trying it in a JS console session attached to a document that doesn't have that CSS results in the div not being found either. (Try it in the StackOverflow JS console, or any other site, if you want.)

That's because the markup is invalid. div can't be child of a p element. p element can only have phrasing content.
Consider this simple example:
$('<p><div></div></p>');
This is how my Chromium browser renders the above markup:
<p></p><div></div><p></p>

The following fiddle shows you how to access the div you are looking for. I added some text within the div so you can see the alert.
https://jsfiddle.net/xw9Lteww/1/
JS
$(document).ready( function() {
alert($(".form-inline").text());
});
HTML
<p class="info-item">
<span class="info-item-key">Gender:</span>
<span class="info-item-value">Male</span>
<span class="info-item-edit-button">
<a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a>
</span>
<div class="form-inline info-item-edit-input">
hey
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" value="" />
<div class="input-group-addon">
<a class="black-link info-item-edit-save-link">
<i class="fa fa-check"></i>
</a>
</div>
</div>
</div>
</div>
</p>

Semantic Ui Dropdown on hover

I want my semantic ui dropdown menu to trigger on hover instead of click, it works on click, but not hover.
Javascript:
$('.ui.dropdown').dropdown({on:'hover'});
HTML:
<div class="ui dropdown item">
<i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
<div class="menu">
<a class="item"><i class="fa fa-users"></i> Players</a>
<a class="item"><i class="fa fa-user-md"></i> Staff</a>
</div>
</div>

If you want hover effect to open dropdown menu then you don't need to use javascript, instead you can add class simple to your parent div:
<div class="ui simple dropdown item">
<i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
<div class="menu">
<a class="item"><i class="fa fa-users"></i> Players</a>
<a class="item"><i class="fa fa-user-md"></i> Staff</a>
</div>
</div>
Fiddle Demo

This is the same answer as above, just cleaner.
$('.dropdown').dropdown({transition: 'drop', on: 'hover' });

you can take this, it works for me
$('.dropdown').dropdown({transition: 'drop' }).dropdown({ on: 'hover' });

I use this:
$('.menu > .ui.dropdown').dropdown({
on: 'hover'
});
And it works well. On your case, try to select the parent of dropdown item.