Develop Reference

Clicking button from one page to anchor link down to open a specific accordion tab in another page

I am trying to anchor link to specific accordion tab on another page of the site by pressing a call to action button on my current page. When pressing the button it should go to another page to open the specific tab.
<div class="main-tab">
<input type="radio" name="subject" id="radio-1" checked="checked">
<input type="checkbox" name="subject" id="check-1">
<label for="radio-1">subject 1</label>
<label for="check-1">subject 1</label>
<section>
</section>
<input type="radio" name="subject" id="radio-2">
<input type="checkbox" name="subject" id="check-1">
<label for="radio-2">subject 2</label>
<label for="check-2">subject 2</label>
<section>
</section>
</div>
The button
subject 2

I'm trying to put a <button> inside an <input type=“radio”>'s <label> for mobile

I asked this question a month ago: I'm trying to put a <button> inside an <input type="radio">'s <label>
The answer I marked correct worked perfectly... for the desktop browsers I tested. Testing on my iPhone 6, both Safari and Chrome have the buttons unclickable.
Correct answer snippet copied below:
button {
pointer-events:none;
}
<h1>Choose A or B</h1>
<input type="radio" name="choice" value="A" id="a"><label for="a"><button type="button">A</button></label>
<input type="radio" name="choice" value="B" id="b"><label for="b"><button type="button">B</button></label>
Is there a solution that works for both smartphone AND desktop?
I could get rid of <input type=“radio”> and rewrite radio button behaviour in JavaScript from scratch, but I'm hoping I won't need to do that. Is there an easier way?

<h1>Choose A or B</h1>
<label>
<input type="radio" name="mode" value="create">
<span style="-webkit-appearance: button;">create table</span>
</label>
<label>
<input type="radio" name="mode" value="create">
<span style="-webkit-appearance: button;">create field</span>
</label>

Load data on Bower plugin for a progress bar

I recently came across bower a web-tool to develop a progress bar. I have implemented a progress bar as series of radio buttons aligned next to each other. The concept is to load data from a .edf file to the browser upon clicking the radio buttons. All these work fine before I apply the Bower scripts. When I make a transition from one radio button to another I would like to have an effect which shows a transition while clicking on each button. Can I get some advice here if I can achieve this by applying any of the bootstrap classes or to modify the code existing? The snippet I have added is not loading the Bower libraries, otherwise it would look similar to this.
$('.radios').radiosToSlider({ animation: true, });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"/>=
<script type="text/javascript" src="bower_components/radios-to-slider/dist/jquery.radios-to-slider.js"/>
<link rel="stylesheet" type="text/css" href="bower_components/radios-to-slider/dist/radios-to-slider.css"/>
<div class="radios">
<label for="option1" class="btn">
<input id="option1" name="options" type="radio" autocomplete="off" onchange="dataSegment(0)" checked>
</label>
<label for="option2" class="btn">
<input id="option2" name="options" type="radio" autocomplete="off" onchange="dataSegment(1)">
</label>
<label for="option3" class="btn">
<input id="option3" name="options" type="radio" autocomplete="off" onchange="dataSegment(2)">
</label>
<label for="option4" class="btn">
<input id="option4" name="options" type="radio" autocomplete="off" onchange="dataSegment(3)">
</label>
<label for="option5" class="btn">
<input id="option5" name="options" type="radio" autocomplete="off" onchange="dataSegment(4)">
</label>
</div>

Your problem is that you are using a URL that is local to a website. Notice that you have no protocol in the URL (https://, http://, etc). I did a little digging, and the URL you should be using is http://rubentd.com/bower_components/radios-to-slider/dist/jquery.radios-to-slider.js

Checkbox appear when certain radio selected

<label class="radio inline">
<input type="radio" name="drivesize" id="drivesize" value="250 GB" required>250GB
</label>
<label class="radio inline">
<input type="radio" name="drivesize" id="drivesize" value="500 GB">500GB
</label>
I have the above bit of html in my webpage and I'd like to add the following if the 500GB radio button is selected.
<label class="checkbox inline">
<input type="checkbox" name="mappings" id="mappings" value="Done" required>Done
</label>
Can anybody tell me the best to do this?

Just a note: you should not use duplicate IDs (see #drivesize). IDs should be unique while classes can be reused. If you change your IDs, it can be easier to check.
Here's a bit of jQuery that should allow you to check for if the box is checked. We will assume that you changed the 500GB ID to largeDrive, the Done button is hidden from view, and you have an event handler on the radio buttons.
if ($('input#largeDrive').is(':checked')) {
$('input#mappings').show(); //assuming it was hidden
}

how to select a radio button by clicking on an option and not the actual button itself

say i have the following three options and each with a radio button beside
London
Newyork
Dubai
I need jQuery that when the user clicks on the word the radio button selects!

This is a built-in feature in HTML, so no need for JavaScript. Simply use the label tag like this:
<label><input type="radio"> London</label>
<label><input type="radio"> New York</label>
<label><input type="radio"> Dubai</label>

Two ways:
<label for="london"><input type="radio" id="london"> London</label>.
Use label's for attribute similar to radio's id.
<label><input type="radio" > London</label>
Place the radio within label.
Very basic HTML.

You can use the label tag:
<input id="emptyacct" type="radio" name="account" value="radiobutton" />
<label for="emptyacct">Yes </label>

It's just HTML ;)
<input id="input_london" type="radio" name="london" value="radiobutton" />
<label for="input_london">London</label>
<input id="input_ny" type="radio" name="ny" value="radiobutton" />
<label for="input_ny">New York</label>
...