Toggle visibility of a div element using only CSS and HTML on click

I have a programming idea that involves the following: * Clicking on Span 1 will reveal Span 2 and disable Span 1. * Clicking on Span 2 will reveal Span 1 and disable Span 2.

Below are the codes I have written, but I am not sure if they are correct. Any assistance would be greatly appreciated.

CSS

body {
  display: block;
}
.span1:focus ~ .span2 {
  display: none;
}
.span2:focus ~ .span1 {
  display: block;
}

HTML

<span class="span1" tabindex="0">Span 1</span>
<span class="span2" tabindex="0">Span 2</span>
htmlcss

Answer №1

Here is the CSS code you can use:

body {
    display: block;
}
.span1:focus{
    color:gray;
}
.span2{
  color:gray;
}
.span1:focus ~ .span2 {
    display: inline-block;
    color:black;
}
.span2:focus{
    color:gray; 
}
.span2:focus ~ .span1 {
    color:black
}

Take a look at the demo on jsfiddle

Answer №2

It seems that a solution to this particular issue cannot be achieved solely through Pure CSS and HTML. Instead, the answer lies within JavaScript.

<span class="option1" tabindex="0" onclick="option1Clicked()">Option 1</span>
<span class="option2" tabindex="0" onclick="option2Clicked()">Option 2</span>

Furthermore, in the JavaScript portion:

<script>
function option1Clicked(){
    var x = document.getElementsByClassName("option2").item(0);
    x.style.visibility='hidden';
 // additional functionality

}
function option2Clicked(){
    var x = document.getElementsByClassName("option1").item(0);
    x.style.visibility='hidden';
 // additional functionality

}    
</script>

Answer №3

It's much simpler and offers greater flexibility in JavaScript. Here is an example using jQuery:

$('span').click(function() {
  $(this).css('visibility','hidden').siblings().css('visibility','visible');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="span1" tabindex="0">Span 1</span>
<span class="span2" tabindex="0">Span 2</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

React JS issue with SVG linearGradient not displaying accurate values

Within my component, I am working with SVG paths and a linearGradient value passed down from the parent component through static data. The properties 'startColor' and 'stopColor' are used to define the gradient colors for each element. ...

javascriptcssreactjssvglinear-gradients

Exploring ways to retrieve complete HTML content from a Single Page Application using AJAX?

Seeking assistance in obtaining the complete HTML generated by a Single Page Application built on AngularJS. $.get('http://localhost:3388/' + d.response.path, function (d) { $('#templateContainer').html(d); ...

javascriptjqueryhtmlangularjsajax

JQuery Confetti System

I'm currently working on a project where I want to scatter 50 randomly colored circles, resembling confetti, within a defined box. However, my current code only displays a single black circle in the top left corner of the box. "use stri ...

javascripthtml

Encountering issues with properly implementing the .replaceWith(jQuery('#content')) function in CodeIgniter

I'm having trouble with using the jQuery function .replaceWith(jQuery('#content') in Codeigniter. While I can successfully replace the "content" part of my html, the page background image is not showing up. Controller: public function inde ...

phpjqueryhtmlcodeigniter

Tips for positioning a button beside a ListItem

Is there a way to place a button next to each list item in ASP.NET? <asp:CheckBoxList ID="lstBrembo" runat="server"> <asp:ListItem Text="Popular" Value="9"></asp:ListItem> // <--- trying to add button here, but getting parse error ...

asp.nethtmlcssbuttonwebforms

Discovering hidden elements using Overflow:hidden

I need help figuring out how to display the cropped part of my text without using scroll bars in css. For example: td { overflow: hidden; } The hidden content is important, but the table property is fixed. table { table-layout: fixed; } I want the ...

css

Tips for creating a div that covers the entire screen and prevents it from resizing

I am facing an issue with a container having the className "container". When I set the height to 100vh like this: .container{ height:100vh } Whenever I resize my screen, such as with dev-tools, the div also shrinks. How can I prevent this? Is it possi ...

css

Content will not be visible within the HTML template

While attempting to incorporate an HTML template I discovered online, everything seemed to be functioning correctly except for the fact that the text was not appearing. Following a tutorial required me to use a static file to load the site. Another issue I ...

htmldjango

Modifying the color of a specific div using jQuery

I am attempting to develop a function that changes the background color of a div when a user clicks on it and then clicks on a button. The value needs to be saved as a variable, but I'm having trouble getting it to work because it keeps saying that th ...

javascriptjqueryhtml

chosen=chosen based on data from mysql database

Currently, I'm developing my own CMS that allows users to add and update their projects. While the adding function works smoothly, the updating process also functions properly. However, a problem arises when I click on a project (retrieving informatio ...

phphtmlmysql

Expanding the table area in bootstrap

I am currently working on a video slider using bootstrap. I have added a table within the slider (carousel) and it is functioning perfectly. However, I am now looking to update the layout to resemble the image below. I have successfully applied the backgro ...

htmlcsstwitter-bootstraphtml-table

Calculating available balance by subtracting the entered amount from the existing balance in Python Django

In the user profile model within my Django project, there are fields for available balance and current balance. I am looking to deduct an input amount from the current balance in order to display the updated available balance on the user's web page. ...

pythonhtmldjangodjango-models

How can you align a button in the center relative to another button positioned above it?

I am having trouble centering a button in relation to the button above it. The image shows that the lower button is not properly centered. I attempted to fix this issue by using the following CSS: .btn { padding: 16px 22px; color: #fff; border-radiu ...

htmlcss

What is the best way to extract the numerical value from a JavaScript object?

I'm currently working on a web form for a currency exchange demonstration. I have included a snippet of HTML and Javascript code that I have initially implemented. <!DOCTYPE html> <html lang="en"> <head> <meta charset="ut ...

javascripthtmlcssarraysobject

Position various images at specific coordinates on the screen using CSS

Looking for help with positioning four images on the screen using coordinates specified in the code. The top-left coordinate positioning is not displaying properly as intended. Can you assist in identifying and correcting the error? <!DOCTYPE html&g ...

htmlcssimage

Showing one column fixed to the left and the other column scrollable to the right using CSS in Bootstrap 4

I have a bootstrap row with 2 cols inside. One col needs to be sticky on the left side, while the other col on the right side should contain multiple scrollable cards with text content. https://i.sstatic.net/ysYlP.png Looking at the image provided, the " ...

htmlcsstwitter-bootstrapbootstrap-4angular-material

Two sets of scrolling bars

Having an issue with my JSFIDDLE parallax effect causing two scrollbars in the result. How can I ensure there is only one scrollbar for all my content? Here is some of the HTML code: <div id="intro"> <p>Sed uelit, sed quia...</p> </ ...

htmlcss

Customize stepper background color in Angular Material based on specific conditions

I am working on a project using Angular Material and I want to dynamically change the color of the stepper based on different states. For example: state: OK (should be green) state: REFUSED (should be red) Here is what I have done so far: <mat-horizo ...

cssangulartypescriptangular-materialangular-material-stepper

The SVG element's width is set to 100%, but it does not expand

Here is the SVG code snippet I am currently working with: <div className="behaviorPatternsItem" key={item.id}> <div className="behaviorPatternsItemStyled"> <svg height="25" width="100%" preserveAspectRatio="non ...

csssvg

Retrieve the HTML code from a webpage on a different domain

Looking to extract HTML from another domain. Attempted solution: $.get("http://website1.com", function(data) { alert("Data Loaded: " + data); }); (not working) For example, as the owner of two websites: website1.com website2.com Now, the goal is to ret ...

phpjavascriptjqueryhtmlajax