How to create a switch that changes the content of the page? - html

Question

I have a drupal site 8 th I use Twig to customize my pages.
I created 2 blocks view :
drupal_view('message_activity_stream_timeline_public', 'block_1') }}
drupal_view('message_activity_stream_timeline_private', 'block_1') }}
On my homepage, I want to put a switch that goes from block_1 to block_2 and vice versa.
When the switch is on the position PUBLIC it must display the block drupal_view('message_activity_stream_timeline_public', 'block_1') }}.
When the switch is on the position PRIVÉ it must display the block drupal_view('message_activity_stream_timeline_private', 'block_1') }}.
It is not necessary to memorize the position.
How can I do this ?
Here is my page :
<div class="home-page-header-bottom">
<h5>Fil d’actualité <button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="bottom" title="Le fil d'actualité public affiche en temps réel toute l'activité publique qui se déroule sur le site. Le fil d'actualité privé affiche en temps réel uniquement l'activité publique des pages que vous aimez et l'activité privée liée à votre compte. Lorsque vous êtes connecté, vous pouvez basculer d'un fil d'actualité à l'autre."><i class="fas fa-info-circle fa-lg"></i></button></h5>
<div class="toggle-on-off">
<span class="toggle-on-off-public">PUBLIC</span>
<i class="fas fa-toggle-on fa-rotate-180 fa-3x"></i>
<span class="toggle-on-off-prive">PRIVÉ</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 home-page-footer">
<div class="col-md-12 timelines">
<div class="main-timeline">
{{ drupal_view('message_activity_stream_timeline_public', 'block_1') }}
{{ drupal_view('message_activity_stream_timeline_private', 'block_1') }}
</div>
</div>
</div>
Can you explain to me how to get the method with reloading the page and without reloading the page ?

Answer 1

You can set additional variables to send to a template using hook_preprocess_HOOK(), and then use that value within a twig conditional.
You'll also need to consider caching, otherwise Drupal's Dynamic Page Cache may store the rendered page fragment the first time it's needed and server it to all later users.
function MY_MODULE_hook_preprocess_ELEMENT(&$variables) {
// Add a variable to send to the template.
$variables['new_variable'] = TRUE;
// Add the appropriate cache contexts so that the template is re-rendered when needed.
$variables['#cache']['contexts'][] = 'session';
}