We Keep Coding

jQuery on click again, should hide the box (like toggle)

I have the following example:
https://codepen.io/baidoc/pen/LYVvOZq
jQuery(function ($) {
$(".box").click(function() {
$(".box").removeClass("active");
$(this).addClass("active");
$(".boxContent").removeClass("show-content");
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
});
});
2 Boxes, by default deactivated (hidden), and only once clicked, the content will be shown.
What I'm trying to do: when I click again on the box, it should hide the box (display:none)
I've tried with toggle function, but somehow it doesn't seem to work. What alternative do I have?

What about this?
jQuery(function ($) {
$(".box").click(function() {
var currentActive = $(this).hasClass("active");
$(".boxContent").removeClass("show-content");
$(".box").removeClass("active");
if (!currentActive){
$(this).addClass("active");
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
}
});
});

Try this below :
jQuery(function ($) {
$(".box").click(function() {
$(".box").removeClass("active");
$(this).addClass("active");
if($(".boxContent").hasClass("show-content")){
$(".boxContent").removeClass("show-content");
}else{
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
};
});
});

Removing the selected LI from a UL with the onkeydown event: delete button

I am attempting to remove the selected LI (who's classname is 'selected') from my UL using the onkeydown event: delete button (46). It doesn't seem to remove the LI at all. What am I doing wrong?
Here is a fiddle:
The code in question:
$("#refdocs_list").on('keyup', function(e) {
alert(e.which)
if (e.which == 46) {
('ul li.selected').remove()
}
});

The refdocs_list doesn't receive the keyup, changing it to body for example would do it
$("body").on('keyup', function(e) {
There is no $ ahead of the line inside the if statement
$('ul li.selected').remove()

I had to attach the press to the document level and fix a couple of missing semicolons to get it to work. Here is the modified javascript:
$('#refdocs_list').on('click', 'li', function(e) {
var $this = $(this);
$this.addClass('selected').siblings().removeClass('selected');
document.getElementById('refdocs').value = $this.text();
});
$(document).on('keyup', function(e) {
console.log(e.which);
if (e.which == 46) {
$('ul li.selected').remove();
}
});

Add extra class for link in Javascript [duplicate]

How can I do so that even "toggle_cart" is clickable in the same way as "clickerHeader"
but retains its hover effect (see arrow)?
please see http://jsfiddle.net/realitylab/STE48/3
$('.eventMenu > ul').toggleClass('no-js js');
$('.eventMenu .js ul').hide();
$(document).on("click", function(e) {
var $elem = $(e.target);
if ($elem.hasClass('clickerHeader')) {
$('.eventMenu .js ul').not($elem.next('ul')).hide();
$elem.next("ul").slideToggle();
} else if (!$($elem).parents('.contentHolderHeader').length) {
//} else {
$('.eventMenu .js ul').hide();
}
});

Just wrap both elements in a div ..
http://jsfiddle.net/STE48/5/
.

In the CSS add:
.eventMenu:hover .no-js .contentHolderHeader {
display: block;
}
Also add a display: none to div.eventMenu .contentHolderHeader.
Replace the JS with:
$('.eventMenu > ul').toggleClass('no-js js');
$(".toggle_cart").click(function(e){
$(".contentHolderHeader").slideToggle();
e.stopPropagation();
});
$(".eventMenu").click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$(".contentHolderHeader").slideUp();
});
Remove the inner ul in the HTML.
Tested with/without JS: http://jsfiddle.net/vuF9n/2/

A minimal change to your existing code is to add the following two lines after the first line of your click function:
if ($elem.hasClass('toggle_cart'))
$elem = $elem.next();
In other words, if the span with the arrow is clicked, pretend that actually the anchor element was clicked. In context:
$(document).on("click", function(e) {
var $elem = $(e.target);
if ($elem.hasClass('toggle_cart'))
$elem = $elem.next();
if ($elem.hasClass('clickerHeader')) {
// etc.
Demo: http://jsfiddle.net/STE48/6/

How to jquery .focus() element if user types anythign

I've nested ul activated by hover on parent li.
All works except that I've a search form in fly-out menu, I'd like this input field to be focused if user types anything.
I cannot seem to ge this part right, any ideas? How I've implemented now, works only if I already select input and hit some key, this is because $this is input.
//Flyout menu in big_header
$(".flyout_big").removeClass("fallback");
$("#head_big .categories > ul > li").hover(
function() {
//$('ul', this).stop().slideDown(100);
$(".flyout_big", this).stop().fadeIn("fast");
var offset = $(this).offset();
$(".flyout_big .flyout_arrow", this).stop().animate({top:offset.top},"slow");
//Activate-focus search field on any key-press
$(document).on("keydown",function(e){
//if (e.keyCode == 13) {
// alert("enter");
//} else if (e.keyCode == 27) {
// alert("esc");
//}
//alert("test");
$(".search_field").focus();
});
},
function() {
//$('ul', this).stop().slideUp(100);
$(".flyout_big", this).stop().fadeOut("fast");
});
//End floyout menu in big_header

Html:
<ul>
<li>Test 1<br /><input type="text" /></li>
<li>Test 2</li>
<ul>
Script:
$(document).ready(function()
{
$("ul > li").hover(function()
{
$("ul > li").removeClass('active');
$(this).addClass('active');
});
$('html').on("keyup",function()
{
alert('test');
$("ul > li").filter(".active").children('input').val('test').focus();
});
});
jsFiddle (note that you first have to click once on the html box):
http://jsfiddle.net/6hEwD/

Used this code :
$('li *').hide();
$("ul > li").hover(function(){
var $this = $(this);
$this.find('*').show();
$(document).on("keydown",function(){
$this.children('input').focus();
});
},
function(){
var $this = $(this);
$this.find('*').hide();
});
Fiddle : http://jsfiddle.net/6hEwD/4/
Once the document is on focus and you are hovering the div, you can type into the input.

jQuery menu with click to show and hide on mouseleave

At the moment it shows the divs instead of hiding them and on click it hides just so you can see the movement. Should be .show instead of .hide. On clicking the link, li should slide down and on mouseleave slide back up.
Working example http://jsfiddle.net/DTqDD/3/
jQuery:
$(function() {
var toggleMenu = function(e) {
var self = $(this),
elemType = self[0].tagName.toLowerCase(),
//get caller
menu = null;
if (elemType === 'a') {
//anchor clicked, nav back to containing ul
menu = self.parents('ul').not('ul#mainmenu');
} else if (elemType === 'ul') {
//mouseleft ul, ergo menu is this.
menu = self;
}
if (menu) {
menu.hide('medium');
}
e.preventDefault();
return false;
};
$(document).ready(function() {
$('a.drop').click(function(e) {
$('li#mainmenudrop').show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li#mainmenudrop a').click(toggleMenu);
$('li#mainmenudrop').mouseleave(toggleMenu);
});
});

On li tags change id="mainmenudrop" to class="mainmenudrop" since it ain't valid HTML. Then use the following jQuery code.
$(document).ready(function() {
$('a.drop').click(function(e) {
$(this).next("div").show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li.mainmenudrop').mouseleave(function() {
$(this).children("div").hide('medium');
});
});​
Could this possibly be what you are trying to accomplish?
EDIT:
If you want the divs hidden at the beginning, just add this CSS:
.mainmenudrop div {
display: none;
}