Radio Button

Get Started
1

How we add Radio Button in Label /Heading/ and at the place of Radio 1,2,3,4???


<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Accordion with CSS3</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        
        <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/CSS3Accordion/css/style.css" />
		
	
    </head>
    <body><section class="ac-container">
				<div>
					<input id="ac-1" name="accordion-1" type="radio" checked />
					<label for="ac-1">Radio 1</label>
					<article class="ac-small">
						<p>This is First Radio Click</p>
					</article>
				</div>
				<div>
					<input id="ac-2" name="accordion-1" type="radio" />
					<label for="ac-2">Radio 2</label>
					<article class="ac-medium">
						<p>This is Second Radio Click</p>
					</article>
				</div>
				<div>
					<input id="ac-3" name="accordion-1" type="radio" />
					<label for="ac-3">Radio 3</label>
					<article class="ac-large">
						<p>This is Third Radio Click</p>
					</article>
				</div>
				<div>
					<input id="ac-4" name="accordion-1" type="radio" />
					<label for="ac-4">Radio 4</label>
					<article class="ac-large">
						<p>This is Last Fourth Radio Click </p>
					</article>
				</div>
			</section>
        </div>
</Body></html>
2

Iā€™m not sure what youā€™re trying to achieve here, but this:

.ac-container input {
    display: none;
}

is removing the radio button from display.

1 Like
3

It is unclear what you are trying to do as you are using the checkbox/radio hack to hide and show elements and usually you would hide the radio button from sight while doing this.

If you want to show the radio input in the label field then you will need to place it there absolutely and set its display to block as mentioned by TechnoBear above. You will also need to set a stacking context for the absolute child by making the parent div position:relative.

e.g.

.ac-container > div {
	position:relative;
}
.ac-container input {
	display: block;
	position:absolute;
	left:3px;
	top:12px;
	z-index:21;
}
.ac-container label {
	padding-left:30px;
}

Full working code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Accordion with CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/CSS3Accordion/css/style.css" />
<style>
.ac-container > div {
	position:relative;
}
.ac-container input {
	display: block;
	position:absolute;
	left:3px;
	top:12px;
	z-index:21;
}
.ac-container label {
	padding-left:30px;
}
</style>
</head>
<body>
<section class="ac-container">
  <div>
    <input id="ac-1" name="accordion-1" type="radio" checked />
    <label for="ac-1">Radio 1</label>
    <article class="ac-small">
      <p>This is First Radio Click</p>
    </article>
  </div>
  <div>
    <input id="ac-2" name="accordion-1" type="radio" />
    <label for="ac-2">Radio 2</label>
    <article class="ac-medium">
      <p>This is Second Radio Click</p>
    </article>
  </div>
  <div>
    <input id="ac-3" name="accordion-1" type="radio" />
    <label for="ac-3">Radio 3</label>
    <article class="ac-large">
      <p>This is Third Radio Click</p>
    </article>
  </div>
  <div>
    <input id="ac-4" name="accordion-1" type="radio" />
    <label for="ac-4">Radio 4</label>
    <article class="ac-large">
      <p>This is Last Fourth Radio Click </p>
    </article>
  </div>
</section>
</div>
</body>
</html>
4

@PaulOB Thank you, I want to create a expandable radio same to same like the Amazon welcome screen but I try to search the script which related to this but I canā€™t find on Google. What would be code like this?

5

The radio buttons toggle what is displayed. You need to search for ā€œaccordianā€ (as hinted at by the class values seen in the view-source)

6

Iā€™m not following as the code I posted is making an accordion with a radio-button (much the same as the amazon link but different styling of course)?

What is it that you need different?

1 Like
7

Nothing!!! How we make accordion same like I posted link in previous post?

8

You already have that?

They both have the same function but are just styled a little differently. It should be a relatively easy matter to put your form elements inside the code I posted and add a bit of styling to match the amazon example?

What is is exactly that you canā€™t do?

The thread was about adding a radio button which I have shown one way for you to do it. You could indeed style the radio button differently if you styled an inner element of the label instead.

Hereā€™s a start:

Note that the amazon site is more sophisticated and uses javascript to toggle the accordion with a fallback form post is js is disabled.

9

Amazing you are genius @PaulOB
Great Thanks!!

10

But the accordion is best in javaScript.
Mights itā€™s funny but css accordion is too fast and not works pretty. Might you understand whatā€™s I am saying. Thanks to @PaulOB, whoā€™s provide the script of front look.

11

The amazon example you linked to and wanted to replicate has no animation and is instant. Which JS animation are you referring to?

You can adjust the speed in my example through css but to get a smoother animation we have to assume that the element will not exceed say 99em in height as you canā€™t animate to auto in css.

Iā€™ve updated the demo to show this in action.

12

Want to add two tag inside form but when we add this, accordion is not working.

Also in that form there is the Header of accordion not become bold when we click.

Main thing is here about form. Required user can only fill one form and this is possible by form tag only.

If I apply the form elements only one form tag then user might fill both form and submit and if I add required in textbox then required all fill the text box .

Since how we add two from tag in same accordionā€¦

13

Thatā€™s simple styling. Just set the span to bold when the input is checked.

You can add two form tags inside quite easily.

Iā€™ve updated the codepen:

You really need to start working these things out for yourself. I have given you the basics of what you asked for but I canā€™t code the whole thing for you. :slight_smile:

4 Likes
14

How We make radio default open :
I use : checked, checked="checked" but it not work.

Defaultly now open 1st radio box container but we make want to open 2nd radio default open. What we do? Whatā€™s code??

15

I think you posted the wrong codepen. There isnā€™t a ā€œfirst radioā€ let alone a second.
Please edit the post to the correct codepen.

2 Likes
16

Wouldnā€™t it make sense to simply swap the content over? It seems more logical to have the first option open by default, rather than the second, so just put the log-in information first and the sign-up option second.

2 Likes
17

I updated the codepen to show how to change the order:

I added a form-last class here:

<div class="form-row form-last">
        <div>
          <label class="stacked" for="login">Please Login</label>
          <input class="inp" type="text" name="login" id="login">

And then changed the js to this:

$(".input-block:last").addClass("active");

It previously said ā€˜firstā€™.

Yes that would be the logical solution to have the first one open by default with he correct content in place :slight_smile:

1 Like
18

Is it not possible in this script that donā€™t show any up/down /move motion only and instant open one accordion to other.

19

If you are talking about the jQuery version and you donā€™t want the slideDown() or slideUp() then change those rules in the js to show() and hide() respectively. (Refer to the jQuery documentation for more info).

Show() and hide() happen instantly but I think it will be a big mistake for accessibility because users may not realise what just happened when itā€™s instant. Itā€™s like jumping to a new part of the page instantly and this more often than not confuses users.

The slideDown and slideUp give visual cues and allow the user to easily spot what has changed.

1 Like
20

Yes you are right!! I agree with youā€¦