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:

  1. 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.

  2. 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>

htmlcsstoggle

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

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 №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

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

Error: Unable to assign value to the innerHTML property of an undefined element created by JavaScript

When designing my html form, I encountered an issue where I needed to display a message beneath blank fields when users did not fill them out. Initially, I used empty spans in the html code to hold potential error messages, which worked well. However, I de ...

javascripthtml

Is it feasible to combine border-radius with a gradient border-image?

I'm trying to style an input field with a rounded border using the border-radius property, and also add a gradient to that border. Despite successfully creating both the gradient and rounded corners separately, I am unable to make them work together. ...

csslinear-gradients

Replicate the anchor's functionality (opening in a new window when 'ctl' is pressed) when submitting a form

I have a question that may seem unconventional - Is there a graceful method to replicate the functionality of an anchor tag when submitting a form? I want users to be able to hold down the control key while submitting a form and have the result open in a ...

javascripthtmlforms

When combining <a> with the class line-through, the line does not appear

I am currently utilizing a class to replace the deprecated strike in HTML: .entfall { text-decoration: line-through; } However, when using Firefox 38.x and the following code: <span class="entfall"><a href="some link">text</a></span ...

htmlcss

Updating the UI in Angular for keyboard events is not working as expected

Looking to update the page based on keyboard events. I've connected the keyboard event using $window.document.onkeydown. (I understand it's not ideal, but it should still work) However, despite changing the model, I'm not seeing any updates ...

htmlangularjskeyboard-events

The functionality of using variables in conjunction with the .insertAfter method appears to be

As a novice coder with limited English skills, I apologize in advance. Here is the CSS code snippet I am working with: #wrapper{ width: 200px; height: 300px; border: solid 1px #000; overflow: visible; white-space: nowrap; } .page{ ...

jquerycsshtmlvariablesinsertafter

Issue with JQuery event handlers becoming unresponsive upon resizing the window

JSBin link: http://jsbin.com/4QLDC/6 Here is the JS code snippet that I have written: var toggleContent = function (event) { $(event.target).siblings().toggle(); }; var showOrHidePanels = function () { var windowHeight = $(window).height(); v ...

javascriptjqueryhtmlcss

The CSS table-cell element causes adjacent table-cell content to reposition

The table inside the "center" div is causing the contents in the "left" div to be offset by a few pixels from the top (about 8 in my browser). When you add some text before the table, this offset disappears. Why is this happening? Is there a way to preven ...

htmlcsscss-tables

Removing Embedded Json Element from a Collection in AngularJS HTML

In my JSON Collection, I want to display the Email ID that is marked as IsPreffered = TRUE using AngularJS HTML without using JavaScript. This is my JSON Collection: { "user" : [ { "Name" : "B. Balamanigandan", "Email": [ ...

javascripthtmlangularjsjsonangular-filters

Obtain the location of the image source from a text file within an HTML document

I need to create a slideshow displaying a sequence of images. The path to these images will be stored in a text file. How can I read the image paths from the text file? Currently, I have hardcoded code like the example below: <div class="mySlides fade" ...

javascripthtml

Select a specific element to apply a CSS selector for a button

One of the challenges I am facing involves a webpage with multiple submit buttons. My goal is to iterate through each button and click on them one by one. While I am aware that this can be achieved using xpath like this (//button[@class='submit' ...

javahtmlcssseleniumcss-selectors

Positioning the jQuery mobile navBar to be fixed on iOS 4 devices

Currently working on a mobile app with jquery using iOS4 and iOS5 compatibility as the final hurdle. While fixing the navigation bar is simple on iOS5 with position:fixed, it's not as straightforward on iOS4! I've experimented with various soluti ...

jquerycssxcodehtmljquery-mobile

Is there a way to give a unique color to a single <a> element with a specific class, differentiating it from the

Apologies if my title is not precise enough. Describing this in just a few words for the title was a bit challenging. Context I am personalizing a template on wordpress.com. The website in question is: I have enclosed the DONATE menu item in a gold-col ...

htmlcss

Modify HTML files prior to transmission from an express server

This method comes in handy when you only have a few elements that need to be updated on your webpage, offering a seamless way to refresh the content without the need for additional HTTP requests or frontend manipulation. ...

htmlnode.jsexpress

Struggling with smoothly transitioning an image into view using CSS and JavaScript

I'm currently experimenting with creating a cool effect on my website where an image fades in and moves up as the user scrolls it into view. I've included the code I have so far below, but unfortunately, I keep getting a 404 error when trying to ...

javascripthtmlcssgetboundingclientrect

Is your Scrollmagic failing to function once your website is uploaded to the server?

My website incorporates Scrollmagic to dynamically load sections (changing opacity and adding movement) as users scroll through it. Everything functions perfectly fine when I preview the HTML file on my computer, but once I uploaded it to my hosting serv ...

javascripthtmlcssscrollmagic

Can an HTML DOM object be converted to a JSON string using JSON.stringify in JavaScript?

Trying to fetch an external HTML file and convert its body content into a string has been giving me unexpected results. Is there a way to achieve this successfully? var xhr = new XMLHttpRequest(); function loadFile(){ xhr.open("GET", 'index.html ...

javascripthtmljsonxmlhttprequeststringify

Adjusting the sidebarPanel height to match the mainPanel content in a shiny app

I'm currently developing an app that features a scrollable sidebarPanel alongside a mainPanel that can have varying heights, such as: library(shiny) ui <- fluidPage( headerPanel('Iris k-means clustering'), sidebarPanel(style = " ...

cssrshiny

CSS: The Ultimate Guide to Concealing the Second Row in a Table

I have a single table in my code: <table> <tr><td>sample data 1</td></tr> <tr><td>sample data 2</td></tr> <tr><td>sample data 3</td></tr> <tr><td>sample data 4</t ...

htmlcss

When hovering over one item, it causes a hover effect on an item in a SEPARATE container

My goal is to create a unique interaction between links and images, where hovering over a link will transform the corresponding image below it, and vice versa. I have been searching for solutions but have only found methods that work when all items are wit ...

htmlcss