Can you please provide me with detailed instructions on how to use the radio button?

As someone who isn't a professional coder, I dabble in creating code for fun. Right now, I'm working on a roleplay project on a website where each character has a designated "space" to input HTML and CSS code as a template. I've stumbled upon some code snippets on Tumblr by searching for "roleplay, tabilla, etc." Most of these templates use radio buttons as links to different sections, but I'm struggling to grasp how it works. Here's an example I came across:

<input type="radio" id="cncl-1" name="cncl_group" checked="checked" />
    <input type="radio" id="cncl-2" name="cncl_group" />
    <input type="radio" id="cncl-3" name="cncl_group" />
    <input type="radio" id="cncl-4" name="cncl_group" />
    <input type="radio" id="cncl-5" name="cncl_group" />

    <div class="cncl-tabs">
        <div class="cncl-content">

---the remainder of the code is too extensive---

<div class="cncl-labels">
            <label for="cncl-1">i</label>
            <label for="cncl-2">ii</label>
            <label for="cncl-3">iii</label>
            <label for="cncl-4">vi</label>
            <label for="cncl-5">v</label>
        </div>

As for the CSS style:

.conciliate input[type="radio"]:nth-of-type(1):checked ~ .cncl-tabs .cncl-content div:nth-child(1),
.conciliate input[type="radio"]:nth-of-type(2):checked ~ .cncl-tabs .cncl-content div:nth-child(2),
.conciliate input[type="radio"]:nth-of-type(3):checked ~ .cncl-tabs .cncl-content div:nth-child(3),
.conciliate input[type="radio"]:nth-of-type(4):checked ~ .cncl-tabs .cncl-content div:nth-child(4),
.conciliate input[type="radio"]:nth-of-type(5):checked ~ .cncl-tabs .cncl-content div:nth-child(5) {
    display: block;
    animation: aparecer 1.5s;
}

Answer №1

Below is an example I created for you using radio buttons, but feel free to replace them with other elements like regular buttons or divs. The key here is the combination of styling and JavaScript function: the styling hides the elements initially, and the JavaScript reveals them upon clicking specific elements that pass the ID of the area to show. Unlike radio buttons which only allow one selection from a form, this setup lets you display the chosen element when capturing the value of each radio button.

    function changeSection(id) {
        hideAll();
        document.getElementById(id).style.display = 'block';
    }

    function hideAll() {
        let section1 = document.getElementById('section1');
        let section2 = document.getElementById('section2');
        let section3 = document.getElementById('section3');
        section1.style.display = 'none';
        section2.style.display = 'none';
        section3.style.display = 'none';
    }
    .container {
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #cad2ff;
        width: 100%;
    }
    
    .rowContainer {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 23px;
        background-color: #f0f0f0;
        width: 100%;
    }
    
    input {
        margin-right: 10px;
        height: 49px;
    }
    
    #section1,
    #section2,
    #section3 {
        display: none;
    }
    <div class="container">

        <div id="section1">
            Section A
        </div>
        <div id="section2">
            Section B
        </div>
        <div id="section3">
            Section C
        </div>
    </div>

    <div class="rowContainer">
        <label for="1">Section 1</label>
        <input onclick="changeSection('section1')" id="1" type="radio" name="section">
        <label for="2">Section 2</label>
        <input onclick="changeSection('section2')" id="2" type="radio" name="section">
        <label for="3">Section 3</label>
        <input onclick="changeSection('section3')" id="3" type="radio" name="section">
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Juggling PHP scripts within javascript

