Develop Reference

Wordpress & jQuery Responsive Navigation

I have a problem with the wordpress and with Jquery.
I have this code to show and hide a responsive navigation on the left :
$('.menu').on('click', function(){ if ($('.responsive__menu').hasClass('is-open')) {
$('.responsive__menu').removeClass('is-open');
$('.menu').removeClass('is-active');} else {
$('.responsive__menu').addClass('is-open');
$('.menu').addClass('is-active');}});
It works with my website without Wordpress, but once in Wordpress, it seems that half of the code works : the creation of the cross to close the menu except that the menu does not appear.
Can you enlighten me on some points?
The script is loaded, are there a faster and easier way to transform the code with jquery and toogle () ?
It can only be a trouble about code but why it does not work anymore once on Wordpress ?
Thanks a lot for your help, before asking the question I tried many things. ^^

If it works with any of your websites means the code is good, just you might have conflicts in your css, so include your css which is menu related last, and if it doesn't work either, post your css code, so we could see better what's going on, and there is not need for so much code. Initialize your menu without class .open , in your html and use JQUERY:
$('.menu').on('click', function(){
$(".responsive_menu).toggleClass('open');
});

jQuery comes with wordpress in non-conflict mode , to make sure everything works you should use jQuery variable instead of the $ variable.
you can alternatively do the following
jQuery(document).ready(function($) {
// $ variable can be used here
$('.menu').on('click', function() {
if ($('.responsive__menu').hasClass('is-open')) {
$('.respons__menu').removeClass('is-open');
$('.menu').removeClass('is-active');
} else {
$('.responsive__menu').addClass('is-open');
$('.menu').addClass('is-active');
}
});
});

Javascript/JQuery toggle not functioning IE8

I have the following code which is basically a toggle.
function toggleContent(IDS) {
// Get the DOM reference
var contentId = document.getElementById(IDS);
// Toggle
contentId.style.display == 'block' ? contentId.style.display = 'none' : contentId.style.display = 'block';
}
$(function() {
$(document).on('click','.linky',function(e){
e.preventDefault();
$('div.panello:visible').hide();
$(this).next('div.panello').show();
});
});
All it does is show and hide DIVS.
It works fine on any browser apart from IE8 and older. I get a javascript error "Object doesn't support this property or method".
Is there a way to adapt this to work on IE8?
EDIT: It's a dynamic toggle. The click will tell the script which id to toggle.

since you are using jquery try:
$("'#"+IDS+"'").toggle();

Try setting display to inline-block for IE8.

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(...);
});
}

Alternative to jQuery mobile / Switch + Toggle btn

I wish to not USE jQuery mobile; I kinda can't stand it.
But I need to create a a mobile friendly; mobile first, simple Switch toggle button.
Nothing fancy just like the above; I'd likely go in and just add my green.
Any good alternatives for mobile? jQuery latest wont work; unfortunately, and I really don't want to work with crazy weird API. Ideally just plain JS.

I wrote small plan js switch .. in case you want custom css and require to handle event on toggle.. hope its help
onload = function() {
document.getElementById("switch").addEventListener("click", toggle, false);
};
function toggle()
{
var sw = document.getElementById("switch");
var v = sw.style.cssFloat;
if( v=='right')
sw.style.cssFloat ="left";
else
sw.style.cssFloat = "right";
}
JS Switch

There is pure Css solutions for your question..This css toggle switch uses checkbox for keeping the toggle condition. On if checked and off condition if not checked.
If you do not want to use a checkbox and interested in multiple toggle conditions like tab and other flips.Use this switch. Although I m not sure if this will go fine in mobile devices.
Switch without checkbox +toggle btn

Javascript hide/show toggle works both ways in Opera, but only one way in other browsers

I have a customized show/hide toggle script that I'm using along with CSS3 transitions for the effects.
The script shows the content when clicked, and hides it when the 'HideLink' link is clicked, complete with CSS3 transistions - but only in Opera.
In other browsers the script only works for showing the content, clicking the hide link doesn't work.
See this JSfiddle: http://jsfiddle.net/xte63/

These days with show / hide javascript, I prefer to use HTML5's data-* attributes.
This can already be used in non-HTML5 browsers via the getAttribute and setAttribute function.
I've quickly tried it against IE7, Chrome and Opera and it seems to work.
http://jsfiddle.net/ThJcb/
function showHide(shID) {
var exDiv = document.getElementById(shID);
if(exDiv.getAttribute("data-visible") != 'false'){
document.getElementById(shID+'-show').style.cssText = ';height:auto;opacity:1;visibility:visible;';
document.getElementById(shID).style.cssText = ';height:0;opacity:0;visibility:hidden;';
exDiv.setAttribute("data-visible" , 'false');
} else {
document.getElementById(shID+'-show').style.cssText = ';height:;opacity:0;visibility:hidden;';
document.getElementById(shID).style.cssText = ';height:auto;opacity:1;visibility: visible ;';
exDiv.setAttribute("data-visible" , 'true');
}
}
This allows you to determine the state of the div without having to check for CSS values.
EDIT: As pointed out in the comments, a typo was on the hide link (onlick instead of onclick) which made it appear the above jsfiddle worked whereas it didn't. At least not exactly as I made an error in the logic, setting the "data-visible" to false instead of true.
Here's an updated jsfiddle: http://jsfiddle.net/ThJcb/4/
(javascript snippet above updated also)