A guide on activating Effect in Div using just css

Question

A guide on activating Effect in Div using just css

I have tried all the questions and answers related to this topic. Additionally, I attempted to solve related questions but was not successful. Please read my question thoroughly.

What I Want:

When I click on the click me Div, the second hiddendiv Div is displayed. However, I want it so that when I click again on the click me Div, the hiddendiv Div is hidden. I am looking for a similar toggle event using only CSS.
Similarly, when I click on the click me Div, the second hiddendiv Div is displayed. But if I click on any other area, I want the hiddendiv Div not to be hidden. I need a solution using only CSS.

Please provide solutions using only pure CSS and CSS3 without JavaScript, jQuery, or any other form of control.

The Code:

.clicker {
  width: 100px;
  height: 100px;
  background-color: blue;
  outline: none;
  cursor: pointer;
  color:#FFF;
}

.hiddendiv {
  display: none;
  height: 200px;
  background-color: green;
}

.clicker:focus+.hiddendiv {
  display: block;
}

<div>
  <div class="clicker" tabindex="1">Click me</div>
  <div class="hiddendiv"></div>
</div>

html css toggle

Answer 1

Answer №1

Unfortunately, it's not feasible to achieve this with the current specifications that mandate all elements to be div.

If you were to switch the div's acting as links to anchor tags a, and utilize the :target pseudo-class, then it would become attainable.

You can configure the anchor tag a by applying display: inline-block so that you can manipulate its dimensions just like a div.

.clicker {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: blue;
  color:#FFF;
}
.clicker.hidden {
  display: none;
}
.hiddendiv {
  height: 0px;
  background-color: green;
  overflow: hidden;
  transition: height 0.5s;
}
.hiddendiv.nr2 {
  background-color: red;
}

#showdiv1:target ~ div a[href="#showdiv1"],
#showdiv2:target ~ div a[href="#showdiv2"] {
  display: none;
}
#showdiv1:target ~ div a[href="#hidediv1"],
#showdiv2:target ~ div a[href="#hidediv2"] {
  display: inline-block;
}
#showdiv1:target ~ div .hiddendiv.nr1,
#showdiv2:target ~ div .hiddendiv.nr2 {
  height: 130px;
}

<div id="showdiv1"></div>
<div id="showdiv2"></div>

<div>
  <a href="#showdiv1" class="clicker" tabindex="1">Click me 1</a>
  <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a>

  <a href="#showdiv2" class="clicker" tabindex="2">Click me 2</a>
  <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a>

  <div class="hiddendiv nr1"></div>
  <div class="hiddendiv nr2"></div>
</div>

Answer 2

Unfortunately, it's not feasible to achieve this with the current specifications that mandate all elements to be div.

If you were to switch the div's acting as links to anchor tags a, and utilize the :target pseudo-class, then it would become attainable.

You can configure the anchor tag a by applying display: inline-block so that you can manipulate its dimensions just like a div.

.clicker {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: blue;
  color:#FFF;
}
.clicker.hidden {
  display: none;
}
.hiddendiv {
  height: 0px;
  background-color: green;
  overflow: hidden;
  transition: height 0.5s;
}
.hiddendiv.nr2 {
  background-color: red;
}

#showdiv1:target ~ div a[href="#showdiv1"],
#showdiv2:target ~ div a[href="#showdiv2"] {
  display: none;
}
#showdiv1:target ~ div a[href="#hidediv1"],
#showdiv2:target ~ div a[href="#hidediv2"] {
  display: inline-block;
}
#showdiv1:target ~ div .hiddendiv.nr1,
#showdiv2:target ~ div .hiddendiv.nr2 {
  height: 130px;
}

<div id="showdiv1"></div>
<div id="showdiv2"></div>

<div>
  <a href="#showdiv1" class="clicker" tabindex="1">Click me 1</a>
  <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a>

  <a href="#showdiv2" class="clicker" tabindex="2">Click me 2</a>
  <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a>

  <div class="hiddendiv nr1"></div>
  <div class="hiddendiv nr2"></div>
</div>

Answer 3

Answer №2

An innovative way to toggle the visibility of a checkbox input is by using CSS and some simple JavaScript.

Check out this example below:

