Fix CSS + HTML only Accordion to eliminate unncessary white space?

Question

I was looking for Accordion to present this data with collapsibles on Web Browser.

I chanced upon this one.

Original Code Pen: https://codepen.io/abergin/pen/ihlDf
(Has some documentation & insights)

I downloaded this CP as a ZIP which had an HTML, CSS and SASS file.

I modified it offline to eliminate the column maximum width limitations and be able to show as many as possible on Desktop Browser. Put in a lot of smaller Values for fonts, padding & margins etc.

So as to make it simpler/ easier for folks here, I am forking the original Code Pen with my data.

Modification Code Pen: https://codepen.io/xml/pen/JrqKWQ?editors=0100

I have not been able to resolve or figure out is this.

All the collapsibles like "Utilities" show a huge empty space below. I'm not sure how to eliminate it taking up that space.

It happens for every <h2> (Folder Names) that contain a lot of <p> (Apps).

How can I fix the CSS or code so as to eliminate the empty space and ensure space is only taken when the collapse is expanded below?

Not sure what part of CSS / SASS code from the Code Pen is doing this and how to fix it. My goal is to maximize data visibility on screen.

$white: rgba(254,255,250,1)
$grey: rgba(220,231,235,1)
$red: rgba(255,104,115,1)
$black: rgba(48,69,92,0.8)
$sans: 'Titillium Web', sans-serif
  
.transition
  transition: all 0.25s ease-in-out

.flipIn
  animation: flipdown 0.5s ease both
    
.no-select
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

html
  width: 100%
  height: 100%
  perspective: 900
  overflow-y: scroll
  background-color: $grey
  font-family: $sans
  color: $black
  
body
  min-height: 0
  display: inline-block
  position: relative
  left: 50%
  margin: 90px 0
  transform: translate( -50% , 0 )
  box-shadow: 0 10px 0 0 $red inset
  background-color: $white
  max-width: 450px
  padding: 30px
  
  @media ( max-width:550px )
    box-sizing: border-box
    transform: translate( 0 , 0 )
    max-width: 100%
    min-height: 100%
    margin: 0
    left: 0

h1 , h2
  color: $red

h1
  text-transform: uppercase
  font-size: 36px
  line-height: 42px
  letter-spacing: 3px
  font-weight: 100
  @extend .flipIn
  
h2
  font-size: 26px
  line-height: 34px
  font-weight: 300
  letter-spacing: 1px
  display: block
  background-color: $white
  margin: 0
  cursor: pointer
  @extend .no-select

p
  color: $black
  font-size: 17px
  line-height: 26px
  letter-spacing: 1px
  position: relative
  overflow: hidden
  max-height: 800px
  @extend .transition
  opacity: 1
  transform: translate( 0 , 0 )  
  margin-top: 14px
  z-index: 2
  
ul
  list-style: none
  perspective: 900
  padding: 0
  margin: 0
  
  li
    position: relative
    padding: 0
    margin: 0
    padding-bottom: 4px
    padding-top: 18px
    border-top: 1px dotted $grey
    @extend .flipIn
      
    &:nth-of-type(1)
      animation-delay: 0.5s
    
    &:nth-of-type(2)
      animation-delay: 0.75s
        
    &:nth-of-type(3)
      animation-delay: 1.0s
    
    &:last-of-type
      padding-bottom: 0
      
    i
      position: absolute
      transform: translate( -6px , 0 )
      margin-top: 16px
      right: 0
      
      &:before , &:after
        content: ""
        @extend .transition
        position: absolute
        background-color: $red
        width: 3px
        height: 9px
        
      &:before
        transform: translate( -2px , 0 ) rotate( 45deg )
          
      &:after
        transform: translate( 2px , 0 ) rotate( -45deg )
    
    input[type=checkbox]
      position: absolute
      cursor: pointer
      width: 100%
      height: 100%
      z-index: 1
      opacity: 0
      
      &:checked
        &~p
          margin-top: 0
          max-height: 0
          opacity: 0
          transform: translate( 0 , 50% )
            
        &~i
          &:before
            transform: translate( 2px , 0 ) rotate( 45deg )
          
          &:after
            transform: translate( -2px , 0 ) rotate( -45deg )

@keyframes flipdown
  0%
    opacity: 0
    transform-origin: top center
    transform: rotateX(-90deg)
  5%
    opacity: 1
  80%
    transform: rotateX(8deg)
  83%
    transform: rotateX(6deg)
  92%
    transform: rotateX(-3deg)
  100%
    transform-origin: top center
    transform: rotateX(0deg)

