How to display blocks as a toggle?

Question

I am displaying a list of Views blocks on the user page.

I want to create a menu/list of links on the sidebar of the page, and when I click the link "Block 1" it shows only the "Block 1". When I click "Block 2" it shows the block 2 and so on... All the other blocks must be hidden.

I could create several pages with the views and could link to those pages, but the thing is: I need to be in the user page, because the views have filters related to the user URL. So it has to be all in the same page.

What is the best way to do this?

Please see the picture explaining how I want the page.

Answer 1

The Quick Tabs module may meet your needs.

The Quick Tabs 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... Once created, the Quick Tabs blocks show up in your block listing, ready to be configured and enabled like other blocks.

You would create a Quick Tabs instance (Admin > Structure > Quicktabs) with the views blocks you want to display. You are able to configure URL arguments to pass to the block's contextual filters.

Then display the block of the Quick Tabs instance on the user page.

There are various tab styles offered by the module or you can style the tabs with your own CSS.

Answer 2

As per your confirmation (comment), I'm assuming that to click the link Block 1, that link must have some relative path, say /path/for/link/in/block1. Same for block 2, like /path/for/link/in/block2, block 3 and block 4.

In that case, you can use the Rules block visibility module for this. Here is a quote from its project page:

The Rules block visibility module allows Rules components to be used to control block visibility. This provides Drupal administrators and developers extreme flexibility in controlling when blocks should be displayed on their websites, in addition to the default visibility options provided by Drupal.

The general idea is that if you can do it with Rules, you can use it to control block visibility, so the possibilities are limitless.

Need to show a block only for users registered more than a month ago?

Perhaps you have a block that must be shown only between 8am-5pm on weekdays?

What about displaying or hiding a block based on current weather conditions?

All of this can be done by using Rules block visibility.

With that, and as per the "if you can do it with Rules, you can use it to control block visibility" above, you've reduced your question to making Rules "check the path of the current page" (so that the appropriate menu block is shown on the appropriate pages).

For an illustration of how to use this module, refer to my answer to "How to stop a Views block from displaying to admins, such as user/1?". It includes a Rules Component (in Rules export format), which you should replace by the variations below to make it match your specific question.

For your block 1:

Within the block visibility settings of this block, use this Rules Component:

{ "rules_block_visibility_show_block1" : {
    "LABEL" : "Show block 1",
    "PLUGIN" : "rule",
    "OWNER" : "rules",
    "REQUIRES" : [ "rules" ],
    "USES VARIABLES" : {
      "module" : { "label" : "Module", "type" : "text" },
      "delta" : { "label" : "Delta", "type" : "text" },
      "result" : { "label" : "Result", "type" : "boolean", "parameter" : false }
    },
    "IF" : [
      { "text_matches" : {
          "text" : [ "site:current-page:path" ],
          "match" : "path\/for\/link\/in\/block1",
          "operation" : "starts"
        }
      }
    ],
    "DO" : [ { "data_set" : { "data" : [ "result" ], "value" : "1" } } ],
    "PROVIDES VARIABLES" : [ "result" ]
  }
}

Remark: depending on how your actual path looks like, you may want to use a Regular Expression (regex) in your Rules Condition instead (which gives you way more flexibility, provided you're familiar with RegEx).

For your block 2:

Within the block visibility settings of this block, use this Rules Component:

{ "rules_block_visibility_show_block2" : {
    "LABEL" : "Show block 2",
    "PLUGIN" : "rule",
    "OWNER" : "rules",
    "REQUIRES" : [ "rules" ],
    "USES VARIABLES" : {
      "module" : { "label" : "Module", "type" : "text" },
      "delta" : { "label" : "Delta", "type" : "text" },
      "result" : { "label" : "Result", "type" : "boolean", "parameter" : false }
    },
    "IF" : [
      { "text_matches" : {
          "text" : [ "site:current-page:path" ],
          "match" : "path\/for\/link\/in\/block1",
          "operation" : "starts"
        }
      }
    ],
    "DO" : [ { "data_set" : { "data" : [ "result" ], "value" : "1" } } ],
    "PROVIDES VARIABLES" : [ "result" ]
  }
}

For your block 3, 4, etc:

Yet another similar rule: just change the "1" (or "2") to "3" (or "4").

Answer 3

I think in your case is best to use jquery for doing such a thing. Meaning put id's on your menu/list links like menu-1, menu-2 and so on and also put an id on your blocks like block-1, block-2 and so on.

Also use a wrapper around all your blocks with position:relative and use position:absolute on your blocks so every block is stacked upon others.

Then use a simple jquery script that targets your corresponding id's that either manipulates the positioning of your blocks or their z-index.