There is a markup and a code that hides and shows a div, but the problem is that it would work, I need to place the conditions_check div in the conditions_check div, but I can’t do that, because I’m breaking another code, how can I get out of position ? Tell me please.

  <div class="conditions_check"> <span>The user must be subscribed to the chanal</span> <div class="conditions_arrow"></div> </div> <div class="conditions_input"> <input type="text"> </div> <div class="conditions_check"> <span>The user must have at least X subscribers</span> <div class="conditions_arrow"></div> </div> <div class="conditions_input"> <input type="text"> </div> .conditions_check { display: inline-block; height: 2.5vw; width: 99%; border-radius: 0.5vw; color: #170738; padding-left: 1vw; margin-top: 1vw; } .conditions_check span { position: relative; top: -0.4vw; left: -0.375vw; font-size: 1vw; } .conditions_input { display: inline-block; width: 99%; } .conditions_arrow { display: inline-block; width: .6vw; height: .6vw; background: red; background-size: 100%; } .blue { background-color: blue; } $(document).ready(function() { $('.conditions_check').on('click', '.conditions_arrow', function() { $(this).toggleClass('blue').siblings('.conditions_input').slideToggle(0); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    1 answer 1

     $(document).ready(function() { $('.conditions_check').on('click', '.conditions_arrow', function() { $(this).toggleClass('blue'); $(this).parent().next().slideToggle(0); }); }); 
     .conditions_check { display: inline-block; height: 2.5vw; width: 99%; border-radius: 0.5vw; color: #170738; padding-left: 1vw; margin-top: 1vw; } .conditions_check span { position: relative; top: -0.4vw; left: -0.375vw; font-size: 1vw; } .conditions_input { display: inline-block; width: 99%; } .conditions_arrow { display: inline-block; width: .6vw; height: .6vw; background: red; background-size: 100%; } .blue { background-color: blue; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="conditions_check"> <span>The user must be subscribed to the chanal</span> <div class="conditions_arrow"></div> </div> <div class="conditions_input"> <input type="text"> </div> <div class="conditions_check"> <span>The user must have at least X subscribers</span> <div class="conditions_arrow"></div> </div> <div class="conditions_input"> <input type="text"> </div>

    • Thanks a lot! He broke his head how to implement it, he knew that the decision was close, but he did) - Maxim Vorobiev