<h1>CSS + HTML only Accordion Element</h1>
  <ul>
   <h2>Pg: </h2>
   <li><input type="checkbox" checked><i></i><h2>Folder 1</h2>
    <p>Apps 1</p>
   </li>
   <li><input type="checkbox" checked><i></i><h2>Folder 2</h2>
    <p>Apps 1</p>
   </li>
   <li><input type="checkbox" checked><i></i><h2>Folder 3</h2>
    <p>Apps 3</p>
   </li>
   <p>App: <span style="color:#0000ff">com.apple.mobilephone</span></p>
   <p>App: <span style="color:#0000ff">com.apple.mobilecal</span></p>
   <p>App: <span style="color:#0000ff">com.apple.mobileslideshow</span></p>
   <p>App: <span style="color:#0000ff">com.apple.camera</span></p>
   <p>App: <span style="color:#0000ff">com.apple.videos</span></p>
   <p>App: <span style="color:#0000ff">com.apple.youtube</span></p>
   <p>App: <span style="color:#0000ff">com.apple.Maps</span></p>
   <p>App: <span style="color:#0000ff">com.apple.weather</span></p>
   <p>App: <span style="color:#0000ff">com.apple.mobilenotes</span></p>
   <p>App: <span style="color:#0000ff">com.apple.reminders</span></p>
   <p>App: <span style="color:#0000ff">com.apple.mobiletimer</span></p>
   <p>App: <span style="color:#0000ff">com.apple.gamecenter</span></p>
   <li><input type="checkbox" checked><i></i><h2>Apple</h2>
    <p>Apps 1</p>
    <p>App: <span style="color:#0000ff">com.apple.mobileme.fmf1</span></p>
    <p>App: <span style="color:#0000ff">com.apple.Cards</span></p>
    <p>App: <span style="color:#0000ff">com.apple.iBooks</span></p>
   </li>
   <p>App: <span style="color:#0000ff">com.apple.MobileStore</span></p>
   <p>App: <span style="color:#0000ff">com.apple.AppStore</span></p>
   <p>App: <span style="color:#0000ff">com.apple.Preferences</span></p>
  </ul>
  <!--Exit PAGE-->
  <!--Enter PAGE-->
  <ul>
   <h2>Pg: </h2>
   <li><input type="checkbox" checked><i></i><h2>Folder 1</h2>
    <p>Apps 1</p>
   </li>
   <li><input type="checkbox" checked><i></i><h2>Folder 2</h2>
    <p>Apps 1</p>
   </li>
   <li><input type="checkbox" checked><i></i><h2>Folder 3</h2>
    <p>Apps 3</p>
   </li>
   <li><input type="checkbox" checked><i></i><h2>Utilities</h2>
    <p>Apps 1</p>
    <p>App: <span style="color:#0000ff">com.apple.MobileAddressBook</span></p>
    <p>App: <span style="color:#0000ff">com.apple.calculator</span></p>
    <p>App: <span style="color:#0000ff">com.apple.VoiceMemos</span></p>
   </li>
   <li><input type="checkbox" checked><i></i><h2>Jailbreak</h2>
    <p>Apps 1</p>
    <p>App: <span style="color:#0000ff">com.saurik.Cydia</span></p>
    <p>App: <span style="color:#0000ff">libactivator</span></p>
    <p>App: <span style="color:#0000ff">eu.heinelt.ifile</span></p>
    <p>App: <span style="color:#0000ff">crash-reporter</span></p>
    <p>App: <span style="color:#0000ff">com.googlecode.mobileterminal.Terminal</span></p>
   </li>
   <li><input type="checkbox" checked><i></i><h2>Social</h2>
    <p>Apps 1</p>
    <p>App: <span style="color:#0000ff">com.atebits.Tweetie2</span></p>
    <p>App: <span style="color:#0000ff">info.colloquy.mobile</span></p>
    <p>App: <span style="color:#0000ff">com.tapbots.Tweetbot</span></p>
   </li>
   <li><input type="checkbox" checked><i></i><h2>Other</h2>
    <p>Apps 1</p>
    <p>App: <span style="color:#0000ff">com.apple.stocks</span></p>
    <li><input type="checkbox" checked><i></i><h2>Newsstand</h2>
     <p>Apps 1</p>
    </li>
   </li>
   <p>App: <span style="color:#0000ff">com.clickgamer.AngryBirds</span></p>
   <p>App: <span style="color:#0000ff">com.apple.mobileipod</span></p>
  </ul>
  <!--Exit PAGE-->
  <!--Enter PAGE-->
  <ul>
   <h2>Pg: </h2>
   <li><input type="checkbox" checked><i></i><h2>Folder 1</h2>
    <p>Apps 1</p>
   </li>
   <li><input type="checkbox" checked><i></i><h2>Folder 2</h2>
    <p>Apps 1</p>
   </li>
   <li><input type="checkbox" checked><i></i><h2>Folder 3</h2>
    <p>Apps 3</p>
   </li>
   <li><input type="checkbox" checked><i></i><h2>Utilities</h2>
    <p>Apps 1</p>
    <p>App: <span style="color:#0000ff">com.apple.MobileAddressBook</span></p>
    <p>App: <span style="color:#0000ff">com.apple.calculator</span></p>
    <p>App: <span style="color:#0000ff">com.apple.VoiceMemos</span></p>
   </li>
   <li><input type="checkbox" checked><i></i><h2>Jailbreak</h2>
    <p>Apps 1</p>
    <p>App: <span style="color:#0000ff">com.saurik.Cydia</span></p>
    <p>App: <span style="color:#0000ff">libactivator</span></p>
    <p>App: <span style="color:#0000ff">eu.heinelt.ifile</span></p>
    <p>App: <span style="color:#0000ff">crash-reporter</span></p>
    <p>App: <span style="color:#0000ff">com.googlecode.mobileterminal.Terminal</span></p>
   </li>
   <li><input type="checkbox" checked><i></i><h2>Social</h2>
    <p>Apps 1</p>
    <p>App: <span style="color:#0000ff">com.atebits.Tweetie2</span></p>
    <p>App: <span style="color:#0000ff">info.colloquy.mobile</span></p>
    <p>App: <span style="color:#0000ff">com.tapbots.Tweetbot</span></p>
   </li>
   <li><input type="checkbox" checked><i></i><h2>Other</h2>
    <p>Apps 1</p>
    <p>App: <span style="color:#0000ff">com.apple.stocks</span></p>
    <li><input type="checkbox" checked><i></i><h2>Newsstand</h2>
     <p>Apps 1</p>
    </li>
   </li>
   <p>App: <span style="color:#0000ff">com.clickgamer.AngryBirds</span></p>
   <p>App: <span style="color:#0000ff">com.apple.mobileipod</span></p>
  </ul>

