javascript - JQuery selector change every 3 item -

i'm working php loops , creating multiple li in 1 ul. problem is, need show every fourth li when click on 1 of 3 previous li.

at moment works first previous li this:

  $('.last_news li').on('click', function(){        $('+ .actu_details',this).toggleclass('expend');    }); 

anyone got clues

$('.last_news li').on('click', function() {      $('+ .actu_details', this).toggleclass('expend');    });

last_news {    padding: 35px  }    ul {    padding-left: 0px;    margin: 0;    overflow: hidden;  }    ul li {    list-style-type: none;    cursor: pointer;    float: left;    width: 33%;    height: 250px;    background-color: red;    margin-right: 0.5%;    margin-bottom: 5px;    color: #fff;    position: relative;  }    li:nth-of-type(3) {    margin-right: 0;  }    li:nth-of-type(4n+7) {    margin-right: 0;  }    li.actu_details {    width: 100%;    height: 0px;    background-color: green;    display: block;  }    li.actu_details.expend {    height: 350px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <section class="last_news">    <div class="contenu_grid">      <ul>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="actu_details">          detail        </li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="actu_details">          detail        </li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="actu_details">          detail        </li>      </ul>    </div>  </section>

you can use nextall() target following sibling actu_details element use :first/:eq(0)/.eq(0)/.first() target first li

$('.last_news li').on('click', function () {     $(this).nextall('.actu_details:first').toggleclass('expend');     //$(this).nextall('.actu_details').eq(0).toggleclass('expend'); }); 

 $('.last_news li').on('click', function() {     $(this).nextall('.actu_details:first').toggleclass('expend');   });

.last_news {    padding: 35px  }    ul {    padding-left: 0px;    margin: 0;    overflow: hidden;  }    ul li {    list-style-type: none;    cursor: pointer;    float: left;    width: 33%;    height: 250px;    background-color: red;    margin-right: 0.5%;    margin-bottom: 5px;    color: #fff;    position: relative;  }    li:nth-of-type(3) {    margin-right: 0;  }    li:nth-of-type(4n+7) {    margin-right: 0;  }    li.actu_details {    width: 100%;    height: 0px;    background-color: green;    display: block;  }    li.actu_details.expend {    height: 350px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <section class="last_news">    <div class="contenu_grid">      <ul>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="actu_details">          detail        </li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="actu_details">          detail        </li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="actu_details">          detail        </li>      </ul>    </div>  </section>

fiddle