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");
});
});
Related
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();
});
I want to append and element to the grid created by jquery.shapeshift. The documentation says to trigger a rearrange once the element is added. I've tried but I get nothing. What am I doing wrong? See the example http://jsfiddle.net/LNysC/1307/
$(".container").shapeshift({
minColumns: 3
});
$("a").click(function(){
$(".container").append("<div></div>");
$(".container").trigger("ss-event-arrange");
});
Many Thanks
The div you added that way is not recognized by the container as a child yet so you should tell the container that the div you added is a child to be treated like so.
I know there should be another way to do it, but try reshapeing the container by calling $(".container").shapeshift() again, for example:
$(".container").shapeshift({
minColumns: 3
});
$("a").click(function(){
$(".container").append("<div></div>");
$(".container").shapeshift();
});
Here is an example:
http://jsfiddle.net/LNysC/1501/
Is there a general way to specify elements in jQuery. For example using the $(this).find or next function.
I am trying to create a button that when copied will only activate one at a time.
At the moment when the button is duplicated output is copied.
See example.
http://jsfiddle.net/X8AYd/12/
button
<p class="vote-number">+ 70,101</p> button
<p class="vote-number">+ 70,101</p> button
<p class="vote-number">+ 70,101</p>
$(".vote-number").hide();
$(".vote-btn").click(function () {
$(".vote-number").finish().show().fadeOut(5000);
});
$(".vote-number").finish() will target all the elements with the class vote-number. Instead, you want to target only the element next to the button. So, use $(this).next(".vote-number") to target specifically.
JSFIDDLE DEMO
$(".vote-btn").click(function(){
$(this).next(".vote-number").finish().show().fadeOut(5000);
});
You can do with .next() as using .vote-btn will only target the first occurrance of the same, so better use $(this).next(".vote-number') which targets to the next <p> with class vote-number
$(".vote-btn").click(function(){
$(this).next(".vote-number").finish().show().fadeOut(5000);
});
Fiddle Example
Try This:
$(".vote-btn").click(function(){
$(this).next('.vote-number').finish().show().fadeOut(5000);
});
Working Fiddle
$(".vote-number").hide();
$(document).on("click", ".vote-btn", function (e) {
$(this).prev(".vote-number").show().fadeOut(5000);
});
Working Fiddle
So, I know how to change an attribute for the same element you hover over...
$(".click2play").mouseover(function()
{
$(this).css({'visibility' : 'hidden'});
});
question Can I do the same thing but to affect another element only within the same 'click2play' div that was hovered?
maybe like?
$(".click2play").mouseover(function()
{
$(this).(#someotherdiv).css({'visibility' : 'hidden'});
});
Thanks everyone!
This code targets a div, within the current .click2play element. I believe that's what you were asking for :)
$(".click2play").mouseover(function() {
$('div.class_name', this).css({'visibility' : 'hidden'});
});
not very clear from the ques what you wanna do so ill ans for all the options i can guess of
1.if you wanna hide all the elements of class .click2Play then use
$('.click2Play').hover(function(){$('.click2play').hide()});
2.if you want to just hide the current element of all the elements having this class use
$('.click2Play').hover(function(){$(this).hide()});
3.if you wanna generalize it then you can use.selector property of the jquery object so that you would be able to use it like
$('.click2Play').hover(function(){$($(this).selector).hide()});
so now if you will change the class name from .click2Play to some other class it will work nicely and will hide all the elements of that class.
4. if you want to hide some element inside that of current element then
$('.click2Play').hover(function(){$(this).children('selector_of_child').hide()});
5.if all the elements of this class have an element inside them having some other class and you wanna hide them all then simple use each like this
$('.click2Play').hover(function(){$('.click2play').each(function(){$(this).children("selector_Of_Child").hide()})});
I would do like this:
$(".click2play").mouseover(function(){
$(this).hide();
});
But maybe it isn't what you want to do?
I suppose this :):
$(".click2play").mouseover(function(){
$(this).css({'visibility' : 'hidden'});
});
or better
$(".click2play").mouseover(function(){
$(this).hide();
});
You want to change some other div? Why would you need $(this)?
$(".click2play").mouseover(function(){
$("#someotherdiv").hide();
});
To change a single css attribute you can do:
$(".click2play").mouseover(function(){
$(this).css('visibility', 'hidden');
});
I hope it helps
(consider to see this link: http://marakana.com/bookshelf/jquery_tutorial/css_styling.html )
I believe most of the answers didn't payed attention to the question, which asks about removing a class. Here is the answer to both questions:
$('.click2play').bind('mouseenter mouseleave', function () {
$(this).removeClass('click2play'); // This line removes the current object's class click2play
$('jQUerySelector').removeClass('click2play'); // This will remove another element's class click2play
});
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