You have invalid markup, the only child elements of a [`
` should be `
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul). — hungerstar, Oct 23 '17 at 14:12
@hungerstar - I noticed :). I'm just using an existing codepen to derive from it. Maybe the `
@hungerstar - My bad. One `
` for the pages got moved into `
` by mistake. Will update & fix. PS: One final issue, is there a way to make the "collapse arrow" smaller/ proportional to sizes of the fonts? Where/ how? — Alex S, Oct 23 '17 at 16:14

score 1 · Accepted Answer · answered Oct 23 '17 at 14:13

1

The problem is with the margins on the p tag.

It has its default margins, and you have added a margin-top:14px;

Then the ul li input[type="checkbox"]:checked ~ p rule removes the margin-bottom (sets it to 0).

So the space is the added margins of the elements that are hidden.

If you set both top and bottom margins to 0 when closed then it works fine.

See https://codepen.io/anon/pen/NaVbYN?editors=0100

answered Oct 23 '17 at 14:13

Gabriele Petrioli

191,379
34
261
317

That seems to fix it. Thanks. Will check once more before confirming your answer. – Alex S Oct 23 '17 at 14:17
And then what happens if/when he fixes his invalid HTML? – Rob Oct 23 '17 at 14:31
@rob the margin problem exists regardless of the missing `li` elements. – Gabriele Petrioli Oct 23 '17 at 14:46
@GabyakaG.Petrioli - Thanks. Fixed the HTML, fix is operative in one revision. One final issue, is there a way to make the "collapse arrow" smaller/ proportional to sizes of the fonts? Where/ how? – Alex S Oct 23 '17 at 16:16
1

@AlexS lines 120 to 132 of your sass file is what creates and positions the caret. You can change the widths and translates to be relative to the font size, so `em` units or `rem` units relative to the root font size. You might be better using a different approach than two rotated lines so see https://stackoverflow.com/a/22156412/128165 – Gabriele Petrioli Oct 23 '17 at 16:38

score -1 · Answer 2 · answered Oct 23 '17 at 14:10

-1

Not sure but try adding

padding-bottom: 0px!important;

or

margin-bottom: 0px!important;

To your h2 class

answered Oct 23 '17 at 14:10

Manuel Bauer

1

Fix CSS + HTML only Accordion to eliminate unncessary white space?

` for the pages got moved into `` by mistake. Will update & fix. PS: One final issue, is there a way to make the "collapse arrow" smaller/ proportional to sizes of the fonts? Where/ how?

2 Answers2

` for the pages got moved into `
` by mistake. Will update & fix. PS: One final issue, is there a way to make the "collapse arrow" smaller/ proportional to sizes of the fonts? Where/ how?