We Keep Coding

Slidetoggle Not working properly on child element of the parent

On clicking .cart-contents-toggle the #cartplus-dropdown div should slide down and at the same time slide up without clicking on it a second time. Here is the URL where this is implemented: Website Link
jQuery(document).ready(function() {
jQuery('#cartplus-dropdown').hide();
jQuery('.cart-contents-toggle').on("click", function() {
jQuery('#cartplus-dropdown').slideToggle();
});
});

Please use the updated code below and let me know if you have any issue or query.
jQuery(document).ready(function() {
jQuery('.cart-contents-toggle').on("click", function() {
jQuery('#cartplus-dropdown').toggle();
jQuery('#cartplus-dropdown').slideToggle();
});
});
Hope this may be helpful to you.

Tried this and working now
jQuery('.c-btn').mouseenter(function(e) {
jQuery('.cartplus-dropdown').slideDown();
e.stopPropagation();
});
jQuery('.c-btn').mouseleave(function(e) {
jQuery('.cartplus-dropdown').slideUp();
e.stopPropagation();
});

Using the script i have, I am able to show .menu on click, but can not get it to disappear again on second click to return to default?

$(document).ready(function(){
$('.nav').hide();
$(".menu").click( function() {
$(".menu").toggleClass("close");
$('.nav').show();
});
});

Try this:
$(document).ready(function(){
$('.nav').hide(); //Class nav in the begin should be closed.
$(".menu").click( function() {
$(".menu").toggleClass("close");
$('.nav').toggle();
});
});
Hope 'll help you :)

Using toggle will work for you.
$(document).ready(function(){
$('.nav').hide();
$(".menu").click( function() {
$(".menu").toggleClass("close");
$('.nav').toggle();
});
});

jQuery on hover show sub links on Navigation Menu

I have a navigation menu, when i hover over the links i want to show each links sub menu then toggle or hide and show each individual one.
At the moment when I hover over the link on the navigation menu it displays all the sub menus for all the links.
I have attached a fiddle with a demo of my code so far: -
http://jsfiddle.net/QTm2c/1/
Here is the jQuery
$(document).ready(function() {
$("li.navmain__item").hover(function () {
$("span.navmain__item--subnavholder").toggle();
})
})
Thanks

Use :
$(document).ready(function() {
$("li.navmain__item").hover(function () {
$(this).children("span.navmain__item--subnavholder").toggle();
});
});
Fiddle

Try this:
$(document).ready(function() {
$("li.navmain__item a").hover(function () {
$(this).siblings().toggle();
})
})

You have to target the specific submenu. Inside the hover() handler, use:
$("span.navmain__item--subnavholder", this.parentElement).toggle();

You just have to get the subnavholder for the element you're hovering. In the callback, the element you're hovering over is stored in this (as an HTML Element).
Changing
$("span.navmain__item--subnavholder").toggle();
to
$(this).parent().find("span.navmain__item--subnavholder").toggle();
Will do the trick!

In your current setup this should do it
$(document).ready(function() {
$("li.navmain__item").hover(function () {
$(this).find(".navmain__item--subnavholder").toggle();
})
})

You could also add indexing to the script. Here is edited, working jssfiddle: http://jsfiddle.net/QTm2c/8/
$(document).ready(function() {
$("li.navmain__item a").hover(function () {
var index = $( "li.navmain__item a" ).index( this );
$("span.navmain__item--subnavholder"+index).toggle();
})
})

How do I hide a element using jquery on click and when a user clicks away?

CODE:
<script type="text/javascript">
$(document).ready(function() {
$('.show_or_hide_link_clicker').click(function() {
$(".the_box_to_show").fadeIn(400);
});
});
</script>
When show_or_hide_link_clicker is clicked the_box_to_show is shown. How do I hide it if show_or_hide_link_clicker is clicked again or when the user clicks away?
Update: This is what I am doing now: http://jsfiddle.net/nFbnr/
Question: How can i remove the double click requirement ot show the div?

jQuery Toggle is what you're looking for.
$('.the_box_to_show').toggle();

When clicking anywhere, check if the element was on the propagation path. If not, the user clicked outside of it so you can hide it.
$(document).click(function(e) {
if ($(e.target).closest(".the_box_to_show").size() === 0) {
$(".the_box_to_show").hide();
}
});
http://jsfiddle.net/vdHAu/

$(document).click(function(e) {
if (!$(e.target).is(".the_box_to_show")) {
$(".the_box_to_show").hide();
}
});
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(".the_box_to_show").fadeIn(400);
});

An another way without delegate event to document level:
you have to set attribute tabindex to the box and CSS outline for style
http://jsfiddle.net/GV56b/
$(document).ready(function () {
$('.show_or_hide_link_clicker').click(function () {
$(this).hide();
$(".the_box_to_show").fadeIn(400, function () {
this.focus()
});
});
$(".the_box_to_show").on('blur',function(){
$(this).hide();
$('.show_or_hide_link_clicker').fadeIn(400);
});
});

check this out
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(this).addClass('active);
$(".the_box_to_show").fadeIn(400);
});
$(document).on('click', 'html', function(){
$(".the_box_to_show").fadeOut(400);
});
$(document).on('click', '.active', function(e){
e.stopPropagation();
});

jQuery Hide Toggeled Div On Document.click

I currently have the following code:
$(function(){
$('#btn_signIn').click(function(){
$('#div_signInBox').toggle("fast");
});
});
I need to hide the div_signInBox toggled div anytime any other part of the window is clicked...
Thanks!

Is this what you want?
$(function() {
$('#div_signInBox,html').click(function() {
if ($(this).is('#div_signInBox'))
return false;
$('#div_signInBox').toggle("fast");
});
});