Exhibit Builder - make an exhibit block into an accordion?

[jcmundy]

I have a client who is repeatedly interested in making sections of an exhibit page into accordion/drop-down sections. I can do that with text, but haven’t found a way to collapse the entire block section including icon/item links. Is there a template out there with this function or anyone with tips?

[mebrett]

Just to clarify, are you talking about sections within a single page (a block or a cluster of blocks)? Or child pages in the navigation?

[jcmundy]

I am talking about sections within a single page.

[jcmundy]

So the idea is, on a single exhibit page, each block would be able to hide behind a dropdown/accordion button. So a button saying “Gallery” could be clicked and a gallery block would expand, and then a second labeled “Information” could be clicked and a file with text block could expand. Has anyone worked with anything like this?

[kim]

I haven’t seen this applied to exhibits, so sadly I don’t have any examples to link. Can you explain what issue you’re having applying your accordion structure to elements beyond text? Live examples are always helpful.

[jcmundy]

I have used an accordion in text blocks, as in this simple page: https://repository.netecweb.org/howtouse, but I am having trouble including ‘gallery’ elements in an accordion. It would be great to hide each section on this page behind a collapsible element, for example: https://repository.netecweb.org/exhibits/show/frontlinefacilities/resources

[kim]

With the way we structure those blocks, I don’t see a pure CSS means like what I’m seeing you’re using on your simple page accordions. You could probably write a bit of js/jquery to have a checkbox toggle the gallery visibility though.

If you create <button type="button" class="toggle" aria-label="Toggle gallery visibility">+</button> in the gallery caption, you can use the following bit of jQuery. Note: you’ll have to allow button as an HTML element in Settings > Security > Allowed HTML ELements.

$('button.toggle').click(function() {
  var gallery = $(this).parents('.layout-gallery').find('.gallery');
  gallery.toggle();
});