Is it possible to get child number and use the same number on another element?

Question

.rules-container and rules-buttons have got the same count of child elements.
I want to make jQuery code thats get child value of rules-button.active and set display:block to the same child value of "p" element in .rules-container

I wrote jQuery code thats highlight the icons but I don't know how to write the second stage of my function. Is there any way to make is simple via jQuery or css?

$(document).ready(function() { 
    $('.rules-button').click(function() {
        if ($('.rules-button').hasClass('active')) {
            $('.rules-button').removeClass('active');
        }
        $(this).addClass('active');
     });
});

.rules-container {
    display: grid;
    background: #f2f2f2;
    text-align: center;
    border-radius: 2px;
    padding: 20px;
    grid-row: 2/3;
    align-items: center;
}

.content .rules-container p {
    color: #080808;
    font: 400 14px 'Open Sans', sans-serif;
}

.content .rules-buttons {
    display: grid;
    grid-row: 3/4;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    justify-items: center;
}

.rules-buttons .rules-button {
    display: grid;
    width: 56px;
    height: 56px;
    background: #1a1a1a;
    border-radius: 50%;
    align-items: center;
    justify-items: center;
    transition: 250ms cubic-bezier(.75, 0, .25, 1);
}

.rules-buttons .rules-button.active {
    background: #ffff00;
    animation: borders-animation 2000ms infinite ease-in-out;
}

.rules-buttons .rules-button img {
    display: grid;
    width: 40px;
    height: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rules-container">
   <p>text 1</p>
   <p style="display: none">text 2</p>
   <p style="display: none">text 3</p>
</div>
<div class="rules-buttons">
   <div class="rules-button active">ee<img src="icon/lock_open.svg" alt=""></div>
   <div class="rules-button"><img src="icon/timeline.svg" alt=""></div>
   <div class="rules-button"><img src="icon/explore.svg" alt=""></div>
</div>

Possible duplicate of [find index of child using jQuery?](https://stackoverflow.com/questions/10460815/find-index-of-child-using-jquery) — chazsolo, Apr 22 '19 at 15:42

score 0 · Accepted Answer · answered Apr 22 '19 at 15:44

Utilizing index and eq you can do what you are looking for.

Also, what I prefer to do is remove the class or (hide) on everything, then just show or add class to this instead of using if statements.

$(document).ready(function() { 
    $('.rules-button').click(function() {
      $('.rules-button').removeClass('active');
      $(this).addClass('active');
      $(".rules-container p").hide();
      $(".rules-container p").eq($('.rules-button.active').index()).show();
    });
    
});

.active{background:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rules-container">
   <p>text 1</p>
   <p>text 2</p>
   <p>text 3</p>
</div>
<div class="rules-buttons">
   <div class="rules-button"><img src="icon/lock_open.svg" alt=""></div>
   <div class="rules-button active"><img src="icon/timeline.svg" alt=""></div>
   <div class="rules-button"><img src="icon/explore.svg" alt=""></div>
</div>

This is it!, thanks so much! Thanks for advice to not use if statement and show how it works. — ownidea, Apr 22 '19 at 15:47

score 0 · Answer 2 · answered Apr 22 '19 at 15:53

$(document).ready(function() { 
    $('.rules-button').click(function() {
        var index = $(this).index()
        if ($('.rules-button').hasClass('active')) {
            $('.rules-button').removeClass('active');
        }
        $(this).addClass('active');
        $(".rules-container > p").eq(index).css({"display": "block"})
     });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rules-container">
   <p>text 1</p>
   <p style="display: none">text 2</p>
   <p style="display: none">text 3</p>
</div>
<div class="rules-buttons">
   <div class="rules-button active"><img src="https://cdn.pixabay.com/photo/2013/07/13/11/34/owl-158410_640.png" alt=""></div>
   <div class="rules-button"><img src="https://cdn.pixabay.com/photo/2014/04/03/00/39/bald-eagle-309003_960_720.png" alt=""></div>
   <div class="rules-button"><img src="https://cdn.pixabay.com/photo/2014/04/03/00/39/bald-eagle-309003_960_720.png" alt=""></div>
</div>

Is it possible to get child number and use the same number on another element?

2 Answers2