Activate a CSS button upon clicking and update the content within the div

Question

Activate a CSS button upon clicking and update the content within the div

In order to achieve the desired result of having menu CSS buttons change the content of a div when clicked, I have managed to do that successfully. However, a problem arises when clicking on the 2nd or 3rd button/link - it changes the div content, but as soon as you click anywhere else on the page, it reverts back to its default content. The goal is to keep both the button/link and the div content active even when clicking anywhere on the page, all using Pure CSS without any additional coding expertise. Can anyone assist in solving this issue?

Sample HTML Code:

<div id="mynavtabcontent">

<a id="video" tabindex="1">Video</a>
<a id="apps" tabindex="2">Apps</a>
<a id="music" tabindex="3">Music</a>

<div id="content">
<div id="def">Video Content here</div>
<div id="videocontent">Video Content here</div>
<div id="appscontent">Apps Content here</div>
<div id="musiccontent">Music Content here</div>
</div>
</div>

Sample CSS code:

The #def id represents the default content, while #videocontent mirrors the default for viewing the video div content again.

#mynavtabcontent{
font-family: Verdana;
font-size: 18px;
}
#mynavtabcontent a{
text-decoration: none;
padding: 7 7 7 7px;
background-color: yellow;
color: #222;
}
#mynavtabcontent a:hover{
background-color: #333;
color: white;
cursor: pointer;
}
#content{
border:1px dashed black;
background-color: pink;
height: 400px;
width: 200px;
margin-top: 50px;
}
#videocontent, #appscontent, #musiccontent{
display: none;
}
#video1:focus~#content div:nth-child(1),
#video:focus~#content div:nth-child(2),
#apps:focus~#content div:nth-child(3),
#music:focus~#content div:nth-child(4){
display: block;

}
#video1:focus~#content #def,
#video:focus~#content #def,
#apps:focus~#content #def,
#music:focus~#content #def{
display:none;
}

Test Result:

Run code snippet, click on the 2nd or 3rd button, then click anywhere within the content area to observe the behavior described.

#mynavtabcontent{
font-family: Verdana;
font-size: 18px;
}
#mynavtabcontent a{
text-decoration: none;
padding: 7 7 7 7px;
background-color: yellow;
color: #222;
}
#mynavtabcontent a:hover{
background-color: #333;
color: white;
cursor: pointer;
}
#content{
border:1px dashed black;
background-color: pink;
height: 400px;
width: 200px;
margin-top: 50px;
}
#videocontent, #appscontent, #musiccontent{
display: none;
}
#video1:focus~#content div:nth-child(1),
#video:focus~#content div:nth-child(2),
#apps:focus~#content div:nth-child(3),
#music:focus~#content div:nth-child(4){
display: block;

}
#video1:focus~#content #def,
#video:focus~#content #def,
#apps:focus~#content #def,
#music:focus~#content #def{
display:none;
}

<div id="mynavtabcontent">

<a id="video" tabindex="1">Video</a>
<a id="apps" tabindex="2">Apps</a>
<a id="music" tabindex="3">Music</a>

<div id="content">
<div id="def">Video Content here</div>
<div id="videocontent">Video Content here</div>
<div id="appscontent">Apps Content here</div>
<div id="musiccontent">Music Content here</div>
</div>
</div>

If a pure CSS solution is not possible, kindly provide a JavaScript code that could fix this issue. Your help would be greatly appreciated. Thank you! -edited.

html css

Answer 1

Answer №1

The links lose focus once you click away. To maintain state, consider using the :checked pseudo element. You can hide inputs and manage their states with labels. Check out the modified code below:

<div id="mynavtabcontent">

  <input type="radio" name="content-toggle" id="video"> <label for="video" tabindex="1">Video</label>
  <input type="radio" name="content-toggle" id="apps"> <label for="apps" tabindex="2">Apps</label>
  <input type="radio" name="content-toggle" id="music"> <label for="music" tabindex="3">Music</label>

  <div id="content">
    <div id="def">Video Content here</div>
    <div id="videocontent">Video Content here</div>
    <div id="appscontent">Apps Content here</div>
    <div id="musiccontent">Music Content here</div>
  </div>

</div>

Here is the accompanying CSS:

#mynavtabcontent input {
  display: none;
}

