Expand chapters in book view by default #935

New Issue

OVERLORD · 2026-02-04T23:02:01+03:00

OVERLORD commented

2026-02-04 23:02:01 +03:00

Originally created by @DaveFace on GitHub (Dec 3, 2018).

Describe the feature you'd like
It would be useful to have the chapters (in book view) expanded by default, to give a clearer idea of a book's content at first glance. Perhaps a per-book setting, or a global .env setting.

Describe the benefits this feature would bring to BookStack users
Improves immediate readability and discovery, making it easier to find what you're looking for without hunting through multiple drop-downs.

Originally created by @DaveFace on GitHub (Dec 3, 2018). **Describe the feature you'd like** It would be useful to have the chapters (in book view) expanded by default, to give a clearer idea of a book's content at first glance. Perhaps a per-book setting, or a global .env setting. **Describe the benefits this feature would bring to BookStack users** Improves immediate readability and discovery, making it easier to find what you're looking for without hunting through multiple drop-downs.

OVERLORD added the 🛠️ Enhancement 💆 UX 💻 Front-End labels 2026-02-04 23:02:01 +03:00

OVERLORD closed this issue

2026-02-04 23:02:06 +03:00

OVERLORD commented

2026-02-04 23:02:11 +03:00

@ezzra commented on GitHub (Dec 3, 2018):

You can achieve that by using the CSS override in custom head field:

<style>
.inset-list {
    display: block !important;
}
.page-list .text-muted {
    display: none !important;
}
</style>

I did some more css changes in the overview and now it looks like this:

I like this much more because its simpler to have an overview about the available content, but it definitely depens on your project. In one of them I have the "problem" that there is very much pages and you definitely need the chapters only view.
But there is much space to improve the list view, first of all I would like to replace the extra line for showing/hiding the pages

this should be attached to the chapter line (I could not achieve that yet by only using css)

