HTML and CSS codes for your Blogger/site Part Four

Last updated Blog: 

Click the dropdown menu to go to the part of the page you need. Can't find what you're looking for? Click here to see all of the coding you can try.

Skip to the part you need:

make a collapsible HTML dropdown on FreeFlarum FOF pages

  How to make a collapsible HTML dropdown on FreeFlarum FOF pages

Dropdowns didn't seem to work on FreeFlarum's FOF pages, until I found the following from Codepen.io.

First place the following in the CSS box:

 CSS for the main interaction

*/.accordion > input[type="checkbox"] {position: absolute; left: -100vw;}

.accordion .content { overflow-y: hidden; height: 0; transition: height 0.3s ease;}

.accordion > input[type="checkbox"]:checked ~ .content { height: auto; overflow: visible;}

.accordion label {display: block;}/*Styling*/

body {font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif;

  color: #333; font-weight: 300;} .accordion { margin-bottom: 1em;}

.accordion > input[type="checkbox"]:checked ~ .content { padding: 15px;

  border: 1px solid #e8e8e8; border-top: 0;}

.accordion .handle { margin: 0; font-size: 1.125em; line-height: 1.2em;} .accordion label { color: #333; cursor: pointer;  font-weight: normal;  padding: 15px; background: #e8e8e8;} .accordion label:hover, .accordion label:focus { background: #d8d8d8;} .accordion .handle label:before { font-family: 'fontawesome'; content: "\f054"; display: inline-block; margin-right: 10px; font-size: .58em; line-height: 1.556em; vertical-align: middle;} .accordion > input[type="checkbox"]:checked ~ .handle label:before { content: "\f078";}/*  Demo purposes only */ *, *:before, *:after { box-sizing: border-box;} body {padding: 40px;} a { color: #06c;} p { margin: 0 0 1em;} h1 { margin: 0 0 1.5em; font-weight: 600; font-size: 1.5em;} .accordion { max-width: 65em;} .accordion p:last-child {  margin-bottom: 0;}

Then put this in your FOF page and don't forget to enable HTML via the button:

<section class="accordion">

  <input type="checkbox" name="collapse" id="handle1" checked="checked">

  <h2 class="handle">

  </h2>

  <div class="content">

  </div>

</section>

<section class="accordion">

  <input type="checkbox" name="collapse2" id="handle2">

  <h2 class="handle">

    <label for="handle2">My blog pages</label>

  </h2>

  <div class="content">

   YOUR HTML HERE

</div></div>

Change the numbers in bold different for each dropdown you make like all of them 2 and then next time all of them 3. Put in your HTML.

Don't forget to save your edits! 

I do hope you've found something useful on this page. Leave me a comment below if something isn't working right! Thank you.