Can you help me with a question I have? I am working on multiple JS scripts, such as this one: <script> $('#mapveto1').click(function() { $('#mapveto1').addClass('banned'); $('#map1').text('cobble ...

Align an image in the center of a div without using absolute positioning

I'm currently facing an issue where I need to align an image at the center of a div without using absolute positioning. This is necessary because the image spills over into any adjacent divs on the page. Specifically, I have a previous div containing ...

Why isn't the AngularJS injected view resizing to fit the container?

As a novice delving into a project in the MEAN stack, I'm encountering inconsistent HTML previews. When I view it independently versus running it from the project, the display varies. Here's the intended appearance (in standalone preview): imgu ...

Struggling with this CSS is really getting to me

I am struggling to create a modal with the tools and close button appearing on the same line. It should look similar to the image below: var modal = document.getElementById('myModal'); var btn = document.getElementById("myBtn"); var span = doc ...

how to make a div scroll after reaching a specific pixel distance

Hi there! I'm working with a DIV that has a width of 1600px. I'm wondering if there's a way to implement a feature within the DIV that fixes the first 200px and adds an automatic scroll for the rest of the content. Do you know of any CSS tr ...

How can I convert an HTML Div to CSS styling?

Currently, I am attempting to transform the following HTML code snippet into CSS. While I understand that you can utilize div in CSS, I am uncertain if it is possible to use an href with CSS. Here is the code in question: <div id="menubar1"> <a ...

jQuery unable to target Bootstrap button

I've been experiencing some trouble trying to attach a listener to a button I made with Bootstrap. <button type="button" id="buttonone" class="btn btn-default btn-lg good"> <span class="glyphicon glyphicon-minus" aria-hidden="true">< ...

"Creating a user-friendly interface design with two separate divs, each showcasing a

I am looking to create a UI/UX design that includes a logo and two menus, one for language change and one for navigation. https://i.sstatic.net/Tb6zc.png My current approach involves two div elements: 1. The first div contains the image and language men ...

Randomly positioning an image while the page is loading

I've been developing a portfolio website to showcase my design work, but I've encountered a minor issue. My goal is to have the images load in random positions and then make them draggable using Dragabilly. However, sometimes all the images end ...

Guide to changing the background colors of multiple elements when hovered over by the mouse?

I want to customize my website's search bar by changing the background color when it is hovered over. Currently, the search bar has two main elements: the text box and the submit button. I have successfully programmed the text box element to change to ...

Displaying photos locally in HTML is not supported

I've encountered an issue with my HTML code. I'm trying to load images from my local drive, and the path to the folder seems correct because I can open the images by ctrl + clicking on them. However, when I open my page using a live server or hos ...

Retrieve data from a different div, perform a subtraction operation, and dynamically update yet another div using jQuery

Looking to extract a specific div class value, subtract 500 from it, and display the result in another div. Unclear about the steps needed to show the subtraction outcome on the other div. Consider this scenario: <div class="main-value">6000</d ...

What is the best way to implement a loading cursor when the Submit button is clicked?

Is there a way to incorporate a progress cursor into my code in order to notify the user to wait when they click the Submit button or the Upload Button while uploading multiple files? Below is an example of my form: <form action="" method="post" enct ...

The enigmatic discrepancy in height across various browsers

I have encountered an issue with the layout of my HTML document. Both the BODY and HTML elements are set to a height of 100%. Within these elements, I have two child elements - one with a fixed height of 100px and the other set to height:100%. However, th ...

Extra horizontal spacing in CSS

Struggling to eliminate the excess horizontal space on my HTML/CSS page. Any thoughts on what might be causing this? Appreciate any help! ...

Disable the time selection feature in the text input field

Despite seeing the same question asked before for this issue, I am looking for a solution that does not involve replacing the textbox with the same ID. When Timepicker is selected in the dropdown menu timepicker, it should activate in the textbox (which i ...

My AJAX request seems to be redirecting to my PHP file instead of simply returning the response text. What could be causing this issue?

I am currently working on a project for my Web Engineering course and I am incorporating jQuery to execute an AJAX request to my PHP file using the POST method. The task specifies that "each time the [submit] button is pressed, the form data should be disp ...

Ways to display a GIF image as a pop-up during data loading in an MVC application

I am working on a project using the MVC framework. The application retrieves a large amount of data during loading. I would like to display a loading image - a .gif file while fetching records. Below is the code snippet I am currently using: //Loads rec ...

Select an image from the browser using JavaScript, adjust its size, and then transmit it to the server. Finally, utilize PHP to properly save the image

I am currently tackling the challenge of implementing a classical feature where users can select a file in their browser ("Browse"), have JavaScript resize it to a maximum width/height of 500 pixels, upload it to the server, and then save it to disk using ...

Implement Bootstrap and CSS to ensure that my content appears below the header when users scroll down

I am struggling with a simple HTML page that is working well with CSS, but encountering an issue where the input form gets placed above the header when scrolling down. I want the header to always remain above the content even while scrolling. Any suggesti ...