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.

How can I access the parent in the jquery on selector

I have the following jQuery code:
$('#temp_modals').on('mouseleave','*[data-username]',function() {
///my logic
});
However I need to to have the mouseleave event on the the parent div of *[data-username].
As this element is added dynamically to the webpage I cannot use a normal selector and need to use the $.on.
In short I want to achieve that code like this runs.
$('#temp_modals').on('mouseleave','*[data-username]'.parent(),function() {
///my logic
});
How can I do that?

Try
$('#temp_modals').on('mouseleave','*:has(> [data-username])',function(event) {
///my logic
// this should get you the parent.
$(event.target).parent();
});
Demo: Fiddle

According to the spec this should work
http://api.jquery.com/parent-selector/
$('#temp_modals').on('mouseleave','*[data-username]:parent',function() {
///my logic
});
EDIT : Indeed this won't work, thanks for pointing it out, :parent doesn't do what i was expected. This will work :
$('#temp_modals').on('mouseleave',$('*[data-username]').parent(),function() {
console.log(this)
});

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

livejquery is not working

I am using livequery for applying jquery chosen plugin (for adding tags) on dynamically added elements. I tried :
$(".chz").livequery(function () {
$(this).chosen();
});
Through above code, choose plugin is not applying. But if i tried this :
$(".chz").livequery('click', function () {
$(this).chosen();
});
Than it works properly. But in my case i can`t use click event because until user click over the element the plugin is not applied. What i am doing working in first case ?

try something like this
$("body").on('click', '.chz'function () {
$(this).chosen();
});

when we use chosen plugin then we set class like this
class ="chzn-select"
then
$(function() {
$("chzn-select").chosen();
});
i think this will help you

Problem using toggleclass to change the span of the div

I am using blueprint CSS framework. I have an article spanning 24 cols but I trying to use jQuery toggleclass (onclick) to reduce it to 20 cols and show the buttons for actions in the remaining 4 cols.
$("div").each(function() {
$(this).click(function() {
$(this).toggleClass("span-24");
$(this).toggleClass("span-20");
});
});
I have more than one div so I use each, but it does not work.
I appreciate any help.

This code should do what you're after:
$("div").toggle(function() {
$(this).attr("class", "span-24");
}, function() {
$(this).attr("class", "span-20");
});

You can bind the click event to all divs without the each loop. Also, you can use the :gt() greater-than selector and then toggle() the visibility of those spans
$("div").click(function() {
$(this).find("span:gt(19)").toggle();
});

you don't want to toggle classes on all divs you have, rather just the one with content
you can even simplify this code more:
$('#toggler').click(function(){
$('#content').toggleClass('span-20 span-24');
});
the #toggler.click() is just one of events that can run the toggleClass(), in your HTML it could be onload or whatever:
$('#content').toggleClass('span-20 span-24'); //main code (and all of it, too)
example: http://jsfiddle.net/hhMFs/1/

You can also do this:
$("div").click(function() { $(this).toggleClass("span-20 span-24"); });