Develop Reference

how to make jquery menu be closed by default

Im new to JS, so Im sorry for such easy question. I have slide up/down menu, I want it to be closed by default when the page loads and open when clicking. How can I do this? Thanks very much for the responses. Here is the code:
$('.button-show').click(function() {
if ($(this).hasClass('hidden-menu')) {
$(this).next().slideDown(300);
$(this).removeClass('hidden-menu');
} else {
$(this).next().slideUp(300);
$(this).addClass('hidden-menu');
}
return false;

You need to have the .hidden-menu class on the menu when the page loads. You can add it directly to the html so that it is hidden without any javascript having to run:
<div class="menu hidden-menu">
Or you can use some javascript after the DOM has loaded, which is similar to what you have now just somewhere outside of the click handler:
$(".menu").addClass("hidden-menu")

Add to your .ready() function to set the hidden-menu class by default:
// when your page finished loading
$(document).ready(function () {
// check if there is no .hidden-menu class
if (!$(".MENUCLASS").hasClass("hidden-menu")
{
// then add it
$(".MENUCLASS").addClass("hidden-menu");
}
});
or just simply put it in your HTML element, no hassle:
<div class="MENUCLASS hidden-menu">
// stuff
</div>
hope that helps

on page load you just add inline css display:none;
you problem will be solved.

First of all you have to hide your div by default using CSS and apply jQuery see below code
$('.button-show').click(function() {
jQuery('.menu').slideToggle();
jQuery(this).toogleClass();
});

check for hasClass to add class

I have a small panel that slides out from the bottom. It has a chevron up icon. I am building a jquery snippet that bring it up (opens it) and closes it but all it must change the chevron from up to down.
The opening and closing is working and the chevron changes when it opens but it doesn't reset back to chevron up when it closes. Something is wrong in my conditional statement.
This is what I have so far
<script>
$("#openchat").click(function(){
$("#floatingmenu").toggleClass("chatbox-open");
if ($(this).hasClass("chatbox-open")) {
$(this).removeClass("fa-chevron-up");
$(this).addClass("fa-chevron-down");
} else if (!$(this).hasClass("chatbox-open")) {
$(this).addClass("fa-chevron-down");
$(this).removeClass("fa-chevron-up");
}
});
</script>
I am attaching a CODEPEN DEMO
BTW, my .chatbox-open class is what opens it and closes it. The other classes are simple font-awesome classes for the icons
Any help please

Your code only ever goes into the else because #openchat never has its classes toggled elsewhere.
You can just change to this
$("#openchat").click(function () {
$("#floatingmenu").toggleClass("chatbox-open");
$(this).toggleClass("fa-chevron-up fa-chevron-down")
});
Live example: http://codepen.io/anon/pen/myBeEb

actually you don't need that check because if $(this).hasClass("chatbox-open") is false it will go straight to else and execute it.
<script>
$("#openchat").click(function(){
$("#floatingmenu").toggleClass("chatbox-open");
if ( $(this).hasClass("chatbox-open") ){
$(this).removeClass("fa-chevron-up");
$(this).addClass("fa-chevron-down");
} else {
$(this).addClass("fa-chevron-down");
$(this).removeClass("fa-chevron-up");
}
});
</script>
just remove from else the if (!$(this).hasClass("chatbox-open"))

Creating Class on Image with JQuery

Right now I am trying to add a class to images when they are landscape using the following code:
$('.gallery img').each(function() {
if ($(this).width() > $(this).height()) {
$(this).addClass('landscape');
}
});
The code is working some times, but sometimes the class is not added, thus the styles I have are not applied. I have tried with and without the $(document).ready function, along with putting it next to the images rather than at the end of the code, but nothing is consistently adding the class to the landscape images. I'm not sure what else to try. Any suggestions?

Also listen to a load event, since some images might not be loaded (and therefore have unknown width/height):
// Put this in your $(document).ready
function handleImage($image) {
if ($image.width() > $image.height()) {
$image.addClass('landscape');
}
}
$('.gallery img').each(function() {
handleImage($(this));
}).load(function() {
handleImage($(this));
});
Note that having width and height attributes on image tags is recommended if you know the dimensions beforehand. Adding those attributes would void the need to have an onload handler.

jquery's removeAttr function inside $(document).ready doesn't work

Got stuck with some trouble.
I got a page, where I use #media to create mobile and tablet version separatly. In mobile version I use mmenu jquery plugin, to make a sliding menu. In tablet version I do not want to use this menu, but still planning to use it's html. So I decided to remove id, that shows mmenu plugin where it need to make sliding menu. But for some reason juery's removeAttr does not work as I expected.
Ps: I'm pretty new to js, so I might not know about thihgs related to browser workings.
I got this code (html is pretty simple - nav, that wraps a bunch of ul's) :
var func = function() {
var width = $(window).width();
var menu = $(".menu");
/*if it is tablet*/
if (width > 401) {
menu.removeAttr("id");
}
/*loading mmenu*/
$(function() {
$('#my-menu').mmenu({
slidingSubmenus: false,
zposition: "next"
});
});
};
$(document).ready = func();
I'll be very happy if someone clarifies where is my mistake.

You're binding document.ready incorrectly. It should be
$(document).ready(func);
You don't set the property, and you don't call your function.

Instead of removing the ID from #my-menu, you could move the function to create the menu inside the width-checking function. That way, the menu is only created if the width is wider than 401. Otherwise it's skipped altogether.
if (width > 401) {
$(function(){
$('#my-menu').mmenu(...);
});
}

Show/Hide div using if then statement (javascript)

I have this show/hide set up here: http://jsfiddle.net/TwDSx/38/
What I would like to do is have the plus sign go away if the content is showing and vise versa if the content isn't showing hide the minus sign and show the plus.
I read articles on this using images to swap out, but nothing with just using html/css. Also, I would like to keep the javascript out of the html if this is possible, and just call for it externally.
any help is appreciated!

EDIT :
You can attach an event handler on your click to toggle the display attribute of the + or - button
$('#hide,#show').click(function(){
$('#hide,#show').toggle();
})
Quick demo:
http://jsfiddle.net/TwDSx/39/

I modified your Javascript a little and extended it so you can keep it in an external file, you just need to ensure you hide the #show div with CSS if you load the page with the content already showing, or vice-versa for the #hide.
The Javascript is as follows:
$('#show').click(function() {
ShowClick();
});
$('#hide').click(function() {
HideClick();
});
//This Javascript can be external
function ShowClick() {
$('#content').toggle('slow');
$('#hide, #show').toggle();
};
function HideClick() {
$('#content').toggle('fast');
$('#show, #hide').toggle();
};
The Js-Fiddle can be seen here: http://jsfiddle.net/mtAeg/

I think the simplest solution is to have only one button, #toggle, and to change the content of that button like so:
$('#toggle').click(function () {
if (this.innerHTML == '-') {
$('#content').slideUp('fast');
this.innerHTML = '+';
} else {
$('#content').slideDown('slow');
this.innerHTML = '-';
}
});
fiddle