Develop Reference

Change label on form label via JQuery

I searched for jquery change the labels although there were a lot of answers they didn't pertain to my question. I want to change the label to something else that includes links. I can't seem to get it to work!! I've put the JS in the head position of the code but had no luck and even used JSFiddle please see below. What am I doing wrong?
JSFiddle
https://jsfiddle.net/14tx86j5/
HTML
<input name="input_147.1" value="I agree to Veryappt’s Terms of Service" id="choice_3_147_1" type="checkbox">
<label for="choice_3_147_1" id="label_3_147_1">I agree to Companies Terms of Service</label>
Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$("#label_3_147_1 label").html('You also agree to our Privacy Policy, which describes how we process your information. Learn More about why we ask for this information.');
});
</script>

You have wrong Selector to target label element. The selector you have used looks for label element inside element with id label_3_147_1. You need to use:
$("#label_3_147_1")

Works for me .
You need to include JS Libraries
$('#label_3_147_1').html('You also agree to our Privacy Policy, which describes how we process your information. Learn More about why we ask for this information.');
});
Fiddle

You can use only id of label something like that:
$("#label_3_147_1").html('Put Your html here');

JavaScript to Toggle Material Design Lite Switch

I have the following Material Design Lite switch in my HTML and is looking for some javascript help.
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked />
<span class="mdl-switch__label">USEREMAIL Subscribed</span>
</label>
Upon clicking the switch, I'd like to add:
Toggle functionality to update the checked to unchecked - like on and off switch, but is looking for JavaScript help here.
I would like to really have values of "subscribed" and "unsubscribed" as text that is displayed next to it as shown (but hardcoded in the html). Is this feasible to change dynamically?
Thanks for your time. I did find this as a reference, but it was using CheckBox.

If you refer to the mdl's source code, you will find that the check and uncheck functions are bound with label tag.
You can specify an id to label like below:
<label id="check" class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input"/>
<span class="mdl-switch__label">Subscribed</span>
</label>
<input type="button" value="test switch" id="btn"/>
MDL natively supports on/off status switch on button click. You can also control the status by another button.
$("#btn").click(function() {
if($('#check').is('.is-checked')) {
$('#check')[0].MaterialSwitch.off();
}
else {
$('#check')[0].MaterialSwitch.on();
}
});
To update the switch label dynamically, the code can be put like below. Bind the input's change event on page load and update label text if the on/off status changes.
//toggle label
$('#check input').change(function(){
if($(this).is(':checked'))
$(this).next().text("Unsubscribed");
else
$(this).next().text("Subscribed");
});
Here is the jsFiddle code. The answer comes a bit late for you but I hope it still helps.

Referring to the code in above question:
var myCheckbox = document.getElementById('switch-1');
myCheckbox.parentElement.MaterialSwitch.off();
…
myCheckbox.parentElement.MaterialSwitch.on();

Below code maybe solve your problem:
var isChecked = $('#switch-1').is(':checked');
if(isChecked) {
alert("subscribed");
} else {
alert("not subscribed");
}

Switch between divs using radio buttons

I am trying to show-hide div using jquery on click of radio buttons. It might be a weird question to ask but my brain is not digging more and i know that is easy task to do.
Below is HTML
<input type="radio" value="Active Now" class="tabActive" id="active-radio1"
/>Participations
<input type="radio" value="Not Active Now" class="tabNotActive"
id="active-radio2" />
Droppers
<div id="tabActive" class="tab-content">
</div>
<div id="tabNotActive" class="tab-content hide">
</div>
Below is JS
$("input:radio").off().on('click',function()){
var value = $(this).attr("class");
$("#"+value).show();
// I also tried
$("#"+value).toggleClass('hide'); /*Not right way, i know :)*/
$("#"+value+" .tab-content").toggleClass('hide')
});
I am not able to switch between divs due to hide class, but nothing worked
Note: The hide class is being added by framework and i can not modify it.
So, i need a perfect way to show hide these divs.

Try this.
$('input[type=radio]').on('click',function()) {
var id = $(this).attr('class'); // this is very prone to problems
$('.tab-content').addClass('hide')
$('#' + id).removeClass('hide');
});

You can try this one:
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show('slow');
});
});
DEMO FIDDLE

