Develop Reference

Mobile menu drop down

I'm using the responsive menu script from PureCss example. I'd like for the menu to disappear after the user clicks a link. How could I automatically hide the menu after a click has been made?
I've tried to use hide() or .fadeOut(), but it doesn't work
https://jsfiddle.net/bpvm8b5L/3/

Add an Event Listener to your anchor elements inside the menu that on click trigger a function that reproduce the action of when the hamburger menu icon is pressed, so it removes the class active from
<div id="layout" class=" active">
…
<div id="menu" class='active'>…</div>
So try to add in your ui.js file, inside your main function:
var ulElem = document.getElementById('ulElem');
ulElem.onclick = function (e) {
e.preventDefault();
console.log(e.target.classList.value);
if(e.target.classList.value === "pure-menu-link") {
toggleClass(layout, active);
toggleClass(menu, active);
toggleClass(menuLink, active);
}
}
And remember to set the id name of the ui element on your HTML file as id=uiElem.

You can as well try this
In html, assuming you have something like this:
<nav id="toggleMenu">
//all your links
</nav>
In jquery,
$('#toggleMenu li a').click(function(){
$('#toggleMenu).hide(200);
});

collapsible header content with javascript

i am struggling writing the appropriate javascript to collapse and expand my content
View:
<div>
<h3 id="roleHeader" class="roleHeader collapsible">Title</h3>
<div>Content to display to users</div>
</div>
javascript:
$(document).ready(function() {
//collapsible management
$('.collapsible').collapsible({
});
});

You can implement one very easily
jQuery(function($){
$('.collapsible').click(function(){
$(this).next().stop(true, true).slideToggle();
}).next().hide()
})
Demo: Fiddle

You are probably looking for slideToggle. This function will toggle between sliding the content up and down.
try this
$(document).ready(function() {
$('.collapsible').click(function(){
$(this).slideToggle(500);
});
});
500 is the speed of the animation.
You can also target the object you'd like to hide and show. Either give it an Id, class, or target it specifically with jQuery. Here, when you click on anything that has a class of collapsible, the next div will hide and show.
$(document).ready(function() {
$(".collapsible").click(function(){
$(this).next("div").slideToggle(500);
});
});
If you need the animation to stop when you click on it again to prevent a jumping effect, add .stop(true) before the effect
$(document).ready(function() {
$(".collapsible").click(function(){
$(this).next("div").stop(true).slideToggle(500);
});
});

How would I trigger a javascript responsive menu to hide on click?

I'm using the following JS to show and hive a responsive-specific menu. Basically, when an h4 is clicked, a list with my my within #secondary-navigation slides down. I'm using this menu on a page with page anchors, so I'd like the menu to slideUp when one of the menu items is clicked. How would I go about accomplishing this with my code below? Thanks for any help.
<script>
(function($) {
$(function() {
var header = $('h4', '#secondary-navigation');
header.click(function() {
if($(this).next().is(':hidden')) {
$(this).next().slideDown('fast');
} else {
$(this).next().slideUp('fast');
}
});
});
})(jQuery);
</script><!-- end mobile nav -->

Edit: I misread your question at first. You need to add a second function that triggers when one of the menu children is clicked. That's a separate event.
Assuming your menu items are wrapped in a div or ul with an id of #menu:
$('#menu a').click(function() {
$('#menu').slideUp('fast');
});
Add this as a separate function, outside of the one you posted above.

Hide and show menu with the same button using jquery

I have found a tutorial on some dropdown menu using jquery. It works fine but I want to adjust it just a little. Instead of hiding the menu using hovering, I want to have the same button that showed the menu, to hide it when it is being pressed again. So the same button has to both hide and show the dropdown menu.
The script that im using:
$(document).ready(function () {
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function () { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function () {
}, function () {
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function () {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function () { //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});

Use jQuery's .toggle() http://api.jquery.com/toggle/
$("#yourbutton").click(function() {
$("#yourmenu").toggle();
});

You can save yourself from adding a CSS rule by using jQuery's .toggle method.
$('#yourMenu').toggle()
This will hide it if it's visible, and show it if it's hidden. You can add a number or 'fast', 'slow' as a parameter to make it animate.

jQuery.toggle() function will do this work for you:
$("#button").on('click', function() {
$("#menu").toggle();
});

Yes, toggleClass can be used. Or you can also define your own toggle function in javascript.
you can toggle between the classes or do any other function you want to.
function tog(elemen){
if(elemen.className == "show") {
hide drpdwn
elemen.className="hide";
} else {
make dropdwn visible
elemen.className="show";
}
}

Jquery navigation tabs dropdown using child()

I'm having trouble creating a tab navigation menu. When I hover a navigation item I want to drop down a list with sub-links. I'm using the jquery child() function to display the sub-links of the tab I hover.
Demo: http://jsfiddle.net/GeKv2/5/
When you hover a sub-link it appears to add a class active to it. What am I doing wrong here?..

$('ul.user_menu li').hover(function() {
//show active tab
$(this).addClass("active");
$("ul", $(this)).show();
}, function() {
$(this).removeClass("active");
$("ul", $(this)).hide();
});

You can achieve the same effect using only CSS and the :hover selector.
Take a look here: http://jsfiddle.net/xfBcn/1/