How to add a "Close" button into a pure CSS sliding down feature?-CodePudding

I am very interested to apply interesting code to build my website but I am still trying to understand the logic of HTML/CSS.

Basically, I am now trying to edit based on this demo and wish to turn "Click me" becomes to a button with "Close" features, but I failed.

I had found a similar demo but still can't merge them together. What should I do or could anyone give some suggestions? Thank you so much!

 input {
    display: none;
  }

  label {
    margin: 0rem 0rem;
    /*spacing between button and divider*/
    cursor: pointer;
    display: inline-block;
    padding: 0.5rem 1rem 0.5rem 0rem;
    color: rgba(0, 0, 0, 1);
    background: rgba(255, 255, 255, 1);
    -webkit-transition: background-color 0.2s, color 0.2s;
    width: 100%;
  }

  label:hover {
    color: rgba(0, 0, 0, 0.3);
  }

  .hiddentext {
    -webkit-transition: height .3s ease;
    height: 0px;
    overflow: hidden;
    width: 100%;
    background: rgba(255, 255, 0, 1);
  }

  input:checked .hiddentext {
    height: 800px;
    max-height: 85vh;
  }

  input:checked .hiddentext {
    height: 800px;
    max-height: 200px;
  }

  #check {
    position: absolute;
    appearance: none;
    cursor: pointer;
  }

  #check label {
    position: absolute;
    cursor: pointer;
    background: #ff00ff;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    transition: all 500ms ease;
  }

  #check label:after {
    content: "Open"
  }

  #check:checked label {
    background: #00ff00;
  }

  #check:checked label:after {
    content: "Close"
  }

<h2>Title</h2>
<hr>
<div>
  <label for="check">More</label>
  <hr>
  <input name="check" id="check" type="checkbox">
  <div >
Hidden message
  </div>
</div>

CodePudding user response：

You need to move the <input> further up since your CSS is using the " " selector.

You may also use ~ instead of .

A possible solution would be like this:

<h2>Title</h2>
<hr>
<div>
  <input name="check" id="check" type="checkbox">
  <label for="check"></label>
  <hr>
  <div >
Hidden message
  </div>
</div>

 input {
    display: none;
  }

  label {
    margin: 0rem 0rem;
    /*spacing between button and divider*/
    cursor: pointer;
    display: inline-block;
    padding: 0.5rem 1rem 0.5rem 0rem;
    color: rgba(0, 0, 0, 1);
    background: rgba(255, 255, 255, 1);
    -webkit-transition: background-color 0.2s, color 0.2s;
    width: 100%;
  }

  label:hover {
    color: rgba(0, 0, 0, 0.3);
  }

  .hiddentext {
    -webkit-transition: height .3s ease;
    height: 0px;
    overflow: hidden;
    width: 100%;
    background: rgba(255, 255, 0, 1);
    margin-top: 10px;
  }

  input:checked ~ .hiddentext {
    height: 800px;
    max-height: 200px;
  }

  #check {
    position: absolute;
    appearance: none;
    cursor: pointer;
  }

  #check   label {
    position: absolute;
    cursor: pointer;
    background: #ff00ff;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    transition: all 500ms ease;
  }

  #check   label:after {
    content: "Open"
  }

  #check:checked   label {
    background: #00ff00;
  }

  #check:checked label:after {
    content: "Close"
  }