I'm trying to hide the div where a button is located in.
I have allot of php generated divs with a button remove.
And when i click on remove the div where the button is located inside the whole div should be hidden.
This is some code to clarify a little bit.
$('#button').click(function(){
$("The Parent Div Of This Button").hide();
});
I tried to find online how to hide "The Parent Div Of This Button" but i cannot seem to find id and i'm pretty sure it's super easy..
Thanks in advance
$('#button').click(function(){
$(this).parent().hide();
});
You can use the event parameter to access, and hide, the parent element
$('#button').click(function(event){
$(event.target).parent().hide();
});
$(this).parent().hide(); or $(this).closest('div').hide(); if there are another elements between 'parent' and button (eg. div > span > button).
$('#button').click(function(){
$(this).closest('div').hide();
});
Related
i'm writing a small script to show/hide a div when other div is clicked, but I can't get the second div clickable.
Here's my code so far:
$(document).ready(function(){
$('div#ordontia').click(function(){
$(this).next('div#ordontia2').slideToggle("slow");
});
});
http://jsfiddle.net/65AK2/1/
Every time a "button" is clicked a new div with a description should appear on the bottom of the table. (the blue div on the bottom). If another button is clicked then the previous description should close and another one should open in the same place. (not implement yet)
Thanks in advance for any help!
Why do you want to select your element with next if it has an unique ID?
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
more general if you add more divs:
$(document).ready(function(){
$('.botaomedicina').click(function(){
$('#'+$(this).attr('id')+'2').slideToggle("slow");
});
});
with all others closing:
$(document).ready(function(){
$('.botaomedicina').click(function(){
$('.botaomedicinadescription').slideUp("slow");
$('#'+$(this).attr('id')+'2').slideToggle("slow");
});
});
Don't use $.next, it only selects siblings of the current element:
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.
— jQuery documentation: .next()
Use the normal one:
$('div#ordontia2').slideToggle("slow");
Fixed it.
http://jsfiddle.net/65AK2/2/
firstly, it lookx like your toggled div was mal-formed. I didnt see a for it.
Secondly, if you know what the ID of the other div is, you dont need to say:
$(this).next("#item");
, it would make no sense.
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
remove this ;)
try this
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
updated fiddle http://jsfiddle.net/65AK2/4/
You can do it directly by an ID selector
http://jsfiddle.net/65AK2/3/
$(document).ready(function(){
$('#ordontia').click(function(){
$('#ordontia2').slideToggle("slow");
});
});
I want to trigger a function if either the currently active element $(this) or another predefined element (e.g.: div#tooltip) blurs. However so far I've not found out how to do this. I've tried:
$(this).add('div#tooltip').live('blur', function(){
$('div#tooltip').hide();
});
Imagine that $(this) would be an input field, for example, and the predefined second element would be a tooltip div and that I would want the tooltip to hide if one of those blurs.
EDIT:
The div#tooltip contains an anchor, which should not make the div#tooltip hide if it's being clicked.
EDIT 2:
Okay, here is a more accurate explanation of my problem. I've got the $.fn.tooltip function which I apply to various text-inputs which have variable class names and id's. Therefore, this input can only be referred to as $(this) within the function.
Secondly I have the tooltip div, which is created by the function. This div goes by the ID #tooltip. This tooltip / div can contain some other elements such as anchors.
The tooltip is shown automatically when the input-field (this) is clicked. Once it's closed it won't be shown again, even if the input-field will be focused again.
What I'm trying to do is:
The tooltip must be removed when the text-input loses it's focus
EXCEPT if the cursor is within the tooltip / div or if an element within this div is being clicked.
Anyone?
Like this: http://jsfiddle.net/uu3zX/7/
HTML:
<input type="text" class="with-tooltip">
<span class="tooltip">?<a style="display:none" href="#">The tip</a></span>
JavaScript:
$('.with-tooltip').on('focus', function(){
$(this).next().children().show();
});
$('.with-tooltip').on('blur', function(){
$(this).next().children().hide();
});
$('.tooltip').hover(
function(){
$(this).children().show();
},
function(){
$(this).children().hide();
}
);
UPDATE
Added alternative solution to fit OP requriment to use this
Borrowing from IntoTheVoid's fiddle: You should wrap the input and the tooltip in a container div (or some other container element) to do this in one line:
$('.tooltip, input').on('mouseout', function(){
$(this).parent().children('.tooltip').hide();
}).on('focus mouseover', function(){
$(this).parent().children('.tooltip').show();
});
http://jsfiddle.net/mblase75/uu3zX/5/
How can I hide a div with no ID? I have an application which creates few stickies. Some of them have no ID and some of the do have. How can I hide the ones with no ID?
The position is not always the same.
This is what I get in the HTML where I want to hide the last one.
Is it possible I can hide the one with no ID? Note that the rest which have ID's, is a number generated randomly.
Thanks alot.
Try this:
$("div.sticky:not([id])").hide();
The main idea is to use :not([id]) selector with element selector.
fiddle: http://jsfiddle.net/57uQ8/
http://sandbox.phpcode.eu/g/d2956/2
<script>
$(function(){
$("div.sticky").each(function(b){
if (!$(this).attr('id')){
$(this).hide();
}
});
});
</script>
will probably do it, assuming you want to show ONLY divs with no IDS and divs with class sticky
When using jquery-ui-1.8.15.custom.min toggle method, the element next to the target element is always hidden.
Here is the test page: http://jsfiddle.net/dassio/CLrMx/9
I want the div with class name suggestion to toggle between hidden and show when you click the button, but why the red line is always missing?
This should do the job:
http://jsfiddle.net/CLrMx/15/
Your script was accidentally hiding your text. Cleaned it up a bit so it olny does the necessary.
I found the problem:
<div id="config" class='name ui-widget-content ui-corner-all'>
<button id="details">show details</button>
</div>
I add the name class name to the parent div around the button, and when the event bubble up to the parent div, the following code:
$(".name" ).click(function() {
var clicked = $(this);
var suggestion = clicked.next();
suggestion.toggle("fold",200);
return false;
});
was called and toggle off the <h3> element which is the next element of the parent div.
When I want to hide a HTML <div>, I use the following JavaScript code:
var div = document.getElementById('myDiv');
div.style.visibility = "hidden";
div.style.display = "none";
What is the equivalent of that code in jQuery?
$('#myDiv').hide();
or
$('#myDiv').slideUp();
or
$('#myDiv').fadeOut();
$("#myDiv").hide();
will set the css display to none.
if you need to set visibility to hidden as well, could do this via
$("#myDiv").css("visibility", "hidden");
or combine both in a chain
$("#myDiv").hide().css("visibility", "hidden");
or write everything with one css() function
$("#myDiv").css({
display: "none",
visibility: "hidden"
});
Easy:
$('#myDiv').hide();
http://api.jquery.com/hide/
If you want the element to keep its space then you need to use,
$('#myDiv').css('visibility','hidden')
If you dont want the element to retain its space, then you can use,
$('#myDiv').css('display','none')
or simply,
$('#myDiv').hide();
$("myDiv").hide(); and $("myDiv").show(); does not work in Internet Explorer that well.
The way I got around this was to get the html content of myDiv using .html().
I then wrote it to a newly created DIV. I then appended the DIV to the body and appended the content of the variable Content to the HiddenField then read that contents from the newly created div when I wanted to show the DIV.
After I used the .remove() method to get rid of the DIV that was temporarily holding my DIVs html.
var Content = $('myDiv').html();
$('myDiv').empty();
var hiddenField = $("<input type='hidden' id='myDiv2'>");
$('body').append(hiddenField);
HiddenField.val(Content);
and then when I wanted to SHOW the content again.
var Content = $('myDiv');
Content.html($('#myDiv2').val());
$('#myDiv2').remove();
This was more reliable that the .hide() & .show() methods.
$('#myDiv').hide() will hide the div...
$('#myDiv').hide(); hide function is used to edit content and show function is used to show again.
For more please click on this link.