João Santos João Santos - 2 days ago 5
CSS Question

Jquery toggle or hide/show elements that have their links on other parents by order?

I guys, let me start that if you have seen my problem on other post or reference redirect me to that. I couldn't find anything with my specific problem.

My problem is that i want to link actions from one child to a child on other parent like so:

<div class="parent1">
<i class="link1"></i>
<i class="link2"></i>
<i class="link3"></i>
</div>

<div class="parent2">
<div class="logo-case"></div>
<div class="logo-case"></div>
<div class="logo-case"></div>
</div>


I know the js is not right (duh) but i want to illustrate an ideia of what I'm trying to accomplish.

$('.parent1 i').each(function() {
$(this).click(function(){
$('**all** .logo-case').css("height", "0");
$(' **this** .logo-case').css("height", "100%");
)};
});


Now I want that the first "i.link1" gives height to the first "logo-case" no matter of the classes added to "logo-case" which means "link1" always affects the first "logo-case" and so on.

Thanks in advance for any response.

Answer

Check out this fiddle: https://jsfiddle.net/6jaj5L0y/1/

I think it achieves what you are trying to do.

$('.parent1 i').each(function(idx, el) {
    $(this).click(function(){
        $(".parent2 .logo-case").css({height: '0px'})
                                .eq(idx).css({height: '100px'});
  });
});
Comments