Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Quickly expand or collapse parts in a guide or programme #267

merged 6 commits into from Oct 15, 2014


Copy link

@fofr fofr commented Oct 14, 2014

  • Use a single toggle all link to collapse or expand all parts to a guide or programme
  • Move a part's slug to beneath the title, rather than being hidden beneath the body field
  • Style add and remove part actions as buttons

screen shot 2014-10-14 at 13 48 14

screen shot 2014-10-14 at 13 48 08

fofr and others added 5 commits Oct 13, 2014
Quickly expand or collapse all parts of a guide or programme
* Slug and title are often similar, it’s easier to edit or create both
when their fields are next to each other.
* Tweak the slug help copy and remove the obvious title copy
* With one link expand or collapse all parts.
<h3 class="remove-top-margin add-bottom-margin">Parts</h3>
<h3 class="remove-top-margin">Parts</h3>
<p class="add-bottom-margin if-no-js-hide">
<a href="#" class="js-toggle-all">Show/hide all parts</a>

This comment has been minimized.


dhwthompson Oct 14, 2014

While I see the advantage of this over the separate expand/collapse links, if some or all of the parts are open (in which case some of them will almost certainly be off the bottom of the screen) it’s not quite clear whether this will close all the parts or open up any parts that are closed. To some extent people could get around this by clicking the link, seeing what happens, and then clicking it again, but that seems less than ideal.

Is there a sensible way to change the text of the link according to what’s going to happen (or at least make it look like that’s what’s happening), or would that add more complexity than it’s worth?

This comment has been minimized.


fofr Oct 15, 2014
Author Contributor

Updated to take on your suggestion here: 6148be1

I realised the problem with my initial approach for toggling the link text was in using Bootstrap's show/hide events rather than the shown/hidden ones, the checks for state were being performed at the wrong time, which created a confusing inconsistency.

Copy link

@dhwthompson dhwthompson commented Oct 14, 2014

One comment/question/suggestion, but otherwise this looks good. Nice work 👍

* Show collapse or expand links
* Change these links then collapsing/expanding all and when a user
manually changes one of the parts themselves
*There is a slight delay in the text updating because of the animation
which must finish before Bootstrap triggers the shown/hidden events
Copy link

@dhwthompson dhwthompson commented Oct 15, 2014

Excellent: thanks, @fofr. Tested this out on my dev machine, and I haven’t managed to break it.

dhwthompson added a commit that referenced this pull request Oct 15, 2014
Quickly expand or collapse parts in a guide or programme
@dhwthompson dhwthompson merged commit 3584288 into master Oct 15, 2014
1 check passed
1 check passed
default "Build #338 succeeded on Jenkins"
@dhwthompson dhwthompson deleted the expand-or-close-parts branch Oct 15, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants
You can’t perform that action at this time.