0

I have pre-defined blocks A,B and C that are meant to be placed in the sidebar_first region. What I would like to achieve is: a visitor could select the block that needs to be displayed for the sidebar_first region when click on a dropdown button containing option A, B and C. This dropdown button should exist somewhere on the same page of these blocks (means the visitor will not do it in the admin pages).

For example, if by default Option A is selected, then only Block A should be shown. If the visitor click on Option B, then Block A will be hidden (or removed) and Block B will show up.

The way I could think of is to disable and enable blocks programmatically on clicking the dropdown button, and then refresh the region via ajax, but I have no clue how this can be acheived. I am also open to other approaches.

0

I found Block Accordions to be my solution. It shows blocks at your choice in accordion style. With some simple modification to the JavaScript and CSS file (maybe the twig as well), you can also get blocks to show in tabs or dropdown menu.

0

For Drupal 8, there is the Block Tabs module:

This module provides basic tabs function for Drupal. Deep integration with Drupal8's API, Plugin, Block, Entity and Config API. Provide simple tabs functions, you can control the CSS by your self. Based on jquery.ui.tabs...Tab type using Plugin system, it is very easy to extend.


For Drupal 7:

The Quicktabs module might work for you.

The Quicktabs module allows you to create blocks of tabbed content, specifically views, blocks, nodes and other quicktabs. You can create a block on your site containing multiple tabs with corresponding content.

You would create a Quicktabs instance (Admin > Structure > Quicktabs) with the blocks you want to display. You can select a default block, and load the blocks with or without AJAX. With certain render options, you can choose to maintain a history of the user's selection.

Creating a quicktabs instance

The Quicktabs Styles sub-module provides various tab styles (enable the Quicktabs Styles module to use them and visit Admin > Structure > Quicktabs > Styles to preview them). Or you can style the tabs with your own CSS. Examples of some of the included styles:

Previews of some of the quicktabs styles

Once your Quicktabs instance is created, you would add the block to the sidebar region (Admin > Structure > Blocks). Example:

Example quicktabs instance

If you need the selection element to be a dropdown menu instead of tabs, you might be able to use a custom renderer plugin. From the Quicktabs README.txt:

Another way to extend Quicktabs is to add a renderer plugin. Quicktabs comes with 3 renderer plugins: jQuery UI Tabs, jQuery UI Accordion, and classic Quicktabs. A renderer plugin is a class that extends the QuickRenderer class and implements the render() method, returning a render array that can be passed to renderer service (\Drupal::service('renderer')). See any of the existing renderer plugins for examples. Also see Quicktabs' implementation of hook_quicktabs_renderers().

  • Thank you for this detailed answer. My apologies that I didn't mention I'm on Drupal 8. Edited. But this is certainly a way to do it, and now I will check if there are similar modules available for D8. – Yixiao Chen Oct 12 '16 at 15:43
  • No worries, I wasn't sure and should have clarified first. I edited my answer with a suggestion for D8 - the Block Tabs module. I haven't tested it myself but it might work for you. – Kristin Oct 12 '16 at 16:01
  • Block Tabs didn't work out well for my need, but I found Accordion Blocks to be my solution. – Yixiao Chen Oct 12 '16 at 20:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.