Develop Reference

how to append html to the variable?

i have this kind of structure...
<div class="copy_from">
<img src="images/1.png" />
</div>
<button class="copy_button">Copy</button>
<div class="copy_to">
</div>
i want to add the content of the copy_from div to copy_to div with an additional button "Add to Cart".
i am trying this...but it is not working...
<script type="text/javascript">
$(document).ready(function () {
$('.copy_button').click(function () {
var one1 = $('.copy_from').html();
var two = $(one1).append('<button>Add to Cart</button>');
$('.copy_to').html(one1);
});
});
</script>

Try
$('.copy_button').click(function () {
var one1 = $('.copy_from').html() + '<button>Add to cart</button>';
$('.copy_to').html(one1);
});
Or you could try changing this line
$('.copy_to').html(one1);
to ->
$('.copy_to').prepend(one1);

You've just got the order of things a bit mixed up. You make a copy of the html from .copy_from and then you add the button, afterwards. You can simply add the button to .copy_to afterward instead...
$(document).ready(function () {
$('.copy_button').click(function () {
var one1 = $('.copy_from').html();
$('.copy_to').html(one1).append('<button>Add to Cart</button>');
});
});

Toggle only ASCII Charager in Button Text using Jquery

On clicking button it is showing a hidden menu which I called 'User Panel'. I use the toggle script which is working fine.
All I need to do is to change the ASCII arrow to up side while toggling.
Here is my HTML Code:
<input type="button" class="userPanelButton" value="User: Simranjit ▼" style="float:right" id="hideDisplayUserDetailsButton" />
Here is script:
<script type="text/javascript">
$(document).ready(function(){
$("#hideDisplayUserDetailsButton").click(function(){
event.stopPropagation();
$("#hideDisplayUserDetails").slideToggle(200);
});
});
</script>

Here it is....
$(document).ready(function(){
$("#hideDisplayUserDetailsButton").click(function(){
event.stopPropagation();
$("#hideDisplayUserDetails").slideToggle(200);
var val = $("input#hideDisplayUserDetailsButton").val();
var val1 = $("input#hideDisplayUserDetailsButton").val();
val = val.slice(0,-1);
if(val1.slice(-1) === "▼"){
$("input#hideDisplayUserDetailsButton").val(val + "▲");
}
else{
$("input#hideDisplayUserDetailsButton").val(val + "▼");
}
});
});

Toggle spans inside an <a>

I am trying to create a function that will toggle optional inputs if chosen, here is what I have done so far:
HTML:
<div>
<input>
<a class="input-toggle" href="#"><span>Toggle Option</span><span>Close</span></a>
<div class="input-toggle-content">
<input name="">
</div>
</div>
JavaScript:
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
$("span:first-of-type").hide();
$("span:last-of-type").show();
});
});
So, the way it should work is when clicked on .input-toggle the div that is just next to it will be toggled and if clicked again the div will go away... I got this bit working, however, I want to also toggle <span>Toggle Option</span> with <span>Close</span> and I can't get it working... I don't know if the way I structured my function is correct?

Try,
$('.input-toggle + div.input-toggle-content').hide();
$(".input-toggle span:last-of-type").hide();
$('.input-toggle').click(function () {
$(this).next('div.input-toggle-content').toggle();
var spans = $('span', this);
spans.not(spans.filter(':visible').hide()).show();
});
DEMO

here you go: http://jsfiddle.net/jPe3A/
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
if($("span:first").is(':hidden')){
$("span:first").show();
$("span:last").hide();
}
else{
$("span:first").hide();
$("span:last").show();
}
});
});

HTML5 color pick change span color

I'm making a form where you can preview the result. I've made this:
HTML:
<input type="color" id="color" />
<span id="colorchange">Foo</span>
JS:
$(document).ready(function() {
$("#color").click(function() {
var color= $(this).attr('val'); // Not sure about this
$("#colorchange").css("color","+color+");
});
});
Which didn't work. Any ideas?
Thanks!
Edit: jsfiddle here: http://jsfiddle.net/xgm34/
New edit

Use the change event in jQuery:
$("#color").on('change', function() {
$("#colorchange").css({"color":$(this).val()});
});
http://jsfiddle.net/j27Bu/

use this code -
$(document).ready(function() {
$("#color").change(function() {
var color = $(this).val();
$("#colorchange").css("color", color);
});
});
see this fiddle - http://jsfiddle.net/xgm34/10/

using on keyup it will change the color while typing.
$("#color").on('keyup',function() {
$("#colorchange").css({"color":$(this).val()});
});
http://jsfiddle.net/tamilmani/j27Bu/1/

You forgot to close some braces and parentheses
$(document).ready(function() {
$("#color").click(function() {
$("#colorchange").css("color","+color+");
});
});
By the way:
The color type in input doesn't exist
dont forget to close yout input element />

How to remove element using specific id

I have html like this:
<html>
<input type='button' name='button1' id='button1'>
<input type='button' name='button2' id='button2'>
</html>
What I want to do that when User click button2, it should remove button1 element and show a message on its place. It will look like this after button2 click event.
<html>
Button1 Removed
<input type='button' name='button2' id='button2'>
</html>

If you use jquery, you can do that:
$('#button2').click(function() {
$('#button1').replaceWith('Button1 Removed')
});

$(document).ready(function(){
$("#button1").click(function(){
$("#button1").replaceWith("<div>Hi der</div>");
});
});

If you were using jquery then this solution:
$('#button2').click(function(){
$('#button1').replaceWith('<p>Button1 Removed</p>');
});

$('#button1').click(function() {
$('this').remove().html('<p>Button 1 Removed</>')
alert('button1 removed');
});

$(document).ready(function(){
$("#button2").click(function(){
$("#button1").replaceWith("Button1 Removed");
});
});

Using jQuery with an embedded function that can also do other things.
$('#button2').click(function() { $('#button1').remove().html('<p>Button 1 Removed</>') });
Remember its good practice to always enclose text in some tags like etc