I use the following code to hide and show a box on a bunch of search results. Each result has its own toggle and box to show and hide. The problem I have is that clicking any one of the toggles will show and hide ALL of the boxes on the page and NOT just the box for the one result. How can I do this?
Thanks
jQuery(document).ready(function ($) {
$("div.MoreResultsTrigger").click(function (e)
{
$("div.MoreResultsTrigger").next().slideToggle('fast');
});
});
UPDATED CODE USING HOVER
$('a.MoreResultsTrigger').hover(
function () {
$(this).next().show();
},
function () {
$(this).next().hide();
}
);
Use the this keyword since you only want to hide the element next to the one you're clicking on.
jQuery(document).ready(function ($) {
$("div.MoreResultsTrigger").click(function (e)
{
$(this).next().slideToggle('fast');
});
});
untested but try:
$("div.MoreResultsTrigger").click(function (e)
{
$(this).next().slideToggle('fast');
});
use $(this).next().slideToggle('fast'); that will apply it to ONLY the one you have selected. At the moment its applying the slideToggle to ALL div.MoreResultsTrigger's.
Try this:
jQuery(document).ready(function ($) {
$("div.MoreResultsTrigger").click(function()
{
$(this).next('.toggleable').slideToggle('fast');
});
});
The addition of the '.toggleable' class to the .next() is just in case you might have other things in between that you don't want to toggle. You would of course have to add the .toggleable class to all elements that you're interested in toggling. Of course, you can replace, and should, replace toggleable with a name that has more meaning.
Related
So I'm making a website for someone and I'm quite new to jQuery (which probably doesn't help). The site needed a dropdown menu to display links to the galleries in a list rather than having them all in the navigation bar. The problem is, whenever I hover over the li element the dropdown slides down but when I hover over the dropdown, it slides back up.
$(document).ready(function () {
$("li#navi-dropdown").hover(
function () {
$('ul.nav-dropdown').slideDown('medium');
},
function () {
$('ul.nav-dropdown').slideUp('medium');
}
);
});
Probably something simple, but help is quite welcome. JSFiddle below.
http://jsfiddle.net/6e87Lwkb/
You are toggeling the event in the me handler, you need to do this:
$(document).ready(function () {
$("li#navi-dropdown").on('mouseover',function () {
$('ul.nav-dropdown').slideDown('medium');
})
$("ul.nav-dropdown").on('mouseleave',function () {
$('ul.nav-dropdown').slideUp('medium');
});
});
I have also updated your fiddle, check it out it works now.
here is my fiddle:
http://jsfiddle.net/6e87Lwkb/7/
Consider putting your ul submenu inside your li, and reposition it.
Don't forget to use .stop() too, so as jquery don't queue your slides animations :
$('ul.nav-dropdown').stop().slideDown('medium');
See your updated fiddle here
Try with this code.
$(document).ready(function () {
$("li#navi-dropdown").hover(
function () {
$('ul.nav-dropdown').slideDown('medium');
});
$(".nav-dropdown").mouseleave(
function () {
$('ul.nav-dropdown').slideUp('medium');
});
});
I have fixed sidebar navigation bar, it works on hover but I want to open first menu by clicking on collapse button. similar working like hover on menu 1. I have already tried following methods .
jsfiddle Demo
$(document).on('click', '.btn1', function () {
console.log('btn 1');
//$('.imFirst a').trigger('mouseenter');
//$('.imFirst a').trigger('mouseover');
//$('.imFirst a').trigger('hover');
$('.imFirst a ').mouseenter()
//$('.imFirst a ').mouseover()
$('.imFirst a').toggleClass('hover');
});
$(document).on('click', '.btn2', function () {
console.log('btn 2');
//$('.imFirst ').trigger('mouseenter');
//$('.imFirst ').trigger('hover');
//$('.imFirst ').trigger('mouseover');
$('.imFirst ').mouseenter();
//$('.imFirst ').mouseover();
$('.imFirst ').toggleClass('hover');
});
You must add class, to rember your condition. I am change your example
jsfiddle Demo
$(document).on('click', '.btn2', function () {
$('.imFirst').addClass('active');
});
Like the previous answer I think your best bet is to add a class that is toggled when you click on the toggle button. The only difference with the previous answer is in the jsfiddle demo it works much better to add
$('.imFirst').toggleClass('active');
so you are able to close the menu after opening it.
My rep is too low to add this as a comment.
I have a module that was built using a Handlebars.js template, I orignally had it opening and closing perfectly, but the information wasn't updated, this can be seen here.
Now I have it so it updates the info, but the toggleClass won't fire when clicking either the 'x' or .overlay. This can be seen here.
Here is my jQuery functions to activate the modal.
$(document).on('click', "a.btn", function (e) {
$(e.target).parents('.image-container').prev('.modal').toggleClass('modal--show');
});
$(document).on('click', '.overlay', function (e) {
$(e.target).prev('.modal').toggleClass('modal--show');
});
$(document).on('click', '.modal__close', function () {
$('.modal').toggleClass('modal--show');
});
How can I make it so this modal will both Open and Close, as well as display the correct information?
Some things I've tried...
replacing: $(e.target) with $(this)
The problem with your code is that you are trying to toggle class of all .modal divs. But you need to toggle the class of only .modal.modal--show.
Also in case of overlay, you need to find the parent div not the sibling div. So use .closest() in place of .prev()
So if you modify your code as
$(document).on('click', '.overlay', function (e) {
$(e.target).closest('.modal.modal--show').toggleClass('modal--show');
});
$(document).on('click', '.modal__close', function () {
$('.modal.modal--show').toggleClass('modal--show');
});
CODE:
<script type="text/javascript">
$(document).ready(function() {
$("#clicker").click(function() {
$(".show_this").show();
e.preventDefault();
});
});
</script>
Using the script above I am able to show .show_this on clicking #clicker but on clicking #clicker again i want to hide it. How can I tweak my code to do that?
I did some research and it seemed that by using e.preventDefault(); I would be able to achieve that but it didn't work.
You can use toggle();
$(".show_this").toggle();
This will toggle every time, so if it is hidden it will show it and vice versa
Api Documentation: http://api.jquery.com/toggle
Also event.preventDefault(); will not be able to do this, though it is useful if the .show-this is a anchor tag because it will prevent the default action and that is to follow the link.
Use .toggle() instead.
$(document).ready(function() {
$("#clicker").click(function(e) {
$(".show_this").toggle();
e.preventDefault();
});
});
jsFiddle example
You can do this using the .toggle() method like:
$(document).ready(function() {
$("#clicker").click(function(e) { // call the event variable 'e' first here
e.preventDefault();
$(".show_this").toggle();
});
});
I previously got this (useful!) answer about using .next() for a DIV "blinds" toggling effect.
However, I can't seem to get this simple function to work for more than one DIV at the same time:
$(document).ready(function () {
$("#closeButton").click(function () {
$(this).next().toggle("fast");
});
});
Any ideas?
The selector you are using is only selecting one element. You would need to change is to it selected a collection of elements.
$(document).ready(function () {
$(".wider_div h3").click(function () {
$(this).next().toggle("fast");
});
});
This might work given the structure.
Is it about a specific type of button that occurs multiple times on a page? Try using jQuery's live():
$(document.ready(function() {
$('button.your_class').live('click', function (){
$(this).toggle('fast');
});
});
and attach the appropriate class to the buttons you want to 'be listened'.