当我单击其他div时使div出现

Question

I have five different div's with class 'avatar' and when I click on one of them, I want the respective section with 'iframe' class to appear. So far I've only been able to create a function in which when I click on the div with class 'avatar', the .open class is added causing the section of classse .iframe to appear. But it's always the same section that pops up.

HTML

<div class="avatar" id="mauricioAvatar">
    <img src="img/mauricio.jpg" alt="">
    <span class="avatar-info"><p><strong>Maurício Munhoz</strong><br/>
    Diretor/Consultor Técnico</p>
    </span>
</div>
<div class="avatar" id="alexandreAvatar">
   <img src="img/alexandre.jpeg" alt="">
    <span class="avatar-info"><p><strong>Alexandre Lúcio da Silva</strong><br/>
    Consultor Lean Manufacturing</p>
    </span>
</div>
<div class="avatar" id="pauloAvatar">
    <img src="img/paulo.jpg" alt="">
    <span class="avatar-info"><p><strong>Paulo Fernandes da Costa</strong><br/>
    Consultor Técnico</p>
    </span>
</div>
<div class="avatar" id="amauriAvatar">
    <img src="img/amauri.png" alt="">
    <span class="avatar-info"><p><strong>Amauri Chillemi</strong><br/>
    Consultor Técnico</p>
    </span>
</div>
<div class="avatar" id="julianoAvatar">
    <img src="img/juliano.jpg" alt="">
    <span class="avatar-info"><p><strong>Juliano Eibel</strong><br/>
    Desenvolvedor Front-End</p>
    </span>
</div>

section's that should appear

<section class="iframe">
    <div class="iframe_avatar">
        <img src="img/mauricio.jpg" alt="">
    </div>
    <div class="iframe_info">
       <span class="iframe_close">&times;</span>
        <p><strong>Maurício Munhoz</strong><br/>
                Diretor/Consultor Técnico</p>
        <p>Formado em Engenharia Industrial pela Universidade Braz Cubas de Moji das Cruzes - SP. Antes de fundar a Munhoz Consultoria, Maurício atuou como Engenheiro e Supervisor da Qualidade na Valeo Sistemas Automotivos Ltda, com a coordenação de equipes de técnicos e engenheiros, planejamento de atividades, tratamento de não conformidades, planejamento e gerenciamento de custos e investimentos da área da qualidade, negociação em compras e aprovação de projetos. </p>
    </div>
</section>
<section class="iframe">
    <div class="iframe_avatar">
        <img src="img/alexandre.jpeg" alt="">
    </div>
    <div class="iframe_info">
       <span class="iframe_close">&times;</span>
        <p><strong>Alexandre Lúcio da Silva</strong><br/>
                Diretor/Consultor Técnico</p>
        <p>Formado em Engenharia Industrial pela Universidade Braz Cubas de Moji das Cruzes - SP. Antes de fundar a Munhoz Consultoria, Maurício atuou como Engenheiro e Supervisor da Qualidade na Valeo Sistemas Automotivos Ltda, com a coordenação de equipes de técnicos e engenheiros, planejamento de atividades, tratamento de não conformidades, planejamento e gerenciamento de custos e investimentos da área da qualidade, negociação em compras e aprovação de projetos. </p>
    </div>
</section>

JS

$(".avatar").click(function() {
   $('.iframe').addClass('open');
});

Answer 1

As you want to open corresponding iframe class section then use .index() along with .eq()

$(".avatar").click(function() { // index
   $('.iframe').eq($(this).index()).addClass('open'); // matched index
});

Answer 2

Using the index of the div class to open would help. https://api.jquery.com/index/

ex - get the index of the iframe/class using ".index()" then compare if the index matches then add the class open. Please see the jquery index documentation.

Answer 3

html

<section id="iframe_0" class="iframe"></section>
<section id="iframe_1" class="iframe hidden"></section>
<section id="iframe_2" class="iframe hidden"></section>

css

.hidden {
    display: none;
}

js

$(".avatar").on('click', function() {
    var i = 2;

    $('.iframe').addClass("hidden");
    $('#iframe_' + i).removeClass("hidden");
}