Expand chapters in book view by default

[DaveFace]

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.

[ezzra]

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)

[DaveFace]

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.

[michaelmcdonald]

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?

[JBauto]

@michaelmcdonald Just add this

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

[ryanmortier]

This works great for me:

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

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

[camaer]

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

[ssddanbrown]

@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>

[makrele568]

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

[makrele568]

Here's the solution:

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

[nathanaelhoun]

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;
	});
});

[ajh0912]

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?

[ryland-mueller]

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.

[ssddanbrown]

@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.

[ryland-mueller]

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.

[demlak]

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 =)

[pgorod]

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