atleastzero / docsify-accordify

4 stars 2 forks source link

Accordions render as whitespace when closed #4

Open AndrewBreyen opened 1 year ago

AndrewBreyen commented 1 year ago

Hello,

I am attempting to use accordify to collapse sections of my document that are not particularly important, but we want them to still show.

However, when collapsed, those sections render a giant white space, and the text beneath the accordion does not move up.

When collapsed: image

When expanded: image

I have index.html set up like:

<!------------->
  <!-- PLUGINS -->
  <!------------->
  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
  <!-- docsify-themeable (latest v0.x.x) -->
  <script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>
  <!-- docsify-plugin-flexible-alerts -->
  <script src="https://unpkg.com/docsify-plugin-flexible-alerts"></script>
  <!-- docsify-accordify -->
  <script src="//unpkg.com/docsify-accordify/src/index.js"></script>
  <!-- docsify-sidebar-collapse-->
  <script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>

  <!------------------------->
  <!-- CUSTOM STYLE SHEETS -->
  <!------------------------->
  <!-- docsify-accordify css-->
  <link rel="stylesheet" href="//unpkg.com/docsify-accordify/src/assets/default.css">

In my markdown files:

## Pre-Tasks
- Bullet 1
- Bullet 2

### Collapsable Header +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

###

## Header that is not collapsable
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Any ideas?

Thanks!

dt192 commented 1 year ago

I had this too. Adding display: none; to .panel { and display:block; to .panel.opened { sorted it out.