Show and collapse Exhibit Builder Page Tree

[jordi3421]

Hello,

I was wondering if there is an easy way of collapsing and showing the Exhibit Builder navigation pages. I’ve searched but any luck so far. The expected behavior would be to click on the h4 and display/hide all the pages of the exhibit. Do I have to add custom CSS/JS? What would be the best option?

The code that I am referring to is in /plugins/ExhibitBuilder/views/public/exhibits/show.php

<nav id="exhibit-pages">
    <h4><?php echo exhibit_builder_link_to_exhibit($exhibit); ?></h4>
    <?php echo exhibit_builder_page_tree($exhibit, $exhibit_page); ?>
</nav>

Thanks

[DanieleB]

Hi Jordi.
Not sure whether that feature exists, but I doubt it.

If you’d like to implement it yourself, you could find some ideas and code in a similar feature I’ve added to my fork of Collection Tree plugin (https://github.com/DBinaghi/plugin-CollectionTree/tree/master/views/shared/javascripts); see also the CSS file to apply some styling. If you ever get something good out of it, consider submitting it as a pull request for the original plugin (tip: add a config option to enable the feature, so that by default the plugin behaves as usual).

Hope this helps.

[jordi3421]

Hi Daniele,

thanks for the reply. I’ll share the code, but I don’t know if it’s worth it for a pull request. I’m using bootstrap 3.4.

I’ve created a JavaScript file in /plugins/ExhibitBuilder/views/public/javascripts/show-nav-pages.js

jQuery(document).ready(function () {
  var acc = document.getElementById("accordion");//jQuery(".accordion"); 
  var index = document.getElementsByClassName("index")[0]; 
  index.style.display = 'none';
    acc.addEventListener("click", function() {  
      if (index.style.display == 'none') {
        index.style.display = 'inline-block'; 
        acc.innerHTML = "<span class='glyphicon glyphicon-menu-up' aria-hidden='true'></span>";
      } else {
        index.style.display = 'none';
        acc.innerHTML = "<span class='glyphicon glyphicon-menu-down' aria-hidden='true'></span>";
      }
    });
  
});

And in the show.php of the exhibits I added and modified the following code just before <?php echo foot(); ?>

<h4><?php echo exhibit_builder_link_to_exhibit($exhibit);?></h4>
<h5><?php echo __('Index') ; ?> </h5>
<button id="accordion">  
        <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
    </button>
<nav id="exhibit-pages" class="index">
    <?php echo exhibit_builder_page_tree($exhibit, $exhibit_page); ?>
</nav>

Thanks for the help

[DanieleB]

Thanks for sharing, Jordi.

Would you mind sharing an URL to your site, to see your working solution? I’m sure it could be useful to other forum users.

[jordi3421]

Sure, at the bottom of the page we can see a button that shows/collapses the index.

https://exhibicions.dev.csuc.cat/exhibits/show/new-york-according-to-carles-f/the-city-that-interacts

Cheers!