I have some jquery to hide content on an index page.
the commented out code in the fiddle is what i have at the moment - but it hides all content divs if any toggle link is clicked.
HTML
<div>
<h1>Dogs</h1>
<a class="toggle_group_name">∆</a>
</div>
<div class="group_name">
Dogs do this, that and something
</div>
<div>
<h1>Cats</h1>
<a class="toggle_group_name">∆</a>
</div>
<div class="group_name">
Cats do this, that and something different
</div>
jQuery
$(function() {
$('.toggle_group_name').click(function() {
$(this).parents("div").find('.group_name').toggle();
});
});
I want only the class immediately following the toggle link to be hidden/shown, but can't get it working. Have tried using parents, nextAll, and various other methods from similar examples I've found on SO, but so far nothing has worked.
The target element is not sibling or parent of the clicked element, it's next sibling of the clicked element's parent, so .parents() and .nextAll() methods are not useful in this case, you can use .closest()/parent() and .next() methods:
$(this).closest('div') // closest parent div of the clicked element
.next('.group_name') // it's next .group_name sibling
.toggle();
http://jsfiddle.net/xUgG5/
This seems to work in your fiddle:
$(function() {
$('.toggle_group_name').click(function() {
$(this).parents("div").next('.group_name').toggle();
});
});
Just use first().
http://jsfiddle.net/P6GEC/9/
$(function () {
$('.toggle_group_name').click(function () {
$('.group_name').first().toggle();
});
});
http://api.jquery.com/first/
Related
In my HTML code I have a div. This div includes some warnings to the users. Warnings are wrapped inside div elements with no ID. If user clicks on close button, it should remove the warning div.
<div id="alarmbox" align="center">
<div>this is warning 1<button onclick="remove_div_of_this_button(this);">x</button></div>
<div>this is warning 2<button onclick="remove_div_of_this_button(this);">x</button></div>
</div>
and this is my JS code:
function remove_div_of_this_button(thisbutton)
{
thisbutton.parentNode.parentNode.removeChild(thisbutton.parentNode);
}
It works fine. However, removing an element is better to be animated instead of sudden remove. If I want to manipulate JS only, how to remove the div with jquery? Is it possible to identify thisbutton in jquery since $(thisbutton) should not work here?
Separate out js from your html and use click event with jquery.
With fadeOut
$(function(){
$('#alarmbox button').click(function () {
$(this).closest('div').fadeOut(1000,function(){
$(this).remove();
});
});
});
Demo
Or try slideUp
Demo2
Like this maybe?
function remove_div_of_this_button(thisbutton)
{
$(thisbutton).parent().fadeOut(function() {
$(this).remove();
});
}
This is a question that is related to a previous question of another member which can be found here.
This is the Javascript function to hide a div (which is an answer to the other member's question):
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
The HTML is:
<div id='hideme'>
Warning: These are new products
<a href='#' class='close_notification' title='Click to Close'>
<img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')" />
</a>
</div>
My followup question to this is: how can I add a cool effect of transition? The result will be the div 'hideme' would close slowly. Is there a work around for this?
Thanks so much everyone! It would be highly appreciated!
Note: I'm a noob with Javascript. 0-0
$("#"+el).fadeOut(500);//el must be the id of the element
If you're using jQuery
function hide() {
$(this).parent().fadeOut();
}
As this is triggered by an event the 'this' variable will be set to the element from which it came, as you want the parent element to vanish when it's clicked this will do the trick
EDIT: For this to work you may have to play with your HTML and how many $(this).parent().parent()... you need but this would be the best way to go about it, then you don't need to pass the ID around
EDIT 2: So .parent() selects the element containing the selected element, so in this case $(this) refers to the button that was clicked as that's where the click event came from.
So $(this).parent() refers to the container element, in this case the a element and therefore the $(this).parent().parent() refers to the div element which you want to hide.
So you could give the image a class of 'closable' then do the following
$('.closable').click(function() {
$(this).parent().parent().fadeOut();
}
This means whenever you click something with the class closable it will go up the DOM tree two elements to (with .parent().parent()) and then fade it out.
This will allow you to remove the on click event from the image, you just need to put the handler above in the jQuery document.ready function which looks like:
$(document).ready(function() {
//Click function here
});
A popular choice for this would be JQuery UI's effect method.
With this, you can write some very simple Javascript to hide your div in a stylish manner, for example:
function hide(obj) {
$(obj).effect("scale");
}
EDIT:
Here's an example jsFiddle
Use jQuery to do transition effects:
$(function(){
$("a.close_notification").click(function(e){
e.preventDefault();
// stop other animations and hide, 500 milliseconds
// you can use the function fadeOut for that too
$("#hideme").stop().hide(500);
});
});
I'm creating a drop down menu that will be reused many times on a single page.
The following code works great when there's only one drop down menu. But when there are multiple drop downs, clicking a single .dropdown will result in all the .dd_menu's on the page being revealed.
JS:
$(document).ready(function() {
$('.dropdown').click(function(){
$('.dd_menu').toggle();
});
});
HTML:
<div class="dropdown">
<a class="mini_button" href="#">Actions</a>
<div class="dd_menu">
Link
Link
Link
</div>
</div>
Is there some what to target only the .dd_menu that is inside the particular .downdown which was clicked?
Limit the selector to the .dd_menu that is a child of the current clicked .dropdown div:
$(document).ready(function() {
$('.dropdown').click(function(){
$('.dd_menu', this).toggle(); // <========== used this as a context.
});
});
jQuery( selector [, context] ):
selector A string containing a selector expression
context A DOM Element, Document, or jQuery to use as context
docs
You can also use the find function: $(this).find('.dd_menu') but it exactly the same. the context selector is calling the find function.
You could try:
$(this).children('.dd_menu').toggle();
$(document).ready(function() {
$('.dropdown').on('click', 'a', function(){
$('.dd_menu:eq('+$(this).parent().index()+')').toggle();
});
});
I have a div like this:
<div>
<font class='slideclick'>Click here to slidedown dynamic content</font>
<div class='slidedownonclick'> This is the content that slides down </div>
</div>
Jquery triggers the 'slidedownonclick' to slidedown when 'slideclick' is clicked. This works great but i have and indefinite amount on these div's reccuring in the same webpage, from a mysql database. Giving them unique id's is impossible. Is there any way that i could get only the 'slidedownonclick' in the same div as its respective 'slideclick' to slidedown when it is clicked.
Any help would be much appreciated,
thanks,
This will slide down the next .slidedownonclick div when .slideclick is clicked:
$('.slideclick').click(function() {
$(this).next('.slidedownonclick').slideDown();
});
On a .slideclick handler you will find that sibling with:
$(this).find('+ .slidedownonclick');
or:
$(this).next('.slidedownonclick');
$('.slideclick').click(function() {
$(this).next('.slidedownonclick').animate({
height: '+=50'
}, 1000);
});
Check about jQuery.next(), it's what do you want.
Using it you can get the next sibbling which class/id is the selector.
EDITED:
until jQuery 1.6.4
jQuery(document).delegate('font.slideclick', 'click', function() {
jQuery(this).next('slidedownonclick').slideToggle();
});
jQuery 1.7 +
jQuery(document).on('click', 'font.slideclick', function() {
jQuery(this).next('slidedownonclick').slideToggle();
});
html:
<div id="a">
<a id="a0" href="#"></a>
<div id="b"><a id="b0" href="#"></a><div>
<div>
jQuery:
$('#a').delegate('a', 'click', function(){ //do stuff });
delegates #b0 as well. Is there any clever selector way of ways to ignore #b ?
NB /// links inside divs are added and detached dynamically ///
ty
if you know it's only direct descendants try
$('#a').delegate('#a>a', 'click', function(){ alert('a') });
if you know you want to ignore children of b try
$('#a').delegate('a:not(#b>a)', 'click', function(){ alert('a') });
EDIT: a fiddle
This is working as expected. Your delegate() call will set event handler for all children under #a that match selector a.
If you are trying to set handler for a specific element then do that
$('#a0').click(function(){ ... });
Also your html is pretty broken. Make sure closing tags actually closing.
The first field in the delegate method is the selector. As of now, you are selecting all the anchors. Use id instead.
jQuery1.7 or above
$('#a').on('click', '#a0', function(event) {
alert(event.target.id);
});