[SpookyZalost]

So for the past few days I've been tinkering with ways to make my own website more efficient, especially the tech mods section because that's going to have a lot of content and scrolling through it all to get to what you want might be a bit tedius.  Because of this I've been searching for a few days on how to create collasible boxes.  The main problem I ran into is that most sources say "use javascript, you have to use javascript, etc." However I found a source that actually gave explanations on how to use HTML and CSS only to create one.

This turned out to work really well, so well I've decided to share the details and any minor tweaks I made to make it suit better for columns and such.

now originally my CSS looked a little something like this.

Code:

<style>
* {
   box-sizing: border-box;

.textbox {
 background: rgba(0,0,0,0.7);
   border: 2px inset #54fbe5; /* Cyberpunk blue */
     border-radius: 20px;
     -moz-border-radius:20px;
         -webkit-transition-duration: 0.4s; /* Safari */
         padding:10px 10px;
}
}

that is the CSS I used to make the text boxes work and when combined with the following HTML it made the site's cool design work well without sacrificing text visibility

Code:

<div class="textbox">
   <center><h2>Header</h2></center>
   <p>Lorum Ipsum Textboxum contentium</p>
   </div>

that HTML then had to be used for each "box" that had to be entered on the site.

as you can imagine this would look rather cluttered with full size postings taking up entire sections of the page.

well... 



Having thought about it I had a tough decision to make... should I add Javascript to my site?
it's currently using no JS at all!, surprising I know right?

then I sumbled Upon this happy bit of CSS code right here.

Code:

.wrap-collabsible {
margin-bottom: 1.2rem 0;
}

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

.lbl-toggle {
display: block;

font-family: "Courier New", Courier, monospace;
font-size: 20px;
letter-spacing: 0px;
word-spacing: -5px;
font-weight: 700;
text-decoration: none solid rgb(68, 68, 68);
font-style: normal;
font-variant: normal;
text-transform: none;
  padding: 8px;
  margin: 8px;
text-align: center;

padding: 1rem;

background: rgba(0,0,0,0.7);

cursor: pointer;

  border: 2px inset #54fbe5; /* Cyberpunk blue */
    border-radius: 20px;
transition: all 0.25s ease-out;
}

.lbl-toggle:hover {
color: #54fbe5;
}

.lbl-toggle::before {
content: ' ';
display: inline-block;

border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle;
margin-right: .7rem;
transform: translateY(-2px);

transition: transform .2s ease-out;
}

.toggle:checked + .lbl-toggle::before {
transform: rotate(90deg) translateX(-3px);
}

.collapsible-content {
max-height: 0px;
overflow: hidden;
transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
max-height: 5000px;
}

.toggle:checked + .lbl-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}

.collapsible-content .content-inner {
background: rgba(250, 224, 66, .2);
border-bottom: 1px solid rgba(250, 224, 66, .45);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: .5rem 1rem;
}

now basically what that does is tells the CSS style sheet and HTML how to make a button which expands and collapses a box.

Code:

   <div class="column content">
   <div class="wrap-collabsible">
 <input id="collapsiblenumber" class="toggle" type="checkbox">
 <label for="collapsiblenumber" class="lbl-toggle">More Info</label>
 <div class="collapsible-content">
   <div class="content-inner">
     <p>
       QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with
       its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without
       plug-ins. Test-Driven Development.
     </p>
   </div>
 </div>
</div>

then the above HTML code would make that button visible on the page.

I however tweaked this a bit.

Code:

<div class="wrap-collabsible">
 <input id="collapsible1" class="toggle" type="checkbox">
 <label for="collapsible1" class="lbl-toggle">Button Label/Post title</label>
 <div class="collapsible-content">
   <div class="textbox">
<p> Insert Conent here </p>
   </div>
  </div>
</div>

the main changes I made was to make the <div class="content-inner"> into <div class="textbox"> Thus converting the button's style into the one I had been using for my textboxes.

the end result?





No Javascript required.

also a heads up you need to label each collapsible box like so 
 <input id="collapsible1" class="toggle" type="checkbox">
 <label for="collapsible1" class="lbl-toggle">Button Label/Post title</label>

 <input id="collapsible2" class="toggle" type="checkbox">
 <label for="collapsible2" class="lbl-toggle">Button Label/Post title</label>

 <input id="collapsible3" class="toggle" type="checkbox">
 <label for="collapsible3" class="lbl-toggle">Button Label/Post title</label>

otherwise you'll end up having one button open the wrong box, or all the boxes.

hope that was informative.

Zalost - Out.

[Darth-Apple]

Looks very nice @Leo. Thanks for posting!

I like the retro look of your site. It's very fitting. Definitely has your name written all over it. I like CSS solutions as well personally. Our little drop down menu at the top of the site is pretty much all CSS.

[SpookyZalost]

right? CSS is just plain awesome!

besides not having javascript means it weighs less

on the other hand... there is exactly 1 peice of JS on my site.

it's on the index/home page and it's a visitor counter.