Just starting out with CSS and coding. Setting up radio buttons and divs for a simple beginner's gallery

One challenge that perplexes me is how to reposition the concealed divs below the radio buttons with labels.

Check out my HTML here

View my CSS code here 

    /*color palette: abls
    [lightest to darkest]
    #eeeeee
    #eaffc4
    #b6c399
    #6a856a
    #333333
    */
    
    <!-- CSS code goes here -->


    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <link href="./NewbTests.css" rel="stylesheet" type="text/css">
        <link rel="shortcut icon" type="image/png" href="./Assets/SumisoulLogo.png">
        <title>Viewport</title>
      </head>


            <!-- HTML code goes here -->

I would have linked a few images to illustrate what is happening but I'm limited in links.

In essence; Before: (button 1)(button 2)(button 3)

Upon clicking any button: (button 1)[_______________________] (button 2)(button 3)

The div shows up on the side of the corresponding button. I don't really know what to do to have it align in a column without separating all of the divs and breaking the inline style of the buttons

htmlcssflexboxradio-buttonposition

Answer №1

Let's hope this solution is effective

  body, html {
  padding: 0;
  margin: 0;
}

body {
  background: linear-gradient(top left, red, orange);
}

span {
  display: none;
  position: absolute;
  max-width: 450px;
  left: 17px;
  top: 48px;
  padding: 3px;
  min-height: 30px;
  border-top: 1px solid #d3d3d3;
}

label {
  cursor: pointer;
  display: inline-block;
  padding: 10px;
  margin: 10px 0 0 0;
  background: #e0e0e0;
  color: black;
}
label:first-child {
  margin-left: 10px;
}

input {
  display: none;
}
input:checked + span {
  display: initial;
}

h3 {
  border-top: 1px solid;
  padding-top: 5px;
  position: absolute;
  top: 150px;
  left: 15px;
}
<label for="btn_one">Gallery 1</label>
<input type="radio" id="btn_one" name="nesto" checked="checked"/>
<span class="tab1">Gallery One</span>
<label for="btd_two">Gallery 2</label>
<input type="radio" id="btd_two" name="nesto"/>
<span class="tab2">Gallery two</span>
<label for="btd_tree">Gallery 3</label>
<input type="radio" id="btd_three" name="nesto"/>
<span class="tab3">Gallery Three</span>

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

To modify the background of a text, simply click on the image

I recently discovered a helpful hack in an answer on this website, which allows an image to be resized when clicked using the checkbox method. I have successfully implemented this feature but encountered an issue when trying to apply a CSS style change to ...

htmlcssonclick

Alter the background-color of the parent div when an input is checked using CSS

