Display a Div Element Upon Clicking Checkbox or Radio Button

Looking for a way to display Divs related to checkbox radio buttons in the title. After attempting to implement scripts from past discussions, I still feel like something is missing.

The goal is simple - clicking on the Second button (checkbox radio tool 2) should open div class row3, while clicking on the First button (checkbox radio tool 1) should open div class row2.

While it might be an easy task for some, as someone new to this field, any guidance or suggestions would be greatly appreciated.

Thanks.

/* PRODUCTS AND BUTTONS */

.button {
    position: absolute;
bottom: 0%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #d8d8d8cc;
color: rgb(0, 0, 0);
font-size: 70%;
width: 70%;
height: 20%;;

border: none;
cursor: pointer;
border-radius: 7px;
text-align: center;
  }

  .button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }
  
  .button span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }
  
  .button:hover span {
    padding-right: 25px;
  }
  
  .button:hover span:after {
    opacity: 1;
    right: 0;


  }

... // Remaining CSS rules and HTML markup

Answer №1

Give this a shot! (Execute code snippet to view)

JSFiddle: https://jsfiddle.net/username/examplecode/

Crafted by: @UniqueHandle

function displayContent(){
  document.getElementById('content').style.display = 'flex';
}
function hideContent(){
  document.getElementById('content').style.display = 'none';
}
body {
  font-family: Helvetica;
}
.hidden {
  display: none;
}
h2 {
  color: red;
}
<h2>Select an option</h2>
<input type="button" value="Show Content" onclick="displayContent();" />
<input type="button" value="Hide Content" onclick="hideContent();" />
<div id="content" class="hidden">
  <p>This is the hidden content that will be displayed or hidden based on your choice.</p>
</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

Utilize flex to arrange the elements in a li layout

Can someone help me figure out why the code below is not working as expected? I need the content of the 2nd option ("Log when error occurs and limit ...") to be enclosed in a yellow background. .flex{ display: flex; display: -webkit-flex; display ...

What is the best way to eliminate concealed divs from the view source of a webpage?

On my HTML page, I have some hidden DIVs that can still be viewed in the page source. I want to ensure that these DIVs are not visible to users when they inspect the page source. Is there a way to achieve this using Javascript or another solution? ...

Including PHP script inside the content of a SELECT Element

I have been working on a function that, when called, will insert PHP code into my document. For example (original code) . <select name="impressora" class="form-control"> <option value="selecione">Selecione1...</option><?php foreach( ...

Getting the x-axis points on Google charts to start at the far left point

I have integrated the Google API for charts into my application and am using multiple charts on the same page. However, I am facing an issue with setting padding for the charts. When I include more data points, the chart area occupies more space in the div ...

Is there a way to update my profile picture without having to constantly refresh the page after uploading it?

Here is the code for my profile page. I am considering using a callback along with another useEffect function, but I'm unsure. Please help me in finding a solution. For now, let's ignore all the code related to deleting, saving, and handling ingr ...

Generating elements added at various depths within an HTML document with the help of JavaScript

create_new.append("div") .append("form").merge(update_5) .attr("action", d => d.market) .attr("target","_blank") .style("width","100%") .style("height","282") .append("input").merge(update_5) .attr("type","submit") ...

The method .slideUp() is not functioning as intended

My current project involves a page structure that looks like this: <div id="wrapper"> <div id="page_banner"> <canvas id="voucher_canvas"></canvas> <div id="div_voucher_img"><img id="voucher_img" src="" ...

"Enhance Your Website with Creative Image Hover Effects using HTML

I'm looking to add a simple hover effect to the images AboutUsLink.png and AboutUsColourLink.png, but I'm unsure of the process. Here is the HTML code: <section class="link1"> <a href="#SecondLink"><img src="images/LogoAndLin ...

Select a different inspiring quote every hour

Wouldn't it be great to add a touch of inspiration to my page with a new motivational quote that changes every hour or day? I'm thinking of compiling all the quotes in a document and having javascript randomly select one to display on my website. ...

What is the best way to bring in an HTML file into a Python variable?

I'm in the process of creating an HTML email using Python, MIMEMultipart, and SMTP. Since the HTML content is lengthy, I decided to store it in a separate HTML file. Now, my goal is to import this HTML file into my Python script (located in the same d ...

Activate Intellisense for PHP in .html documents within Webmatrix

How can I set up WebMatrix to treat .html files like .php files? I have been tasked with editing a website that contains php code within .html files. The site works properly due to handler declarations in the .htaccess file. I want to use WebMatrix for ed ...

Arrange DIV elements sequentially with HTML, JQuery, and CSS

Live Demo: Live Demo HTML: <div class="target"> <img src="bg-clock.png" alt="jQuery" /> </div> <div class="target2"> <img src="bg-clock.png" alt="jQuery" /> </div> CSS: .target, .target2 { ...

Tips for adjusting the width of a field within an existing OpenERP7 form view utilizing percentages instead of pixels

In the process of modifying a form view on OpenERP7 through inheritance, I am attempting to adjust the width of a field to 50% (currently at 40%). While I have successfully altered the style and width of the field using pixels, any attempt to input a perce ...

What is the best way to add an element while preserving its original placement?

I need a solution to duplicate the code of an element and transfer it to another element without removing it from its original position. Currently, I have a JavaScript function that allows you to move a picture to a box when it's clicked. However, th ...

Angular applications can redirect to their own internal pages when linking to an external URL

I've recently started using Angular and have encountered a minor issue. My routing setup is working as expected in the navbar, but I have a link that points to an external URL. When I click on it, instead of redirecting me to the external site, it ta ...

Is there a way to create a mobile-exclusive slideshow using JavaScript?

I am trying to create a slideshow on my website, but whenever I add JavaScript it seems to break the desktop version. I want these three pictures to remain static and only start sliding when viewed on a mobile device. I have searched for resources on how t ...

Utilize Javascript to Populate Form Fields Based on "Selected Name"

I am currently facing a challenge in using javascript to automatically populate a form, specifically when it comes to setting the value for the country field. <form action="/payment" method="post" novalidate=""> <div class="input_group"> ...

Is it possible for me to reply to packets that are transmitted to a website?

I'm currently working on a Python program that sends a 'hello' packet to the server and I'm wondering if I can get the server to respond based on that. Here's the code snippet I'm using to send the packet: import requests hL = ...

Achieving text center alignment and adding color to text within a header using Bootstrap

I am looking to center the text in a header and apply color to it using Bootstrap. Unfortunately, there is no direct option for font-color or text-color in Bootstrap. Below is my HTML and CSS code: #header { width: 800px; height: 50px; color :whi ...

Another component's Angular event emitter is causing confusion with that of a different component

INTRODUCTION In my project, I have created two components: image-input-single and a test container. The image-input-single component is a "dumb" component that simplifies the process of selecting an image, compressing it, and retrieving its URL. The Type ...