How to let a user switch between blocks that need to be shown?

Question

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 Option A is selected by default, then only Block A should be shown. If the visitor clicks 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.

Answer 1

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.

Answer 2

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.

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:

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

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().