.chk-circle { width: 8px; height: 8px; background: #afb0b5; border-radius: 100%; position: relative; float: left; margin-top: 4px; margin-right: 8px; } .chk-circle label { display: block; wi ...

htmlcss

Implementing Validation for DropdownChoices and Checkboxes in Wicket Java

There is a checkbox and dropdown menu on an HTML page. Upon clicking submit, if both are selected, there should be an error message stating that at least one of them is mandatory and prompting the user to select at least one value. To address this issue, ...

javahtmlcheckboxwicketdropdownchoice

How can I use jQuery to reset a select dropdown to its initially selected option upon page load?

Can a select element be reset to its original loaded option using jQuery without the need for creating a custom cache of the initial value? ...

jqueryhtmldom

employing document.write() specifically for a designated division

This is the coding: $(document).ready(function(){ var Jstr = { "JSON" : [ { "Eid" : 102,"Ename":"", "Ecode" : "<input type ='text'/>", "Eprops": {"name": "", "value":"", "maxlength":""}} ] } ; $(".search").click(funct ...

javascriptjqueryhtml

The React Component in Next.js does not come equipped with CSS Module functionality

I have been attempting to incorporate and apply CSS styles from a module to a React component, but the styles are not being applied, and the CSS is not being included at all. Here is the current code snippet: ./components/Toolbar.tsx import styles from & ...

javascriptcssnode.jstypescriptnext.js

Updating the Background Color of a Selected Checkbox in HTML

I have a straightforward question that I've been struggling to find a simple answer for. Can anyone help me with this? Here's the checkbox code I'm working with: <input type="checkbox"> All I want to do is change the backgr ...

javascripthtmljquerycssweb

Static list elements are utilized in the CSS drop-down menu

It may appear that my coding skills are lacking or incorrect. When I attempt to create a drop-down menu in CSS, the new list elements end up on the other side of the page instead of within the container box. How can this be fixed? Below is the code snippe ...

htmlcss

Why is there a CSS reference failure in Express and how can it be resolved?

Below, you'll find a simple express server I've put together: // check out my basic Express server var express = require("express"); var app = express(); var bodyparser = require("body-parser"); app.use("/public/", express.static("./public/")); ...

javascriptcssnode.jsexpress

What could be causing this code to malfunction on a mobile device?

I am struggling to make this drag and drop function work on mobile devices. Despite implementing the code, it doesn't seem to function properly when accessed on my mobile phones. Here is the snippet of the code: copy = 1; $('.dragArea img&apo ...

javascripthtmlcss

Tips for setting up an automated system to check feeds

While I have experience parsing and setting up databases in PHP, I am now faced with the challenge of constantly monitoring an XML feed for a specific string within one of the tags. Each time this string is detected, I need to add the entire XML item (incl ...

phphtmlxmlparsingfeed

Enhancing user experience by implementing dynamic text box functionality that triggers ajax load for dropdown options using a combination

Here is the task I need help with, along with the code snippet: I want to enable the author select box when both the start and end dates are filled out. The author names should be fetched dynamically from the database based on the selected start and end ...

phpjqueryhtmlajaxjquery-ui

Is it acceptable to duplicate and replace content directly from the Google Inspector tool?

As I work on creating a new woocommerce checkout page, I encountered some issues. My approach to extracting code from woocommerce involved inspecting the Code and copying it directly into my checkout file at /woocommerce/checkout/checkout.php. Is this met ...

phpcsswordpresswoocommerce

When I zoom in, a different div replaces the original div

I have recently delved into the world of HTML and CSS as I embarked on creating my own website. However, I seem to have hit a snag - when I zoom in on the content, it overlaps with the menu. I have scoured the internet for a solution to no avail, so any as ...

csshtmlzooming

Guide on how to retrieve additional data from the API by pressing the "Load More" button

Hello, I am working on a project where I aim to display user data from an API called https://reqres.in/api/users?page=(the page number can be 1,2 or more) and present it in an HTML table using JavaScript with promises. Currently, I have successfully popula ...

javascripthtmlrenderinges6-promise

What is the process for transforming the search bar into an icon located at the top of a WordPress site?

For the past few weeks, I've been attempting to convert the search bar on my website (which is currently a plugin) into an icon positioned near the header. I've experimented with modifying the child theme's functions.php, the parent theme&a ...

phpcsswordpress

Content in tab remains stagnant

I am having trouble creating different tabs on a page with unique content in each tab's body. Whenever I click on a new tab, the body content remains the same. I'm not sure if it's an issue with how the tabs are set up in the HTML or if ther ...

javascripthtmlcsstabs

Combining Tailwind with Color Schemes for Stylish Text and Text Shadow Effects

tl;dr I have a utility class in my tailwind.config.ts for customizing text shadows' dimensions and colors. However, when using Tailwind Merge, I face conflicts between text-shadow-{size/color} and text-{color}. The Issue In CSS, text shadows are oft ...

javascriptcssreactjsnext.jstailwind-css

How can we transfer animation duration and `@keyframe` values through a function in CSS?

In my angular project, I am currently adding animations to text. However, I want to make these animations dynamic. For instance, I have a CSS class called .slide-in-top with an animation time set to 1.3s. Instead of this static value, I want to be able to ...

htmlcssangularanimationkeyframe

Working with radio buttons in a loop using PHP

I am facing an issue with a loop that iterates 3 times. In the loop, there's an HTML form containing radio buttons and I am processing the input using PHP. However, when echoing the form data, it does not display the correct values. Is there something ...

phphtmlformsradio-button