Can I have an onclick event by using CSS selector?

Question

I need the code to work as an onclick event that should open the textEditor kind of like the JS button. Is it possible to do so? :target is not getting the work done.

<!DOCTYPE html>
<html>
<body>
<style>

#textEditor {
    display: none;
}

#textEditor:target {
    border: 1px dashed black;  
    width: 1350px; 
    height: 600px;
    display: block;
}
</style>   

<a href= "#textEditor">Add Notes</a>
<div id= "textEditor" contenteditable="true"></div>

</body>
</html>

#textEditor {
  display: none;
}

#textEditor:target {
  border: 1px dashed black;
  width: 1350px;
  height: 600px;
  display: block;
}

<a href="#textEditor">Add Notes</a>
<div id="textEditor" contenteditable="true"></div>

What is `:target` not doing that you specifically want it to do, it seems to work in the Snippet I edited in to your question? — David Thomas, May 13 '21 at 15:40
Sorry for my mistake. My question seems to be misinterpreting. I wanted to ask how do I reverse the action. — newBit, May 13 '21 at 15:48
So you want an option to close the `
` once it's already been opened? — David Thomas, May 13 '21 at 15:49
Yes exactly. Since I'm new to coding I'm having problems here and there. — newBit, May 13 '21 at 15:55

score 0 · Answer 1 · answered May 13 '21 at 15:56

Before showing you how I would do it, I'd really recommend some JavaScript. That said, it is a fun challenge with only CSS and one I would do with a checkbox, as that naturally handles the toggle-able state.

#textEditor {
  display: none;
}

#notes:checked ~ #textEditor{
  border: 1px dashed black;
  width: 1350px;
  height: 600px;
  display: block;
}

#notes:checked + label .add{
  display: none;
}
#notes:checked + label .show{
  display: inline;
}
.show{
  display: none;
}

<input type="checkbox" id="notes" />
<label for="notes">
  <span class="add">Add</span>
  <span class="show">Hide</span> Notes
</label>
<div id="textEditor" contenteditable="true"></div>

Its worth noting, in reality I would do something like

input[type="checkbox"]{ display: none; }

but I wanted you to see how it worked.

~ is the sibling selector, and selects any elements next to the previous selector

+ is the adjacent sibling selector, and selects items directly next to another.

:checked allows you to style a checkbox which is checked

David Thomas · Answer 2 · 2021-05-13T16:07:33.717

Given that your intent is to create a CSS-only toggle there are a couple of options available to you; one is to use a checkbox <input>, and the other is to use another a second <a> element.

First, the <input> approach:

#textEditor_toggle~#textEditor {
  display: none;
}

#textEditor_toggle:checked~#textEditor {
  border: 1px dashed black;
  width: 50vw;
  height: 50vh;
  display: block;
  margin: 1em auto;
}

#textEditor_toggle {
  display: none;
}

#textEditor_toggle+label::before {
  content: 'Open';
}

#textEditor_toggle:checked+label::before {
  content: 'Close';
}

<input type="checkbox" id="textEditor_toggle"><label for="textEditor_toggle"> Editor</label>
<div id="textEditor" contenteditable="true" autofocus></div>

Secondly, with a second link:

#textEditor {
  display: none;
}

#textEditor:target {
  border: 1px dashed black;
  width: 50vw;
  height: 50vh;
  display: block;
  grid-area: editor;
}

div {
  display: grid;
  grid-template-areas: "toggle" " editor";
}

a.open {
  grid-area: toggle;
}

#textEditor:target+a.open {
  display: none;
}

a.close {
  display: none;
  grid-area: toggle;
}

#textEditor:target~a.close {
  display: block;
}

<div>
  <div id="textEditor" contenteditable="true"></div>
  <a href="#textEditor" class="open">Add Notes</a>
  <a href="#" class="close">Close Notes</a>
</div>

Can I have an onclick event by using CSS selector?

2 Answers2