Show/Hide div with button

I have a a HTML page with a button which shoes hidden content when pressed. I am using jquery code which I have bundled into my HTML page. When I press the button to show the content in the hidden div it works find, however when I press the button again to hide the content nothing happens. If anyone could help me that would be great. Also how would I be able to target multiple buttons. Would I just paste the same jquery code and label it '2' and then '3' and so on for example? Any working examples would be great. Here is my code:
HTML:
<head>
<script>
$(document).ready(function() {
$("#spoiler1").hide();
$("#button1").click(function() {
$("#spoiler1").show(300);
});
});
</script>
</head>
<button id="button1">Adventurer ▼</button>
<div id="spoiler1" style="display:none">
<p>1. Climb a tree<input type="checkbox" /></p>
<p>2. Roll down a really big hill<input type="checkbox" ></p>
<p>3. Camp out in the wild<input type="checkbox" ></p>
<p>4. Build a den<input type="checkbox" ></p>
<p>5. Skim a stone<input type="checkbox" ></p>
</div>
Thanks in advance for any help or advice.

Use .toggle() instead
$(document).ready(function () {
$("#spoiler1").hide();
$("#button1").click(function () {
$("#spoiler1").toggle('slow');
});
});
Demo
Update
And the idea about having mutiple buttons, I've come up with the approach that you should try, use classes instead of IDs for the buttons and provide the same ID to divs that you want to toggle. This might take some design issues but you can manage and this is just a basic guideline to move forward.
As Markup is too long for mutiple divs so i'm posting only.
JQuery
$(document).ready(function () {
$(".category").click(function () {
$(".show").hide();
var divToShow = $(this).text().split(" ")[0];
$("#" + divToShow).toggle('slow');
});
});
Updated Fiddle

$(document).ready(function(){
$("#spoiler1").hide();
$("#button1").click(function(){
if($("#spoiler1").is(':visible')){
$("#spoiler1").slideUp(300);
}
else
{
$("#spoiler1").slideDown(300);
}
});
});
Demo:
http://jsfiddle.net/YvUDV/

Use toggle instead:
$('#button1').bind("click",function(){
$("#spoiler1").toggle("fast");
});

As for multiple button event. Assign a class name to the button so you can select by class.
$('button.toggle-div').click(function(){...});
As for visibility toggle, there are a number of ways.
Use toggle() in jQuery. (the most obvious choice, but in practice we could also..)
Use toggleClass() link to
add/remove a class which has a display:none css rule. (more flexible, you can toggle other css styles like the font color, background, etc.)
Use some
two-way binding JavaScript libraries like knockoutjs or angular.
(Probably an overkill for a small application. But it will
definitely reduce the amount of coding if it is a large scale.)

Highilight a button after pushing javascript

I'm trying to make simple image gallery with html/css and a bit of javascript.It's all up and working, but one function.
I want that when I open the index.html 'All' would be already highlighted by my custom style and if pushed on another button highlight would go to that particular button.
html of a button looks like this
<input type='button' value='Design' class="cat-itiem" id='filterDesign'>
edit: I ended up using OnResolve's method and it worked just fine!(even for someone who doesn't know any JS) Thank you all for help :)

Assuming your highlighted class is called activeButton, you could do the following with jQuery
$(function () {
$(".cat-itemem").click(function () {
$(".cat-itemem").removeClass('activeButton');
$(this).addClass('activeButton');
}
})

I've created an example with jsfiddle for you with simple jQuery. You can see each aspect (markup, css, and jquery).
http://jsfiddle.net/p5ZUv/7/

You can certainly append styles on button click via pure css, but to unhighlight others you need javascript.
HTML:
<input type='button' value='All' class="cat-itiem highlighted" id='filterAll'>
<input type='button' value='Design' class="cat-itiem" id='filterDesign'>
<input type='button' value='Logo' class="cat-itiem" id='filterLogo'>
<input type='button' value='Photography' class="cat-itiem" id='filterPhotography'>
CSS (Add yours)
.cat-itiem{}
.highlighted{background:green}
JS (Jquery is used)
$('.cat-itiem').click(function(){$('.cat-itiem').removeClass('highlighted'); $(this).addClass('highlighted')}