Develop Reference

Toggling one thing with two different elements

In my previous question I asked about how can I toggle a textarea with a paragraph. I got the answer. Now I want to do the opposite of it. First I was showing the already hidden textarea + 2 buttons by a click of a hyperlink. Now on the click of one of the buttons I want to hide the text + 2 buttons and show the paragraph that was first already shown.
I have tried this JS so far but it's not working:
$(document).ready(function () {
$(".no_link").click(function (e) {
e.preventDefault();
});
$(".edit_offer").on('click', function () {
toggleEditPanel($(this));
});
$("#cancel_edits").on('click', function () {
$(this).closest("button").hide();
$(this).closest("textarea").hide();
$(this).closest("p.content").show();
});
});
function toggleEditPanel(link) {
link.parent().parent().parent().find("textarea").toggle();
link.parent().parent().parent().find("button").toggle();
link.parent().parent().parent().find("p.content").toggle();
}
But its not working. How can I solve this error?
If I am trying to call the function toggleEditPanel() again. Its not working then aswell.
You can find the markup in the fiddle. Here's the fiddle.
UPDATE 1:
Just came up with a solution. I can use the $.siblings() function to toggle the elements beside the button. Still, is there any better solution?
Here's the code that I came up with:
$("#cancel_edits").on('click', function () {
$(this).hide();
$(this).siblings("button").hide();
$(this).siblings("textarea").hide();
$(this).siblings("p.content").show();
});
UPDATE 2:
The problem in the above code is that if there are more than one panels like this then the code is not working. How can I solve that issue aswell?

You are using Id for selector $("#cancel_edits") .
Id selectors returns only first element , so if there are multiple pannel it will work only for first.
Instead give some class name and use it for selector. Further you can use chaining and caching in your code for better performance.
$(".cancel_edits").on('click', function () {
var elm=$(this);
elm.add(elm.siblings("button,textarea")).hide();
elm.siblings("p.content").show();
});

I would recommend referencing your elements by ID:
$("#cancel_edits").on('click', function () {
$('#save_edits').hide();
$('#edited_content').hide();
$(this).hide();
$("p.content").show();
});
JSFiddle
The great thing about using IDs is that you are guaranteed they are unique - no need to use closest() to find the element you want. If, however, you're using classes instead, closest() might be necessary or helpful.

Using Jquery background to change css - How to Allow only one link at a time

I want to make a list of URLs that get highlighted when you click, the problem is only one link should be highlighted at any one time.
I'm able to get the reset button working. used removeAttr) - $("a").removeAttr("style") - (is there any negatives to doing it this way?)
But I can't get it to be only do one highlight at a time.
Could someone help me with an example code of making only one link highlighted at one time? Right now, it's possible to highlight multiple links.
I was able to make an example on Jsfiddle http://jsfiddle.net/M3vVw/3/

I'd recommend doing it this way: create a CSS rule and apply it to the element you click on, removing the same style from all links first.
jQuery
$("a").click(function () {
$('a').removeClass('back');
$(this).addClass('back');
});
$("#btn").click(function () {
$("a").removeClass("back")
});
CSS
.back {
background-color: #ff3fff;
}
jsFiddle example

I'd suggest using addClass() (as adeneo already suggested), but if you must use attr():
$('a').click(function(){
var that = $(this);
that.css("backgroundColor", "#ff3fff").closest('li').siblings().find('a').attr('style', '');
});
JS Fiddle demo.
Or:
$('a').click(function(){
var that = $(this);
that.css("backgroundColor", "#ff3fff").closest('li').siblings().find('a').removeAttr('style');
});
JS Fiddle demo.
Do remember that using attr()/removeAttr() is incredibly destructive and requires much more work and maintenance (you have to explicitly restructure the CSS of each of the styled element's properties every time); addClass()/removeClass() is far more efficient, since it contains all the styling externally, where it's easy to add/remove that styling to the element when needed.
References:
addClass().
attr().
closest().
css().
find().
removeAttr().
siblings().

You can use this:
$("a").click(function()
{
$(this).css("backgroundColor", "#ff3fff");
$("a").not($(this)).removeAttr("style");
});
$("#btn").click(function(){
$("a").removeAttr("style")
});

LIVE DEMO
CSS:
a.active{
background:#ff3fff;
}
jQuery:
function removeActive(){
$("a").removeClass("active");
}
$("a").click(function( e ){
e.preventDefault();
removeActive();
$(this).addClass("active");
});
$("#btn").click(removeActive);

Jquery slidedown one element in div

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();
});

How to use JQuery to show a div's child elements only?

So I have this jquery function that's supposed to show a class's hidden span on hover. How do i set up the function so it only shows the selected div's child span (instead of showing all the spans on the page)?
Here's my jquery function:
$(".thumb").hover(
function() {
$(".blurb").show();
},
function(){
$(".blurb").hide();
}
);
You can view the jsfidde here. Thanks!

That's what this is for!
$(".thumb").hover(
function() {
$(this).children('.blurb').show();
},
function(){
$(this).children('.blurb').hide();
}
);

Use $(this).children() instead of executing a global query again:
$(".thumb").hover(function() {
$(this).children().show();
}, function() {
$(this).children().hide();
});
Working demo: http://jsfiddle.net/h5x3f/2/
Note: if you're not bothered about supporting Internet Explorer 6, you can avoid jQuery/JavaScript completely and use CSS's :hover pseudo-class, which will even work with JS disabled. Or you could use a shim like ie-7.js to handle :hover for you. See this variation of your fiddle for an example.

Select the div first and then its children, e.g.
$("#mydiv").children(".blurb").show();

here you have another solution using the 'find' function:
$(".thumb").hover(
function() {
$(this).find(".blurb").show();
}, function() {
$(this).find(".blurb").hide();
}
);

How to toggle a function for multiple divs at once?

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'.