@ezzra commented on GitHub (Dec 3, 2018): You can achieve that by using the CSS override in custom head field: ``` <style> .inset-list { display: block !important; } .page-list .text-muted { display: none !important; } </style> ``` I did some more css changes in the overview and now it looks like this: ![screenshot_2018-12-03_10-50-11](https://user-images.githubusercontent.com/37742522/49367185-97d70a00-f6eb-11e8-8404-71a348d70866.png) I like this much more because its simpler to have an overview about the available content, but it definitely depens on your project. In one of them I have the "problem" that there is very much pages and you definitely need the chapters only view. But there is much space to improve the list view, first of all I would like to replace the extra line for showing/hiding the pages ![screenshot_2018-12-03_11-12-28](https://user-images.githubusercontent.com/37742522/49367462-6f034480-f6ec-11e8-88f2-7be5c7f1edd3.png) this should be attached to the chapter line (I could not achieve that yet by only using css)

OVERLORD commented

2026-02-04 23:02:20 +03:00

@DaveFace commented on GitHub (Dec 3, 2018):

That's fantastic @ezzra - thanks for posting that. I figured there might be a way to do it with a CSS override but I have no idea what I'm doing there.

I agree it will depend on the project, if you have a lot of chapters/pages this would become pretty cumbersome. For now though, mine's looking much neater!

Edit: I also found this was annoying me on the sidebar too, so after a bit of trial and error I found that adding:

.sidebar-page-list .text-muted {
    display: none !important;
}

It also hides them there.

@DaveFace commented on GitHub (Dec 3, 2018): That's fantastic @ezzra - thanks for posting that. I figured there might be a way to do it with a CSS override but I have no idea what I'm doing there. I agree it will depend on the project, if you have a lot of chapters/pages this would become pretty cumbersome. For now though, mine's looking much neater! Edit: I also found this was annoying me on the sidebar too, so after a bit of trial and error I found that adding: ``` .sidebar-page-list .text-muted { display: none !important; } ``` It also hides them there.

OVERLORD commented

2026-02-04 23:02:29 +03:00

@michaelmcdonald commented on GitHub (Nov 3, 2019):

This does not appear to be hiding the "# pages" count anymore. Did the CSS names change that would allow the above code to hide that?

@michaelmcdonald commented on GitHub (Nov 3, 2019): This does not appear to be hiding the "# pages" count anymore. Did the CSS names change that would allow the above code to hide that?

OVERLORD commented

2026-02-04 23:02:34 +03:00

@JBauto commented on GitHub (Dec 6, 2019):

@michaelmcdonald
Just add this

button[chapter-toggle] {
    display: none !important;
}

@JBauto commented on GitHub (Dec 6, 2019): @michaelmcdonald Just add this ```css button[chapter-toggle] { display: none !important; } ```

OVERLORD commented

2026-02-04 23:02:39 +03:00

@ryanmortier commented on GitHub (Mar 25, 2022):

This works great for me:

    button[chapter-toggle] {
        display: none !important;
    }

    .inset-list {
        display: block !important;
    }

@ryanmortier commented on GitHub (Mar 25, 2022): This works great for me: ```css button[chapter-toggle] { display: none !important; } .inset-list { display: block !important; } ```

OVERLORD commented

2026-02-04 23:02:51 +03:00

@camaer commented on GitHub (Mar 25, 2022):

Anybody found a way to expand the chapter by default but keep the button and option to collapse them again if needed ?

@camaer commented on GitHub (Mar 25, 2022): Anybody found a way to expand the chapter by default but keep the button and option to collapse them again if needed ?

OVERLORD commented

2026-02-04 23:02:58 +03:00

@ssddanbrown commented on GitHub (Mar 26, 2022):

@camaer This would open them up on page load in the current version of BookStack (Not assured for future versions):

<script>
window.addEventListener('DOMContentLoaded', (event) => {
    (window.components['chapter-toggle'] || []).forEach(toggle => {
    	toggle.open();
    	toggle.isOpen = true;
    })
});
</script>

@ssddanbrown commented on GitHub (Mar 26, 2022): @camaer This would open them up on page load in the current version of BookStack (Not assured for future versions): ```html <script> window.addEventListener('DOMContentLoaded', (event) => { (window.components['chapter-toggle'] || []).forEach(toggle => { toggle.open(); toggle.isOpen = true; }) }); </script> ```

OVERLORD commented

2026-02-04 23:03:05 +03:00

@makrele568 commented on GitHub (Jul 13, 2022):

@ssddanbrown In version 22.06.1 the script no longer works. Is there a solution for this?

@makrele568 commented on GitHub (Jul 13, 2022): @ssddanbrown In version 22.06.1 the script no longer works. Is there a solution for this?

OVERLORD commented

2026-02-04 23:03:13 +03:00

@makrele568 commented on GitHub (Jul 14, 2022):

Here's the solution:

<script>
window.addEventListener('DOMContentLoaded', (event) => {
    (window.components['chapter-contents'] || []).forEach(toggle => {
    	toggle.open();
    	toggle.isOpen = true;
    })
});
</script>```

@makrele568 commented on GitHub (Jul 14, 2022): Here's the solution: ```javascript <script> window.addEventListener('DOMContentLoaded', (event) => { (window.components['chapter-contents'] || []).forEach(toggle => { toggle.open(); toggle.isOpen = true; }) }); </script>```

OVERLORD commented

2026-02-04 23:03:18 +03:00

@nathanaelhoun commented on GitHub (Dec 29, 2022):

Since v22.11 and PR #3853, the previous solution doesn't work. By replacing by the new syntax, it seems to behave as intended:

window.addEventListener('DOMContentLoaded', (event) => {
	window.$components.get('chapter-contents').forEach(toggle => {
		toggle.open();
		toggle.isOpen = true;
	});
});

@nathanaelhoun commented on GitHub (Dec 29, 2022): Since v22.11 and PR #3853, the previous solution doesn't work. By replacing by the new syntax, it seems to behave as intended: ```js window.addEventListener('DOMContentLoaded', (event) => { window.$components.get('chapter-contents').forEach(toggle => { toggle.open(); toggle.isOpen = true; }); }); ```

OVERLORD commented

2026-02-04 23:03:22 +03:00

@ajh0912 commented on GitHub (Mar 25, 2023):

I think this would be best implemented as a local user preference, like 'Toggle Details' on the home page, or 'Grid View' / 'List View' on the Shelves & Books pages.

Depending on the book that's being read, shelves may contain a lot of pages, or relatively few pages. If they contain few pages then my preference would be to expand chapters.
For some books locating the right chapter (when you don't know the right thing to search for) is best done by scrolling through the book - therefore I would collapse chapters in that case. It's very context dependant.

I'm currently using the custom head HTML script, with the caveat that it apples to all users and is always defaulting to expand chapters.

I can understand how every new feature needs weighted against the overhead of implementing and maintaining.
@ssddanbrown what's your opinion on whether such a feature is viable?

@ajh0912 commented on GitHub (Mar 25, 2023): I think this would be best implemented as a local user preference, like 'Toggle Details' on the home page, or 'Grid View' / 'List View' on the Shelves & Books pages. Depending on the book that's being read, shelves may contain a lot of pages, or relatively few pages. If they contain few pages then my preference would be to expand chapters. For some books locating the right chapter (when you don't know the right thing to search for) is best done by scrolling through the book - therefore I would collapse chapters in that case. It's very context dependant. I'm currently using the custom head HTML script, with the caveat that it apples to all users and is always defaulting to expand chapters. I can understand how every new feature needs weighted against the overhead of implementing and maintaining. @ssddanbrown what's your opinion on whether such a feature is viable?

OVERLORD commented

2026-02-04 23:03:27 +03:00

@ryland-mueller commented on GitHub (May 26, 2023):

The below is working for me to force expand and also hide the "# pages" collapse/expand button

<style>
    .chapter-contents-toggle {
        display: none !important;
    }
    .inset-list {
        display: block !important;
    }
</style>

@ssddanbrown I would love to see this properly implemented as an option in settings if you ever have time.

@ryland-mueller commented on GitHub (May 26, 2023): The below is working for me to force expand and also hide the "# pages" collapse/expand button ``` <style> .chapter-contents-toggle { display: none !important; } .inset-list { display: block !important; } </style> ``` @ssddanbrown I would love to see this properly implemented as an option in settings if you ever have time.

OVERLORD commented

2026-02-04 23:03:31 +03:00

@ssddanbrown commented on GitHub (May 26, 2023):

@ryland-mueller It's not really a matter of time, I generally avoid adding these kind of UI options to the app, preferring instead to expose generic methods of extension/customization as you have used here.

@ssddanbrown commented on GitHub (May 26, 2023): @ryland-mueller It's not really a matter of time, I generally avoid adding these kind of UI options to the app, preferring instead to expose generic methods of extension/customization as you have used here.

OVERLORD commented

2026-02-04 23:03:36 +03:00

@ryland-mueller commented on GitHub (May 26, 2023):

I understand this sentiment. My only counterpoint would be that these tweaks tend to break over time, as seen in this thread. The snippet posted by @ryanmortier a year ago does not hide the dropdown button anymore, hence my update.

@ryland-mueller commented on GitHub (May 26, 2023): > I understand this sentiment. My only counterpoint would be that these tweaks tend to break over time, as seen in this thread. The snippet posted by @ryanmortier a year ago does not hide the dropdown button anymore, hence my update.

OVERLORD commented

2026-02-04 23:03:38 +03:00

@demlak commented on GitHub (Jun 19, 2023):

This is a really good example for a very simple/small thing, that leads to much "check+update"-work on every update over years for multiple peoples, if it is implemented via visual theme system instead of being a System-Setting.

aka: i would vote for it being a System-Setting =)

@demlak commented on GitHub (Jun 19, 2023): This is a really good example for a very simple/small thing, that leads to much "check+update"-work on every update over years for multiple peoples, if it is implemented via `visual theme system` instead of being a System-Setting. aka: i would vote for it being a System-Setting =)

OVERLORD commented

2026-02-04 23:03:41 +03:00

@pgorod commented on GitHub (Jan 26, 2024):

Agreed, this should be a setting - it's the best way to have the top chapters work as automatic table of contents pages, with all the pages effortlessly listed there, and always up to date.

It feels like such a natural way of using bookstack that it should be easier than using flaky custom code...

Thanks

@pgorod commented on GitHub (Jan 26, 2024): Agreed, this should be a setting - it's the best way to have the top chapters work as automatic table of contents pages, with all the pages effortlessly listed there, and always up to date. It feels like such a natural way of using bookstack that it should be easier than using flaky custom code... Thanks

OVERLORD commented

2026-02-04 23:03:45 +03:00

@divStar commented on GitHub (Jun 23, 2024):

I would also like to have this either as a user-setting or a general setting. I wouldn't mind either, but as things are, it is a bit annoying to have to open every chapter to see what's inside. Other than that bookstack is really awesome, simple and fast - wow!

@divStar commented on GitHub (Jun 23, 2024): I would also like to have this either as a user-setting or a general setting. I wouldn't mind either, but as things are, it is a bit annoying to have to open every chapter to see what's inside. Other than that bookstack is really awesome, simple and fast - wow!

OVERLORD commented

2026-02-04 23:03:47 +03:00

@zhang-nianqiang commented on GitHub (Apr 29, 2025):

window.addEventListener('DOMContentLoaded', (event) => {
	window.$components.get('chapter-contents').forEach(toggle => {
		toggle.open();
		toggle.isOpen = true;
	});
});

This doesn't work right now, can you help with an update？

@zhang-nianqiang commented on GitHub (Apr 29, 2025): ``` window.addEventListener('DOMContentLoaded', (event) => { window.$components.get('chapter-contents').forEach(toggle => { toggle.open(); toggle.isOpen = true; }); }); ``` This doesn't work right now, can you help with an update？

OVERLORD commented

2026-02-04 23:03:54 +03:00

@divStar commented on GitHub (Apr 30, 2025):

@zhang-nianqiang - for me it still works, but you have to wrap it in <script> tags. So this is what you need to add to the Custom HTML Head Content code editor field in the settings:

<script type="text/javascript">
  window.addEventListener('DOMContentLoaded', (event) => {
  	window.$components.get('chapter-contents').forEach(toggle => {
  		toggle.open();
  		toggle.isOpen = true;
  	});
  });
</script>

Here's a screenshot just in case:

@divStar commented on GitHub (Apr 30, 2025): @zhang-nianqiang - for me it still works, but you have to wrap it in `<script>` tags. So this is what you need to add to the Custom HTML Head Content code editor field in the settings: ```html,js <script type="text/javascript"> window.addEventListener('DOMContentLoaded', (event) => { window.$components.get('chapter-contents').forEach(toggle => { toggle.open(); toggle.isOpen = true; }); }); </script> ``` Here's a screenshot just in case: <img width="688" alt="Image" src="https://github.com/user-attachments/assets/09d546c6-e072-481a-89f2-28c2b410415e" />

OVERLORD commented

2026-02-04 23:04:02 +03:00

@zhang-nianqiang commented on GitHub (Apr 30, 2025):

@divStar
Thank you very much! The problem has been solved.
I'm not good at programming and didn't pay attention to this issue.
Thanks again for your guidance.

@zhang-nianqiang commented on GitHub (Apr 30, 2025): @divStar Thank you very much! The problem has been solved. I'm not good at programming and didn't pay attention to this issue. Thanks again for your guidance.

OVERLORD commented

2026-02-04 23:04:08 +03:00

@ssddanbrown commented on GitHub (Sep 7, 2025):

I'm going to go ahead and close this off since I don't see enough demand for added options to be worthwhile, and this can be achieved via simple customizations.

Feel free to still share customization revisions on this thread where needed though!

@ssddanbrown commented on GitHub (Sep 7, 2025): I'm going to go ahead and close this off since I don't see enough demand for added options to be worthwhile, and this can be achieved via simple customizations. Feel free to still share customization revisions on this thread where needed though!

OVERLORD referenced this issue

2026-02-05 02:04:43 +03:00

Possibility for a user to subscribe/follow a page (notified of changes) #1862

OVERLORD referenced this issue

2026-02-05 02:50:05 +03:00

Inform with maillists about new shelfentrys/books/sites #2079

OVERLORD referenced this issue

2026-02-05 06:37:29 +03:00

System wide personalized notification system #3407

Sign in to join this conversation.