[Tutorial] Collapsible boxes using only CSS and HTML - Printable Version +- Makestation (https://makestation.net) +-- Forum: Technical Arts (https://makestation.net/forumdisplay.php?fid=45) +--- Forum: Web Design & Internet (https://makestation.net/forumdisplay.php?fid=62) +---- Forum: Resources & Tutorials (https://makestation.net/forumdisplay.php?fid=56) +---- Thread: [Tutorial] Collapsible boxes using only CSS and HTML (/showthread.php?tid=2150) |
Collapsible boxes using only CSS and HTML - SpookyZalost - October 4th, 2018 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> 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"> 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 { 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"> then the above HTML code would make that button visible on the page. I however tweaked this a bit. Code: <div class="wrap-collabsible"> 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. RE: Collapsible boxes using only CSS and HTML - Darth-Apple - October 5th, 2018 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. RE: Collapsible boxes using only CSS and HTML - SpookyZalost - October 5th, 2018 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. |