.clicker {
  width: 100px;
  height: 100px;
  background-color: blue;
  outline: none;
  cursor: pointer;
  color:#FFF;
  display:block;
}

.hiddendiv {
  display: none;
  height: 200px;
  background-color: green;
}

.clicker:focus+.hiddendiv {
  display: block;
}
.hidden{
  margin-left:-99999px;
}
input#cmn-toggle-7:checked + label + div{
 display:block;
}

<div>
  <input id="cmn-toggle-7" class="hidden" type="checkbox" >
  <label for="cmn-toggle-7" class="clicker" tabindex="1">Click me</label>
  <div class="hiddendiv"></div>
</div>

Answer 4

An innovative way to toggle the visibility of a checkbox input is by using CSS and some simple JavaScript.

Check out this example below:

.clicker {
  width: 100px;
  height: 100px;
  background-color: blue;
  outline: none;
  cursor: pointer;
  color:#FFF;
  display:block;
}

.hiddendiv {
  display: none;
  height: 200px;
  background-color: green;
}

.clicker:focus+.hiddendiv {
  display: block;
}
.hidden{
  margin-left:-99999px;
}
input#cmn-toggle-7:checked + label + div{
 display:block;
}

<div>
  <input id="cmn-toggle-7" class="hidden" type="checkbox" >
  <label for="cmn-toggle-7" class="clicker" tabindex="1">Click me</label>
  <div class="hiddendiv"></div>
</div>

Answer 5

Answer №3

To achieve this effect, utilize a checkbox along with some CSS manipulation.

div input {
  margin-right: 100px;
}

.check-btn label {
  display: inline-block;
}

.check-btn input {
  display: none;
}

.clicker {
  background: green;
  padding: 5px 10px;
}

.hiddendiv {
  background: #000;
  width: 100px;
  height: 100px;
  display: none;
}

.check-btn input:checked ~ .hiddendiv {
  display: block;
}

<div class="check-btn">

    <input id="myid" type="checkbox" >
    <label for="myid" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>

Check out the demo on jsFiddle

Answer 6

To achieve this effect, utilize a checkbox along with some CSS manipulation.

div input {
  margin-right: 100px;
}

.check-btn label {
  display: inline-block;
}

.check-btn input {
  display: none;
}

.clicker {
  background: green;
  padding: 5px 10px;
}

.hiddendiv {
  background: #000;
  width: 100px;
  height: 100px;
  display: none;
}

.check-btn input:checked ~ .hiddendiv {
  display: block;
}

<div class="check-btn">

    <input id="myid" type="checkbox" >
    <label for="myid" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>

Check out the demo on jsFiddle

A guide on activating Effect in Div using just css

Answer №1

Answer №2

Answer №3

Similar questions

Encountered a SyntaxError stating 'Unable to use import statement outside a module' while attempting to utilize three.js

What is the method to alter the fill of a circle using CSS when it is hovered over in JavaFX?

Styling <Link> component with styled-components: A step-by-step guide

The issue of why padding left is not functioning correctly in Bootstrap version 5.3.1

Guide for deactivating .accordion-item within a Bootstrap 5 Accordion

Why are the items I have inserted inside my <div> tag not appearing on the screen?

What is the process for uploading the product information to the database during checkout?

Showcasing MySQL Data With Divs

Arrange the footer content into multiple columns

What is the method for showcasing an h1 heading and an unordered list link side by

Is there a method to consistently keep the horizontal scrollbar in view for the MUI Data Grid at all times?

The CSS isn't functioning correctly in the HTML file as it is in the CSS file

The HTML video controls in Safari take precedence over the window.name attribute

What steps can I take to stop my Details element from moving a nearby Div?

The functionality of CSS isn't up to snuff on Mozilla Firefox

I'm seeking answers on selenium and the proper use of CSS selectors, as well as troubleshooting the error message 'selenium.common.exceptions.ElementClickInterceptedException'

Getting the input tag id of an HTML form can be achieved by using the "id

Struggling to properly line up the baselines of navigation list items that are styled as circular elements using CSS

The importance of CSS styling links: the difference between a:link, a:visited and simply using a

Preventing the automatic selection of the initial item in a PrimeNG dropdown menu