#mynavtabcontent{
  font-family: Verdana;
  font-size: 18px;
}
#mynavtabcontent label{
  text-decoration: none;
  padding: 7 7 7 7px;
  background-color: yellow;
  color: #222;
}
#mynavtabcontent label:hover{
  background-color: #333;
  color: white;
  cursor: pointer;
}
#content{
  border:1px dashed black;
  background-color: pink;
  height: 400px;
  width: 200px;
  margin-top: 50px;
}
#videocontent, #appscontent, #musiccontent{
  display: none;
}
#video1:checked~#content div:nth-child(1),
#video:checked~#content div:nth-child(2),
#apps:checked~#content div:nth-child(3),
#music:checked~#content div:nth-child(4){
  display: block;

}
#video1:checked~#content #def,
#video:checked~#content #def,
#apps:checked~#content #def,
#music:checked~#content #def{
  display:none;
}

Link to view the code in action: http://codepen.io/MakiBM/pen/KgXzma

Answer 2

The links lose focus once you click away. To maintain state, consider using the :checked pseudo element. You can hide inputs and manage their states with labels. Check out the modified code below:

<div id="mynavtabcontent">

  <input type="radio" name="content-toggle" id="video"> <label for="video" tabindex="1">Video</label>
  <input type="radio" name="content-toggle" id="apps"> <label for="apps" tabindex="2">Apps</label>
  <input type="radio" name="content-toggle" id="music"> <label for="music" tabindex="3">Music</label>

  <div id="content">
    <div id="def">Video Content here</div>
    <div id="videocontent">Video Content here</div>
    <div id="appscontent">Apps Content here</div>
    <div id="musiccontent">Music Content here</div>
  </div>

</div>

Here is the accompanying CSS:

#mynavtabcontent input {
  display: none;
}

#mynavtabcontent{
  font-family: Verdana;
  font-size: 18px;
}
#mynavtabcontent label{
  text-decoration: none;
  padding: 7 7 7 7px;
  background-color: yellow;
  color: #222;
}
#mynavtabcontent label:hover{
  background-color: #333;
  color: white;
  cursor: pointer;
}
#content{
  border:1px dashed black;
  background-color: pink;
  height: 400px;
  width: 200px;
  margin-top: 50px;
}
#videocontent, #appscontent, #musiccontent{
  display: none;
}
#video1:checked~#content div:nth-child(1),
#video:checked~#content div:nth-child(2),
#apps:checked~#content div:nth-child(3),
#music:checked~#content div:nth-child(4){
  display: block;

}
#video1:checked~#content #def,
#video:checked~#content #def,
#apps:checked~#content #def,
#music:checked~#content #def{
  display:none;
}

Link to view the code in action: http://codepen.io/MakiBM/pen/KgXzma

Answer 3

Answer №2

When it comes to CSS, its main focus is on styling rather than actions.

If you want to incorporate actions into your website, JavaScript will be necessary.

JavaScript works with the Document Object Model (DOM) to implement changes in the browser.

Although CSS primarily handles styling, it does offer some control over animations through properties like transition, transform, :hover, :active, :focus, and @keyframes.

Answer 4

When it comes to CSS, its main focus is on styling rather than actions.

If you want to incorporate actions into your website, JavaScript will be necessary.

JavaScript works with the Document Object Model (DOM) to implement changes in the browser.

Although CSS primarily handles styling, it does offer some control over animations through properties like transition, transform, :hover, :active, :focus, and @keyframes.

Activate a CSS button upon clicking and update the content within the div

Sample HTML Code:

Sample CSS code:

Test Result:

Answer №1

Answer №2

Similar questions

The Font Awesome icons do not display offline

Oops! Looks like the module "@google-cloud/vision" hasn't been loaded in this context yet. Make sure to use require([]) to load it before proceeding

Errors persist with PHP form submission despite all fields being filled out

The Vue Swiper does not support inline containers in my code

What symbol represents the share function in Unicode?

Creating tailored output data from a single table

A step-by-step guide on utilizing jQuery to cyclically change the background color of elements upon clicking, and resetting the colors upon clicking another element

Discovering the process of extracting a date from the Date Picker component and displaying it in a table using Material-UI in ReactJS

The Div elements are not displaying properly in the correct size on the responsive webpage

Collapse the accordion item when a different one is selected

Can React components receive props or data when they are inserted into regular HTML code?

Lacking HTML5 support, your current location cannot be accessed on Google Maps

Trouble with the query waypoints extension in a simple demonstration

How can the values be preserved with two action forms and two submit buttons?

Is there a way to simplify this "stopwatch" even more?

Changing the image source using Javascript and extracting part of the URL

Responsive columns and fluid Flex row implemented in Bootstrap 4

What measures can be taken to restrict users from inputting decimal values?

Navigating through Ruby on Rails' index routes

Using the video-js feature to play multiple videos simultaneously