João Santos João Santos - 1 year ago 72
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 class="parent2">
<div class="logo-case"></div>
<div class="logo-case"></div>
<div class="logo-case"></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() {
$('**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 Source

Check out this fiddle:

I think it achieves what you are trying to do.

$('.parent1 i').each(function(idx, el) {
        $(".parent2 .logo-case").css({height: '0px'})
                                .eq(idx).css({height: '100px'});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download