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

Change text when link clicked with jQuery

I'd like to change the button to read Close when clicked and also to act as a Close too.
Fiddle Demo
How do I achieve this with my current code?
jQuery:
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Switch visiblility of the "Close Panel" button
$("#close").click(function () {
$("div#panel").slideUp("slow");
});
});

You can use .is(':visible') to check whether div is visible and set text appropriately.
code
$("#open").click(function () {
$("div#panel").slideToggle("slow", function () {
if ($("div#panel").is(':visible')) {
$("#open").text('Close');
} else {
$("#open").text('Quick Quote');
}
});
});
DEMO

You can simply achieve this using .slideToggle():
$("#open").click(function(){
if($("div#panel").is(':visible'))
$(this).html('Quick Quote');
else
$(this).html('Close Quote');
$("div#panel").slideToggle("slow");
});
Working Demo

Using SlideToggle is a neat solution.
You can also achieve the functionality using addClass and removeClass. Without making much changes to the code that you have written.
http://jsfiddle.net/4dkoke6w/
I have created a class "hidden" and it applies "display: none" styling.
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
$("#open").addClass("hidden");
$("#close").removeClass("hidden");
});
// Switch visiblility of the "Close Panel" button
$("#close").click(function () {
$("div#panel").slideUp("slow");
$("#close").addClass("hidden");
$("#open").removeClass("hidden");
});

Show and hide a div in jquery

I'm facing an issue, issue is I've a product page where image thumbnails are appearing,
i want when user hover or mouseenter on any thumnail the associated 'add to cart' button should appear, current when i mouseenter on any product all 'add to cart' buttons are appearing,
link is: http://etekstudio.org/demo/crateen/en/men
cod is:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
jQuery(target).mouseenter(function(){
jQuery('.popUpPrice button ').show();
});
});

I'd go with something like this:
jQuery(document).ready(function(){
jQuery(".product-image").hover(function(){
jQuery(this).find(".popupPrice button").show();
}, function() {
jQuery(this).find(".popupPrice button").hide();
});
});
That way it hides it on mouse exit as well.

Try to use:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
target.mouseenter(function(){
jQuery(this).find('.popUpPrice button').show();
});
});
Also target is already a jQuery object. You can just use target.mouseenter instead of jQuery(target).mouseenter

Try this:
jQuery(".product-image").mouseenter(function(){
jQuery('.popUpPrice button').show();
});
use hover in jquery
jQuery(".product-image").hover(
function() {
jQuery('.popUpPrice button ').show();
}, function() {
jQuery('.popUpPrice button ').hide();
}
);

try this :
jQuery(document).ready(function(){
jQuery('.product-image').hover(function(){
jQuery(this).next('.popUpPrice').find('button').show();
},function(){
jQuery(this).next('.popUpPrice').find('button').hide();
});
});

Try it.
And you also don't have need to create new object with the name target.You an do directly with this way also.
jQuery(document).ready(function(){
jQuery('.product-image').mouseenter(function(){
jQuery(this).find('.popUpPrice button').show();
});
});

You can try this:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
target.each (function () {
jQuery(this).mouseenter(function(){
jQuery(this).find('.popUpPrice button').show()
});
});
});

inside the function
you are selecting all elements with '.popUpPrice button', you must find the correct button to show.
in this html structure, for instance:
<div class="product">
<div class="product-image><img src="" /></div>
<div class="popUpPrice"><button>Add to cart</button></div>
</div>
all you have to do is:
jQuery('.product-image').mouseenter(function(evt) {
var target = jQuery(evt.currentTarget);
target.parent().find('.popUpPrice button').show();
});
evt.currentTarget is the element which triggered the event. In this case will always be .product-image

Try this
$('.product-image').hover(function(){
$(this).next('.popUpPrice').find('.disc button').show();
},function(){
$(this).next('.popUpPrice').find('.disc button').hide();
});
DEMO

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

Show/hide effect

I have a little blog with some social buttons for sharing that are integrated into my theme.
Now I want to change show/hide so that it is shown by default and hidden when clicked.
$(document).ready(function() {
$(".post-share").hide();
$("a.share-btn").click(function() {
$(this).prev(".post-share").slideToggle("slow");
});
});
Can anyone help?

$(document).ready(function() {
$(".post-share").show();
$("a.share-btn").click(function() {
$(this).prev(".post-share").slideToggle("slow");
});
});

change the hide to show in dom ready
$(document).ready(function() {
$(".post-share").show();
$("a.share-btn").click(function() {
$(this).prev(".post-share").slideToggle("slow");
});
});

If you want it to show by default and then hide when clicked...
$(document).ready(function() {
$(".post-share").show();
$("a.share-btn").click(function() {
$(this).prev(".post-share").slideUp("slow");
});
});