CODEWITHSUNDEEP
javascriptjquery
mat
mat

Reputation: 130

How to show text in different div by clicking on li in another div?

I have ul and inside li. Each LI is Phase. I want by clicking on Li, the text in phases-text div shows. Each paragraph is assigned to its li element. And it should be able to add by klient in wordpress new Phase in li and new text into phases-text div. If i click on LI-first element, that should p first element of phases-text appear, if click on 2nd LI element, 2nd P should apear, 4th li element click, 4th p element apear etc. Also triangle should move to active Li when its P is active.

$('.phases ul li').on('click', function(e) {
  e.preventDefault();
  if($(this).hasClass('active')){
    $(".phases-text .active").removeClass('active');
  }else{
    $(this).addClass('active');
    $(".phases-text .active").addClass('active');
  }
});
.phases ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    text-align: center;
    position: relative;
}

.phases ul li {
    cursor: pointer;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
}

.phases ul li.active:after{
    content: "";
    display: block;
    position: absolute;
    margin: auto;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    border-left: 2px solid rgba(2,139,207, .5);
    border-top: 2px solid rgba(2,139,207, .5);
    background-color: #fff;
    bottom: -26.4px;
    left: 40%;
}

.phases-text p {
    display: none;
}

.phases-text {
    padding: 10px 10px;
    border: 2px solid rgba(2,139,207, .5);
}

.phases-text p.active {
    display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='phases'>
            <ul>
                <li class='active'>Faza anagenu</li>
                <li>Faza katagenu</li>
                <li>Faza telogenu</li>
            </ul>
            <div class="phases-text">
                <p class='active'>Lorem ipsum</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor purus, rutrum aliquet purus sit amet, vestibulum semper sem. Nunc pellentesque rhoncus cursus. </p>
                <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
</p>
            </div>
        </div>

Upvotes: 0

Views: 421

Answers (1)

SilverSurfer
SilverSurfer

Reputation: 4368

You should use index() to get the number position of the clicked element and eq() with the index as parameter to select the element with the same position to add the active class:

$('.phases ul li').on('click', function(e) {
  e.preventDefault();
  $('.phases ul li.active').removeClass('active');
  $(this).addClass('active');
  
  $(".phases-text > .active").removeClass('active');
  $(".phases-text p").eq($(this).index()).addClass('active')
  
});
.phases ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    text-align: center;
    position: relative;
}

.phases ul li {
    cursor: pointer;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
}

.phases ul li.active:after{
    content: "";
    display: block;
    position: absolute;
    margin: auto;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    border-left: 2px solid rgba(2,139,207, .5);
    border-top: 2px solid rgba(2,139,207, .5);
    background-color: #fff;
    bottom: -26.4px;
    left: 40%;
}

.phases-text p {
    display: none;
}

.phases-text {
    padding: 10px 10px;
    border: 2px solid rgba(2,139,207, .5);
}

.phases-text p.active {
    display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='phases'>
            <ul>
                <li class='active'>Faza anagenu</li>
                <li>Faza katagenu</li>
                <li>Faza telogenu</li>
            </ul>
            <div class="phases-text">
                <p class='active'>Lorem ipsum</p>
                <p>Dolor sit amet, consectetur adipiscing elit. Etiam dolor purus, rutrum aliquet purus sit amet, vestibulum semper sem. Nunc pellentesque rhoncus cursus. </p>
                <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
</p>
            </div>
        </div>

Upvotes: 1

Related Questions