Develop Reference

how to load my page with sidebar hidden

I have created a sidebar that hides with the .click() function targeting an image with the id of "cross".
It is my goal to have page load with no sidebar (.sidebar_menu) visible, and with my menu hamburger (.bars) visible . How do i do this?
HTML:
<img class="bars toggle_menu" src="http://res.cloudinary.com/dnooxiorz/image/upload/v1502388038/thinbarsfinal_knx5mw.png">
<div class="sidebar_menu">
<img id="cross" src="http://res.cloudinary.com/dnooxiorz/image/upload/v1502391349/cross_tcn6yk.png">
<center>
<h1 class="boxed_item">HELLO</h1>
</center>
<ul class="navigation_selection">
<li class="navigation_item">Projects</li>
<li class="navigation_item">About</li>
<li class="navigation_item">Resume</li>
</ul>
</div>
Javascript:
$(document).ready(function(){
$("#cross").click(function(){
$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");
});
$(".toggle_menu").click(function(){
$(".sidebar_menu").removeClass("hide_menu");
$(".toggle_menu").removeClass("opacity_one");
});
});
Best,
John

Try this -
$(document).ready(function(){
var hideSideMenu = function(){
$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");
};
hideSideMenu();
$("#cross").click(function(){
hideSideMenu();
});
$(".toggle_menu").click(function(){
$(".sidebar_menu").removeClass("hide_menu");
$(".toggle_menu").removeClass("opacity_one");
});
});
Basically, you need to perform the action performed inside your #cross click function, also on the document load to have that as an initial state.
Wrapping it in a function will help you keep the functionality to be executed upon close all in one place. I recommend you do similar for showing the side menu by wrapping the actions in a function and calling it like above.

You can try adding the classes in the HTML page, so It loads with the sidebar hidden.
<div class="sidebar_menu hide_menu">...</div>
<img class="bars toggle_menu opacity_one" src="...">
Or you can use:
$("#cross").click();
Inside $(document).ready(); so when it loads, the image that toggles the sidebar gets clicked.

Just add tge hide_menu class in your mark-up:
<div class="sidebar_menu hide_menu">

Show elements of a specific class Javascript(Jquery)

<div id=klik>KLIK </div>
<div class="list">
<div class="list-wrapper">
<div class="line">1</div>
<div class="line">2</div>
</div>
<div class="line">3</div>
<div class="line">4</div>
</div>
This is the Html. I use Javscript to hide the whole list first. Then I would like to make a onclick function to show just the first two elements, the two in div list wrapper. This the code i have written.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list-wrapper").show();
});
});
The problem it never shows the elements.

You are trying to show an element that is still wrapped inside a hidden parent element. In case you hide and show the same selection it is working just fine. You could do it like this:
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show().children().not('.list-wrapper').hide(); //show .list, then hide everything that is not inside .list-wrapper
});
});​
Working demo
EDIT:
And fix your HTML markup (missing quotes "" ) <div id=klik>KLIK</div>

You are hiding the parent element of what you are trying to show. show will only display the elements you called it on, it won't cascade up the DOM tree.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show(); //Show .list elements instead
});
});

Detecting clicks inside a div using wildcards in jQuery

I have got to this so far using the jQuery docs
$('[class^="layout"] > ("*")').click(function(e) {
alert("inside");
});
What I am trying to achieve is detecting whether something inside a div which has a class beginning with the name 'layout' is clicked and returning that parent div's class.
For context an example div would be something like
<div class="builder_body" id="the_content">
<div class="layout_2cwlh_header">
<h1>Header</h1>
</div>
<div class="layout_2cwlh_wrapper">
<div class="layout_2cwlh_content">
<h1>Content</h1>
<p>sometext</p>
</div>
<div class="layout_2cwlh_sidebar">
<h1>Sidebar</h1>
</div>
</div>
</div>
So when I click on anything like a h1/p or anything inside a div, I need to return the parent div's class

I'd suggest:
$('[class^="layout"]').click(function(e) {
e.stopPropagation(); // added to prevent a new alert every
// time the click bubbles to a new parent
alert($(this).closest('div[id]').attr('id'));
});
JS Fiddle demo.

Quite simple actually:
$('[class^="layout"]').click(function(e) {
var parent = $(this).parent;
// do something with the parent.prop('class');
});

jquery closest() tree traversal

I'm having trouble getting my jQuery to work correctly. I have this HTML structure:
<div class="hide"><!-- form --></div>
<div class="button-hide">Hide Form</div>
<div class="button-show">Show Form</div>
When the 'button-show' anchor is clicked, it should hide it's own div, show the above 'button-hide' div and toggle the above 'hide' div:
$(document).ready(function(){
$(".hide").hide();
$(".button-hide").hide();
$("div.button-show a").click(function(){
$(this).closest("div.hide").slideToggle();
$(this).closest("div.button-hide").show();
$(this).hide();
});
});
None of this works for me, am I mis-using the 'closest()' command here?

Just a bit different from the others...
$(".button-show a").click(function(){
$(this).parent().siblings(".button-hide").show();
...
});

You are matching closest on the link not the parent div. Should be .parent().closest()

Yup, closest traverses the ancestors like parents() does. The div above it is NOT an ancestor but a sibling(look at alex's answer). if you had a container div for those divs its better to just use that as a reference like this:
<div class="parent-container">
<div class="hide"><!-- form --></div>
<div class="button-hide">Hide Form</div>
<div class="button-show">Show Form</div>
</div>
then in your jquery
$(".button-show a").click(function(){
$(this).parents(".parent-container").find(".button-hide").show();
etc
})

jQuery hover problem

Hi I would like to slide an element out when the mouse goes over and then slide it back and hide when the mouse goes out..I have this code, but I have problem when the mouse leave the element before the first mouseenter function is completed..The .entry_extend div stay visible. I tried to the hover function, but is the same problem..Please help..Thanks.
jQuery("document").ready(function(){
jQuery(".fire").mouseenter(function(){
jQuery(this).children('.entry_extend').stop(true, false).show('slide',null,500,null);
});
jQuery(".fire").mouseleave(function(){
jQuery(this).children('.entry_extend').stop(true, false).hide('slide',null,500,null);
});
});
<div id="craft" class="fire">
<div class="entry_main">
<a href="" title="">
<img src="" alt="" />
</a>
</div>
<div id="entry_ex_craft" class="entry_extend">
original shisha pipe collection
</div>
</div>
Please Help:)

You are trying to implement a "hover". This works:
jQuery(".fire").hover(
function(){jQuery('.entry_extend', this).stop(true, true).show(500);}
,
function(){jQuery('.entry_extend', this).stop(true, true).hide(500);}
);
Mind you, it isn't a good idea to have the DIV you are sliding in and out within the DIV you are hovering on, since HIDING the DIV alters the boundaries of the DIV containing it. You can end up with some "trembling" activity sometimes because of this.

try combining mouseover+mouseenter and mouseout+mouseleave using binding.. see here:
jQuery("document").ready(function(){
jQuery(".fire").bind('mouseover mousenter',function(){
jQuery(this).children('.entry_extend').stop(true, false).show('slide',null,500,null);
});
jQuery(".fire").bind('mouseout mouseleave',function(){
jQuery(this).children('.entry_extend').stop(true, false).hide('slide',null,500,null);
});
});