How to use javascript change function to toggle a paragraph?

Question

I want to toggle an input via a checkbox. Here's the code:

css:

.moveaway{ position:absolute;top:-999rem;}

html

<p>
<label><?php _e('Setup Template')?></label>
<input class="check-toggle" name="toggle" type="checkbox" value="1" <?php echo $template ? 'checked="checked' : '';?> />
</p>
<p id="template-input" class="<?php echo $template ? '' : 'moveaway'?>">
<lable for="template-name">Template Name</lable>
<input id="template-name" type="text" name="template-name"  value="<?php echo $tamplate; ?>" />
</p>

javascript:

$("input.check-toggle").change(function() {
  if ($(this).is(':checked')) {
    $("p#template-input").attr('class','');
  }else{
    $("p#template-input").attr('class','moveaway');
    $("input#template-name").val(0);
  }
});

The above code works when the template-name input field is empty. When the template-name field value is set, the wrapper p#template-input gets merged in to the p which contains the check-toggle input.

I don't understand how the change function made this. I would like to learn how to get the result that the p#template-input can be toggled by the checkbox.

can you give a jsfiddle.com for us, looks like your code is right, but I would cache the references before apply the function, that way don't matter if they have inside changes, it will still referenced in your var, that you can get inside the closure from change. — Gabriel Gartz
– Gabriel Gartz, Commented Jan 31, 2013 at 12:06

Gabriel Gartz · Accepted Answer · 2013-01-31 12:20:52Z

1

I've made some changes in your code and it works.

Look the demo.

So first I've changed the <p> to <div>, it is better to change position from blocks then inline ones, but you can still change it's property on CSS, to keep using p or from div to still in the line, even put inside the p.

Then for class I've used the addClass and removeClass, is better then change it attributes.

It worked as you see in the demo the template-input.

Like my comment earlier, the cached method:

var $templateInput = $("div#template-input");
var $templateName = $("input#template-name");
$("input.check-toggle").change(function() {
  if ($(this).is(':checked')) {
    $templateInput.removeClass('moveaway');
  }else{
    $templateInput.addClass('moveaway');
    $templateName.val("0");
  }
});

Will run even fast, and the result is same. You can see the demo here.

answered Jan 31, 2013 at 12:20

Gabriel Gartz

2,87024 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jenny Over a year ago

Thanks! it works! but the template-input div initially loaded. Can I have it initially loaded with "moveaway" class?

Gabriel Gartz Over a year ago

yes, I just extract your php code from it: class="<?php echo $template ? '' : 'moveaway'?>" or you can just add class="moveaway", will work too.

Jenny Over a year ago

thanks, I figured out why it doesn't initially loaded as moveaway-- the val(0) sets the value and saved. so my code treated 0 as the $template name. Now I only need to save it as null.

Gabriel Gartz Over a year ago

Here the demo jsfiddle.net/U4vQr/4 and if you want null val, you just change 0 to "" and will work

Collectives™ on Stack Overflow

How to use javascript change function to toggle a paragraph?

css:

html

javascript:

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

css:

html

javascript:

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related