We Keep Coding

Javascript to show/hide affects all boxes when one is clicked

I added a simple Javascript to show/hide boxes, which works correctly, but when I click on show all the boxes open. How to fix?
$(document).ready(function(){
$(".header").click(function(){
$(".contents").toggle();
});
});
CSS:
.contents{display:none;}
.header{cursor:pointer; user-select:none;}
HTML:
<div class="header">Exemple</div>
<div class="contents">Exemple</div>
I want only that box I clicked to open or close. Thanks

You need to apply show or hide logic is on box so when you click first need to check that show class exist or not if class not exist then add class to hide the box.
In the opposite if click again then if class exist then remove the class so box will be visible.

Trigger Element Click

JSFiddle Live Demo
Script Explanation
My script is to sort and/or filter a mailbox whereas you can select one of each options and the sort option upon clicking, if it's active it'll switch the icon indicating going from A-Z to Z-A and visa-versa.
The filter option changes the button text and upon clicking on the button it'll animate the button width to the drop down width and then slide down the drop down. Upon clicking again, it'll reverse the process, checking to see if the text has been changed to adjust for the width.
What I Wish To Implement
Upon clicking one of the options apart from the .Active filter/view options, I wish to trigger the click event to reverse the show progress. I have tried to trigger this click hover with using e.target, I'm not sure how to trigger this correctly as my attempts have been doing nothing.

Your trigger event seems to be working fine, you're only triggering it on the wrong element. This seems to be working:
$('.dropdown-toggle').trigger("click");
I've updated the plunker

You can trigger the click this way.
if ($(e.target).closest('.Sort').length) {
if ($(e.target).hasClass('Active')) {
$(e.target).parent().find('i').toggleClass("fa-arrow-down fa-arrow-up");
} else {
$('.dropdown-menu .Sort').find('.Active').removeClass('Active');
$('.dropdown-menu .Sort').find('i').remove();
$(e.target).addClass('Active');
$(e.target).prepend('<i class="fa fa-arrow-down" aria-hidden="true"></i> ');
}
//Here.
//Ideally add another unique class to the main dropdown button and use that instead, otherwise you will have problems when there are multiple elements with dropdown-toggle class.
$('.dropdown-toggle').click();
}

Jquery: Change select box value and and activate a click state

So whats going on is that I have a site that I have taken on for my work. I have two select boxes I am tying into. The problem is when you click the second select box and choose an option it uses ajax to load a second box next to it (a hierarchical select box). The code that I am using is simple and changes the value of the second box back to the "select" option state when the first box is changed. But what it is not doing is creating click state (sorry if I am saying that wrong) but in order for ajax to bring in and remove the third select box the second select box option needs to be clicked.
Is there a way for me to re-create a "click" of the select box.
Here is the jquery:
$(".state.form-select").change(function() {
$('.hierarchical-select .form-select').val('select');
});
Here is a sample fiddle. See this Fiddle

I am not entirely sure, what exactly you are looking for but I feel that this should do the trick:
https://jsfiddle.net/vuvckm3u/5/
$(".state.form-select").change(function() {
$('.hierarchical-select .form-select option:first-child').attr('selected', true);
});

jQuery .prop("disabled",true) not working

I have a dropdown that loads the data and there is a Add button and when the add button is being triggered it will be disabled. It works in the first load, but when the dropdown is onchange the disabled button will be false or not disabled. So how can I still disable the button when the dropdown is being changed. I have also a input field to store the values of the button that has been clicked. Check http://jsfiddle.net/leonardeveloper/qy9u5/.

Problem is, you are appending a new element every time your <select> is changed. You need to be showing and hiding the same respective table each time. You can use jQuery to create those tables using the <option>s. Like so:
$("#loads option").each(function(){
thisNumber = this.value;
$("#displays").append("<table data-table="+thisNumber+"><tr><td>"+thisNumber+"</td><td>"+thisNumber+"</td><td><button class='materialId' value='"+thisNumber+"'>Add</button></td></tr></table>");
$("#displays table").hide();
});
We append the tables (2 in this case) to #displays, and then hide them. When we change the <select> now, we hide all tables, and show the one we selected, I've used data-table for this but there are many ways to target your specific table.
$(document).on("change","#loads", function(){
$("#displays table").hide();
$("#displays table[data-table="+this.value+"]").show();
});
JSFiddle

Try to bind click event also.
Demo
$(document).on("change click","#loads",...

Hiding then focussing on select element underneath

I have a div which hides a select box. When a user clicks on the div it disappears and shows the select box. Then when the user clicks away from the select i want the div to show again and essentially cover it up.
so, to hide the div I have the following:
onclick="document.getElementById(\'infoi'.$div_i.'\').style.display = \'none\';"
When the user has touched the select and clicks away I have the following which covers the select again:
<select name="g_name" onchange="this.form.submit();" onblur="document.getElementById(\'infoi'.$div_i.'\').style.display = \'block\';" style=width:170px;>
for this to work as i want it to though, the user has to actually click the select, even without selecting anything, for it to gain focus and therefore the onblur will turn the div back on.
So, I try the following to hide the div and set the focus on the select:
onclick="document.getElementById(\'infoi'.$div_i.'\').style.display = \'none\'; document.getElementById(\'g_name\').focus();"
Bit it simply does not work, any ideas?

I have a working example of what I think you are after here http://jsfiddle.net/Znct3/10/
looking at your code you were applying focus to an element with an ID of g_name but your select only has a name of g_name