Show elements according to click

Question

In my view I have 5 partials that should be rendered. I needed that when clicking one is shown and the others are hidden...

Is in this structure:

<ul class="nav nav-tabs">
            <li class="active"><a href="#cliente">Cliente</a></li>
            <li><a href="#anamnese">Anamnese</a></li>
            <li><a href="#recordatorio">Recordatorio</a></li>
        </ul>

        <div id="cliente">
            @Html.Partial("_PartialCliente", Model)
        </div>

        <div id="anamnese">
            @Html.Partial("_PartialAnaminese", Model)
        </div>

        <div id="recordatorio">
            @Html.Partial("_PartialRecordatorio", Model)
            @Html.Partial("_PartialRefeicao", Model)
            @Html.Partial("_PartialQuestionarioFrequenciaAlimentar", Model)
        </div>

How could I do that? That is, how I could click on the client tab and show only the partial referent and the others are hidden in the same way for the others?

Answer 1

Well, you can always use one hide class together with a partial,
<div id="recordatorio" class="partial hide"> then something like (pseudo-code):

document.querySelectorAll('.partial').map(function() { this.onClick = function() {
        this.classname.slice(this.classname.indexOf('hide'),1);
        // ... e o codigo para adicionar o 'hide' a todos os outros
    }; 
});

Basically, every click on one partial he would take the hide own element and apply it to all others who do not have the hide but be partials.