CSS collapse/expand

Question

I have a pure CSS CSS Expand/Collapse div which is based on someone else's code @ here by default hidden text is collapsable but it would be better if the text expands after the click.

Anyone have suggestions on how to edit this code so that text is minimize before the click is minimized? It would be better if javascript is avoided and Wordpress compactible.

    <main>
  <h2>CSS Expand/Collapse Section</h2>
  <input id="toggle" type="checkbox" checked>
  <label for="toggle">Hidden Kitten</label>
  <div id="expand">
    <section>
      <p>mew</p>
    </section>
  </div>
  <section>
    <h3>Other content</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta non turpis faucibus lobortis. Curabitur non eros rutrum, gravida felis non, luctus velit. Ut commodo congue velit feugiat lobortis. Etiam nec dolor quis nulla bibendum blandit vitae nec enim. Maecenas id dignissim erat. Aenean ac mi nec ante venenatis interdum quis vel lacus.
    </p>
    <p>Aliquam ligula est, aliquet et semper vitae, elementum eget dolor. In ut dui id leo tristique iaculis eget a dui. Vestibulum cursus, dolor sit amet lacinia feugiat, turpis odio auctor nisi, quis pretium dui elit at est. Pellentesque lacus risus, vulputate sed gravida eleifend, accumsan ac ante. Donec accumsan, augue eu congue condimentum, erat magna luctus diam, adipiscing bibendum sem sem non elit.</p>
  </section>
</main>

CSS

       @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
  font-family: "Open Sans", Arial;
  background: #CCC;
}
main {
  background: #EEE;
  width: 600px;
  margin: 20px auto;
  padding: 10px 0;
  box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
h2 {
  text-align: center;
}
p {
  font-size: 13px;
}
input {
  display: none;
  visibility: hidden;
}
label {
  display: block;
  padding: 0.5em;
  text-align: center;
  border-bottom: 1px solid #CCC;
  color: #666;
}
label:hover {
  color: #000;
}
label::before {
  font-family: Consolas, monaco, monospace;
  font-weight: bold;
  font-size: 15px;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
#expand {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  background: url(http://placekitten.com/g/600/300);
  color: #FFF;
}
section {
  padding: 0 20px;
}
#toggle:checked ~ #expand {
  height: 250px;
}
#toggle:checked ~ label::before {
  content: "-";
}

Answer 1

I think you are looking to have the image start collapsed.

All you need to do is remove the checked attribute from the input checkbox to achieve this.

Change:

<input id="toggle" type="checkbox" checked>

To:

<input id="toggle" type="checkbox">

Here is you code in a runable snippet:

body {
  font-family: "Open Sans", Arial;
  background: #CCC;
}

main {
  background: #EEE;
  width: 600px;
  margin: 20px auto;
  padding: 10px 0;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

h2 {
  text-align: center;
}

p {
  font-size: 13px;
}

input {
  display: none;
  visibility: hidden;
}

label {
  display: block;
  padding: 0.5em;
  text-align: center;
  border-bottom: 1px solid #CCC;
  color: #666;
}

label:hover {
  color: #000;
}

label::before {
  font-family: Consolas, monaco, monospace;
  font-weight: bold;
  font-size: 15px;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}

#expand {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  background: url(http://placekitten.com/g/600/300);
  color: #FFF;
}

section {
  padding: 0 20px;
}

#toggle:checked~#expand {
  height: 250px;
}

#toggle:checked~label::before {
  content: "-";
}

<main>
  <h2>CSS Expand/Collapse Section</h2>
  <input id="toggle" type="checkbox">
  <label for="toggle">Hidden Kitten</label>
  <div id="expand">
    <section>
      <p>mew</p>
    </section>
  </div>
  <section>
    <h3>Other content</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta non turpis faucibus lobortis. Curabitur non eros rutrum, gravida felis non, luctus velit. Ut commodo congue velit feugiat lobortis. Etiam nec dolor quis nulla bibendum blandit
      vitae nec enim. Maecenas id dignissim erat. Aenean ac mi nec ante venenatis interdum quis vel lacus.
    </p>
    <p>Aliquam ligula est, aliquet et semper vitae, elementum eget dolor. In ut dui id leo tristique iaculis eget a dui. Vestibulum cursus, dolor sit amet lacinia feugiat, turpis odio auctor nisi, quis pretium dui elit at est. Pellentesque lacus risus, vulputate
      sed gravida eleifend, accumsan ac ante. Donec accumsan, augue eu congue condimentum, erat magna luctus diam, adipiscing bibendum sem sem non elit.</p>
  </section>
</main>