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();
});
Related
$(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();
});
});
When you click 'Darrien Tu' the text on the far right disappears but it doesn't come back when you reclick the name.
https://jsfiddle.net/gkrh0ok0/1/
$("#nav_list").click(function () {
$(".sidebar-right").toggle();
});
I have check the fiddle. There is one issue in .sidebar-right
You have given margin-left:80% instead of give right:20px
This might help to solve your issue.
I have update your script code :
<script>
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open').after($(".sidebar-right").toggle('slow'));
});
});
</script>
Add comment to this code
<script>
/*$("#nav_list").click(function() {
// assumes element with id='button'
$(".sidebar-right").toggle();
});*/
</script>
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();
})
})
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");
});
});
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");
});
});